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,
}: {
  children: React.ReactNode;
}) {

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

      <EarthoOneProvider
        domain={process.env.NEXT_PUBLIC_DOMAIN}
        clientId={process.env.NEXT_PUBLIC_CLIENT_ID}
        onRedirectCallback={onRedirectCallback}
        authorizationParams={{
          redirect_uri: typeof window !== 'undefined' && window.location.origin,
        }}
      >
  
        {children}
        
        </EarthoOneProvider>

    </body>
  </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 {
    isLoading,
    isConnected,
    error,
    user,
    connectWithPopup,
    logout,
  } = useEarthoOne();

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

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

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 (
    <ul>
      <li>Name: {user.nickname}</li>
      <li>E-mail: {user.email}</li>
    </ul>
  );
};

// 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