Authenticate Angular with OpenID Connect

New LIVE EventAuth0 Assemble - THE Identity Conference for Application BuildersGet Tickets

Authentication as a service
Easy to integrate
Customizable
Secure token auth

Auth0.com

Authenticate

Angular

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>