Authentication in Angular Using Auth0 & Auth0 Lock

Authentication can be hard, and reinventing the wheel each time it’s needed in an app is certainly no fun. Thankfully, different services and tools can take care of the heavy lifting for us. We’ve already discussed implementing authentication using Firebase, so let’s now explore an alternative: Auth0. Auth0 is a very powerful solution that offers all the features you would expect from an authentication provider (social logins, email/password logins, authorization rules,…)

In this post, we’ll be using the Auth0 Lock widget, which allows to embed a popup inside your app for authentication. You can also implement authentication on Auth0’s hosted login page, in which case you may want to refer to this guide.

Setup

First things first, you’ll need to create an Auth0 account and then create a new Single Page Web Application client.

Once your client is created, you’ll be able to configure the settings according to your preferences. One thing that’ll be important is to add a callback URL that reflects an actual login callback route in your Angular app. Here we’ll create a login route, so we’ll add http://localhost:4200/login as our only allowed callback URL. Auth0 will redirect to it after authentication.

In your client’s settings, you’ll also have access to the domain and client ID information. Add that information in your app’s environment.ts file:

export const environment = {
  production: false,
  auth0: {
    domain: 'your-awesome-domain.auth0.com',
    clientId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX',
    callbackURL: 'http://localhost:4200/login'
  }
};

---

You’ll also need three additional packages in your project: auth0-js, auth0-lock and angular2-jwt. Let’s install them into our project using either npm or Yarn:

$ yarn add auth0-js auth0-lock angular2-jwt

# or, using npm:
$ npm install auth0-js auth0-lock angular2-jwt

Now add auth0.min.js to the list of scripts that are included in the build for your app:

...,
"scripts": [
  "../node_modules/auth0-js/build/auth0.min.js"
],
...

Tenants

With Auth0, you can create multiple tenants to accommodate for different deployment environments (development, production, staging,…) Each tenant gets its own domain name (e.g.: my-app-dev.auth0.com and my-app.auth0.com). This way, you can create a different client for production, and all you’d need is to populate your production environment file with the different domain name, client id and callback URL.

Components & Routing Setup

We’ll add two components to our app: a home component and a login callback component. We can use the Angular CLI to easily generate the new components:

$ ng g c home
$ ng g c login

Next, let’s setup a simple routing module:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'login', component: LoginComponent }
];

Auth Service

Let’s also use the Angular CLI to create an Auth service:

$ ng g s auth

Let’s start setting up the auth service:

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { environment } from '../environments/environment';

import { tokenNotExpired } from 'angular2-jwt';
import Auth0Lock from 'auth0-lock';
@Injectable()
export class AuthService {
  auth0Options = {
    theme: {
      logo: '/assets/alligator-logo.svg',
      primaryColor: '#DFA612'
    },
    auth: {
      redirectUrl: environment.auth0.callbackURL,
      responseType: 'token id_token',
      audience: https://${environment.auth0.domain}/userinfo,
      params: {
        scope: 'openid profile'
      }
    },
    autoclose: true,
    oidcConformant: true,
  };
  lock = new Auth0Lock(
    environment.auth0.clientId,
    environment.auth0.domain,
    this.auth0Options
  );
  constructor(private router: Router) {
    this.lock.on('authenticated', (authResult: any) => {
      console.log('Nice, it worked!');
      this.router.navigate(['/']); // go to the home route
      // ...finish implementing authenticated
    });
this.lock.on('authorization_error', error => {
  console.log('something went wrong', error);
});  }
  login() {
    this.lock.show();
  }
  logout() {
    // ...implement logout
  }

Here are a few things to note:

• We first define a new instance of Auth0Lock, which takes the client id, domain and a configuration object. There are plenty of configuration options available, and here on top of the required options we also added some theming options to style the lock widget.
• In the options, we also specify what kind of data we want back using the scopes key. Here, on top of the default openid, we’re also interested in getting back the profile information.
• In the service’s constructor, we listen for either the authenticated or the authorization_error events on the lock instance. The authenticated event’s callback will have our logic for when an authentication is successful.
• The login method is as easy to implement as calling the show method on our lock instance.
• We’ll have to come back and finish implementing the logout and and isAuthenticated methods.

---

We can now inject the auth service in our home component:

import { Component } from '@angular/core';

import { AuthService } from '../auth.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent {

And let’s add login and logout buttons in to the template:

<button
  *ngIf="!auth.isAuthenticated()"
  (click)="auth.login()">
  Sign Up or Login
</button>

<button
  *ngIf="auth.isAuthenticated()"
  (click)="auth.logout()">
  Logout
</button>

---

With our basic auth service in place, the Auth0 embed is already working and we can signup or login:

Profile, IsAuthenticated, Logout

Let’s complete our auth service implementation. For our example, we’ll save the JSON Web Token that Auth0 returns to local storage. That token can then be added to an Authorization header using the Bearer prefix on HTTP requests to your backend API. It’ll then be the responsibility of the backend to ensure that the token is valid. We’ll also get the account’s profile information that we requested using scopes and save it to local storage.

First, the logic on successful authenticated events:

this.lock.on('authenticated', (authResult: any) => {
  this.lock.getUserInfo(authResult.accessToken, (error, profile) => {
    if (error) {
      throw new Error(error);
    }

localStorage.setItem('token', authResult.idToken);
localStorage.setItem('profile', JSON.stringify(profile));
this.router.navigate(['/']);

Here we’re calling getUserInfo on the lock instance and passing-in the access token returned from the successful authentication. getUserInfo gives us access to the profile information for the user.

---

isAuthenticated

Our isAuthenticated method is useful for our app to know if there’s an authenticated used or not and adapt the UI in consequence.

To implement it, we’ll make use of angular2-jwt’s tokenNotExpired method. It’ll return false if there’s no token or if the token is expired:

isAuthenticated() {
  return tokenNotExpired();
}

---

Login Out

Since using JWTs for authentication is stateless, all we have to do to logout is to remove the token and profile from local storage:

logout() {
  localStorage.removeItem('profile');
  localStorage.removeItem('token');
}

🔑 And there you have it! Simple authentication for your apps.