Angular authentication with digitalocean (oauth2)

We are hiring!If you care deeply about quality, teamwork, and want to build software that people love.Join Us!

Authentication as a service
Easy to integrate
Customizable
Secure token auth

Auth0.com

Authenticate

Angular

1Setup your application's code

2Create an Application Auth0 dashboard

3Install the Custom Social Connection extension under

4List the app under the Installed Extensions tab

5Create a digitalocean (oauth2) connection under Custom Social Connections

6Configure your connection settings and enable your application under the Apps tab

Setup your application's code

# installation with npm
npm install --save auth0-js

# installation with yarn
yarn add auth0-js

The auth0.js library can also be retrieved from Auth0's CDN.

<script src="https://cdn.auth0.com/js/auth0/8.12.3/auth0.min.js"></script>

Add the following lines to your base code

// src/app/app.component.ts

import { Component } from '@angular/core';
import { AuthService } from './auth/auth.service';

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

  constructor(public auth: AuthService) {
    auth.handleAuthentication();
  }

}

<!-- src/app/app.component.html -->

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Auth0 - Angular</a>

      <button
        class="btn btn-primary btn-margin"
        routerLink="/">
          Home
      </button>

      <button
        class="btn btn-primary btn-margin"
        *ngIf="!auth.isAuthenticated()"
        (click)="auth.login()">
          Log In
      </button>

      <button
        class="btn btn-primary btn-margin"
        *ngIf="auth.isAuthenticated()"
        (click)="auth.logout()">
          Log Out
      </button>

    </div>
  </div>
</nav>

<main class="container">
  <router-outlet></router-outlet>
</main>