E
E
Eartho Docs
Eartho. Docs - Infrastructure
Search
K
Links

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.

2. Install the SDK and initialize Eartho One

JS
Vue
Angular
React
Kotlin
Swift
Flutter
React Native
Chrome
  1. 1.
    Install package
npm install @eartho/one-client-js
Or
<script src="https://cdn.jsdelivr.net/npm/@eartho/[email protected]/dist/eartho-one-js.production.js"></script>
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
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. 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
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
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'
}
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)
}
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. 1.
    Flutter
    flutter pub add eartho_one
  2. 2.
    Android ------------------------------------------------------------
    👍
  3. 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. 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. 5.
    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)
}
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?