2️⃣Step 2 - Integrating Eartho into your app

This document describes how to complete a basic Eartho integration in a web app.

1. Before we start, you need to import Eartho into your app.

1️⃣Step 1 - Create your first project and access point

2. Install the SDK and initialize Eartho One

Example: https://github.com/eartho-group/one-client-react/tree/main/examples/nextjs-app

1. Using npm

npm install @eartho/one-client-react

Using yarn

yarn add @eartho/one-client-react

2. Go to https://creator.eartho.io/ and

Copy the values of your eartho client ID from "Developers Integration" And replace it with "YOUR_EARTHO_CLIENT_ID" in the stage 3 code. 3. Configure the SDK by wrapping your application in EarthoOneProvider:

// src/layout.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { EarthoOneProvider } from '@eartho/one-client-react';
import App from './App';

export default async function RootLayout({
}: {
  children: React.ReactNode;
}) {

  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`${inter.className} overflow-hidden`}>

          redirect_uri: typeof window !== 'undefined' && window.location.origin,

  </html >


3. Integrating Eartho into your app

Need an example project? https://github.com/eartho-group/one-client-react/tree/main/examples/nextjs-app Use the useEarthoOne hook in your components to access the authentication state (isLoading, isConnected and user) and authentication methods (connectWithPopup and logout):

// src/App.js
import React from 'react';
import { useEarthoOne } from '@eartho/one-client-react';

function LoginPage() {
  const {
  } = useEarthoOne();

  if (isLoading) {
    return <div>Loading...</div>;
  if (error) {
    return <div>Oops... {error.message}</div>;

  if (isConnected) {
    return (
        Hello {user.displayName}{' '}
        <button onClick={() => logout({ returnTo: window.location.origin })}>
          Log out
  } else {
    return <button
          className="btn btn-outline-success"
          onClick={() => connectWithPopup({ accessId: "YOUR_EARTHO_ACCESS_ID" })}
        Log in

export default LoginPage;

Protect Pages

Create a page that you want to be protected, e.g. a profile page, and wrap it in the withAuthenticationRequired :

// pages/profile.js
import React from 'react';
import { useEartho, withAuthenticationRequired } from '@eartho/one-client-react';

const Profile = () => {
  const { user } = useEartho();
  return (
      <li>Name: {user.nickname}</li>
      <li>E-mail: {user.email}</li>

// Wrap the component in the withAuthenticationRequired handler
export default withAuthenticationRequired(Profile);

Protect API Routes

Please read our docs on node.js integration and use it inside your next.js project

3️⃣Step 3 - Integrating Eartho into your server

Last updated