2️⃣Step 2 - Import 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 create your first access for your app.

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

2. Install the SDK and initialize Eartho One

Install package


npm install @eartho/one-client-js

Or

<script src="https://cdn.jsdelivr.net/npm/@eartho/one-client-js@2.0.11/dist/one-client-js.production.js"></script>

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

Copy the values of your eartho client ID from the "Setup tab" And replace it with "YOUR_EARTHO_CLIENT_ID" + "YOUR_EARTHO_ACCESS_ID" in stage 3 code.

If you already have an authentication system in your app and you want to add eartho only as another provider, you probably want to use JS, pick JS on the top selector

We support all: React, Next.js, Gatsby

Examples: https://github.com/eartho-group/one-client-react/tree/main/examples

1. Using npm

npm install @eartho/one-client-react

Using yarn

yarn add @eartho/one-client-react

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

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

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

ReactDOM.render(
  <EarthoOneProvider
    clientId="YOUR_EARTHO_CLIENT_ID"
  >
    <App />
  </EarthoOneProvider>,
  document.getElementById('app')
);

If you already has authentication system in your app and you want add eartho only as another provider, you probably want to use JS, pick JS on the top selector

1. Using npm:

npm install @eartho/one-client-vue

Using yarn:

yarn add @eartho/one-client-vue

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

Copy the values of your eartho client id from "setup tab" And replace it with "YOUR_EARTHO_CLIENT_ID" + "YOUR_EARTHO_ACCESS_ID" in stage 3 code. 3. Create an instance of the EarthoPlugin by calling createEarthoOne and pass it to Vue's app.use().

import { createEarthoOne } from '@eartho/one-client-vue';

const app = createApp(App);

app.use(
  createEarthoOne({
    
    client_id: '<YOUR_EARTHO_CLIENT_ID>',
    
  })
);

app.mount('#app');

If you already has authentication system in your app and you want add eartho only as another provider, you probably want to use JS, pick JS on the top selector

Using npm:

npm install @eartho/one-client-angular

We also have ng-add support, so the library can also be installed using the Angular CLI:

ng add @eartho/one-client-angular

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

Copy the values of your eartho client id from "setup tab" And replace it with "YOUR_EARTHO_CLIENT_ID" in stage 3 code. 3. Install the SDK into your application by importing AuthModule and configuring with your Eartho client ID:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// Import the module from the SDK
import { AuthModule } from '@eartho/one-client-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,

    // Import the module into the application, with configuration
    AuthModule.forRoot({
      clientId: 'YOUR_EARTHO_CLIENT_ID',
    }),
  ],

  bootstrap: [AppComponent],
})
export class AppModule {}

1. In your app's build.gradle dependencies section, add the following:

dependencies {
  // Add the Eartho Android SDK
  implementation 'io.github.eartho-group:one:1.0.7'
}

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

Copy your eartho values from "setup tab" And replace it with

"YOUR_EARTHO_CLIENT_ID" "YOUR_EARTHO_CLIENT_SECRET" "YOUR_EARTHO_ACCESS_ID" in stage 3 code.

1. Install

Or using Swift Package Manager

https://github.com/eartho-group/one-client-swift

Or using Cocoapods

pod 'EarthoOne', '~> 1.0.4'

2. Add URL type https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app Example: https://ibb.co/8dkYwmT -Identifier: eartho -URL Schemes: $(PRODUCT_BUNDLE_IDENTIFIER).one.eartho.world

3. Attach WebAuthentication Add WebAuthentication.resume(with: url) to app life cycle

/// Or Using the SwiftUI app lifecycle in App file:
ContentView()
     .onOpenURL { url in
         WebAuthentication.resume(with: url)
     }

/// Or Using the UIKit app lifecycle, in your `AppDelegate.swift`:
func application(_ app: UIApplication,
                   open url: URL,
                  options: [UIApplication.OpenURLOptionsKey: Any]) -> Bool {
return WebAuthentication.resume(with: url)
}

4. Go to https://creator.eartho.world/ and

Copy your eartho values from "setup tab" And replace it with

"YOUR_EARTHO_CLIENT_ID" "YOUR_EARTHO_CLIENT_SECRET" "YOUR_EARTHO_ACCESS_ID" in stage 3 code.

Flutter
```
flutter pub add eartho_one
```
Android ------------------------------------------------------------ 👍

iOS ------------------------------------------------------------ 2.1 Add URL type https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app Example: https://ibb.co/8dkYwmT -Identifier: eartho -URL Schemes: $(PRODUCT_BUNDLE_IDENTIFIER).one.eartho.world

--------------------------------------------------------

2.2. Attach WebAuthentication Add WebAuthentication.resume(with: url) to app life cycle

import EarthoOne

/// Or Using the SwiftUI app lifecycle in App file:
ContentView()
     .onOpenURL { url in
         WebAuthentication.resume(with: url)
     }

/// Or Using the UIKit app lifecycle, in your `AppDelegate.swift`:
func application(_ app: UIApplication,
                   open url: URL,
                  options: [UIApplication.OpenURLOptionsKey: Any]) -> Bool {
return WebAuthentication.resume(with: url)
}

Web ------------------------------------------------------------ Add this to index.html

  <script src="https://cdn.jsdelivr.net/npm/@eartho/one-client-js/dist/eartho-one-js.production.js"></script>

Go to https://creator.eartho.world/ and
Copy your eartho values from "setup tab" And replace it with
"YOUR_EARTHO_CLIENT_ID" "YOUR_EARTHO_CLIENT_SECRET" "YOUR_EARTHO_ACCESS_ID" in stage 3 code.

Install in your react app

npm install @eartho/one-client-react-native

iOS ------------------------------------------------------------ 2.1 Add URL type https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app Example: https://ibb.co/8dkYwmT - Identifier: eartho - URL Schemes: $(PRODUCT_BUNDLE_IDENTIFIER).one.eartho.world

--------------------------------------------------------

2.2. Attach WebAuthentication Add WebAuthentication.resume(with: url) to app life cycle

/// Or Using the SwiftUI app lifecycle in App file:
ContentView()
     .onOpenURL { url in
         WebAuthentication.resume(with: url)
     }

/// Or Using the UIKit app lifecycle, in your `AppDelegate.swift`:
func application(_ app: UIApplication,
                   open url: URL,
                  options: [UIApplication.OpenURLOptionsKey: Any]) -> Bool {
return WebAuthentication.resume(with: url)
}

4. Go to https://creator.eartho.world/ and

Copy your eartho values from "setup tab" And replace it with

"YOUR_EARTHO_CLIENT_ID" "YOUR_EARTHO_CLIENT_SECRET" "YOUR_EARTHO_ACCESS_ID" in stage 3 code.

Install

npm install @eartho/one-client-js
npm install @eartho/one-client-extension-browser

PreviousStep 1 - Create your first project and access point NextStep 3 - Integrating Eartho into your app

Last updated 10 days ago