Angular

Integrating Eartho into Your Angular App

This section describes how to integrate Eartho into an Angular app.

1. Install the SDK

You can install the SDK using npm or the Angular CLI.

Using npm:

npm install @eartho/one-client-angular

Using Angular CLI:

ng add @eartho/one-client-angular

2. Retrieve Eartho Client ID

Go to Eartho Creator and copy your Eartho client ID from the "Developers Integration" section.

3. Initialize and Configure the SDK

Integrate Eartho into your Angular app by configuring the SDK and handling authentication.

Example Code:

Import and Configure the SDK

// app.module.ts
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 {}

Inject the AuthService and Implement Login

// app.component.ts
import { Component } from '@angular/core';
import { AuthService } from '@eartho/one-client-angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'My App';

  constructor(public auth: AuthService) {}

  connectWithRedirect(): void {
    this.auth.connectWithPopup({ access_id: 'YOUR_EARTHO_ACCESS_ID' });
  }

  logout(): void {
    this.auth.logout({ returnTo: window.location.origin });
  }
}

Template for Login and Logout Buttons

<!-- app.component.html -->
<div>
  <button (click)="connectWithRedirect()">Log in</button>
  <button (click)="logout()">Log out</button>
</div>

Protect Routes

To protect routes, you can use Angular's route guards in combination with the AuthGuard provided by the Eartho SDK.

Add the AuthGuard to a Route

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from '@eartho/one-client-angular';
import { ProfileComponent } from './profile/profile.component';

const routes: Routes = [
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', redirectTo: '/home' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Example Profile Component

// profile.component.ts
import { Component, OnInit } from '@angular/core';
import { AuthService } from '@eartho/one-client-angular';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css'],
})
export class ProfileComponent implements OnInit {
  user: any;

  constructor(public auth: AuthService) {}

  ngOnInit(): void {
    this.auth.user$.subscribe(user => {
      this.user = user;
    });
  }
}

<!-- profile.component.html -->
<div *ngIf="user">
  <h1>{{ user.nickname }}</h1>
  <p>Email: {{ user.email }}</p>
</div>

Additional Resources

For more detailed examples and usage, visit the Eartho Angular Example Repository.