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.
Step 1 - Create your first project
2. Install the SDK and initialize Eartho One
JS
Vue
Angular
React
Kotlin
Swift
Flutter
React Native
Chrome
1.Install package
​
npm install @eartho/one-client-js
​
Or
​
<script src="https://cdn.jsdelivr.net/npm/@eartho/one-client-js@1.2.1/dist/eartho-one-js.production.js"></script>
​

  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.

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
​
1.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 {}
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-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')
);



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.
1.Flutter
flutter pub add eartho_one
2.Android
------------------------------------------------------------
👍


3.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)
}
​
​
4.Web
------------------------------------------------------------
Add this to index.html

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


5.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
​

3. Want to use Firebase or AWS Amplify?
Step 4 - (Optional) Integrating Eartho into your server
Last modified 7mo ago