Auth0 Angular Login

This module is a wrapper of utils based on Auth0-Js SSO implementation.

Installation

npm install ses-auth0module --save

How to

Configuration

You have to create your configuration in the module file. In order to do that, you have to declare a constant with specific Auth0 fields as describe below.

In providers part of your module declaration you have to inject your configuration as a atuh0.config bean.

app.module.ts

export const AUTH_CONFIG: AuthConfig = {
  clientID:  'YOUR_CLIENT_ID',
  domain: 'YOUR_DOMAIN',
  callbackURL: 'http://localhost:4200/callback',
  metaDataNameSpace: 'YOUR_META_DATA_NAMESPACE',
};

  @NgModule({
  declarations: [
   .../...
  ],
  imports: [
	.../...
    RouterModule.forRoot(ROUTES, { useHash: false })
  ],
  providers: [AuthService, { provide: 'auth0.config', useValue: AUTH_CONFIG },
  .../...],
  bootstrap: [AppComponent]
})

Basic workflow

Basically, you can handle authentification in your application main component.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { AuthService } from 'ses-auth0module';

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

  constructor(public auth: AuthService) {
  }

  ngOnInit() {
    this.auth.handleAuthentication();
    Observable.interval(1000 * 30).subscribe(x => {
        this.auth.renew();
    });
  }

In this example, we handle authentification on each main component reload with the handleAuthentication method.

Observable part is present to illustrate an auto-renew token ability. In our example, token is automatically refresh every 30s.

Route Guard Configuration

Generally you have to protect each component route with a authentification test. This ability is cover by the LoginActivate Guard class. You can use it this way in your app.routes.ts :

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ExamplePageComponent } from './example-page/example-page.component';
import { CallbackComponent } from './callback/callback.component';
import { LoginActivate } from 'ses-auth0module';

export const ROUTES: Routes = [
  { path: 'callback', component: CallbackComponent },
  { path: 'example', data: { roles: ['read:items'], path: 'example' }, component: ExamplePageComponent, canActivate: [LoginActivate] },
  { path: 'waiting', data: { roles: ['read:items'], path: 'waiting' }, component: HomeComponent, canActivate: [LoginActivate] },
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '' }
];

Important points are :

• Specify LoginActivate as the canActivate provider.
• Put your required rights on each routes in the data field data: { roles: ['read:items'], path: 'example' }
  • user need 'read:items' right to access on this page
  • roles list is actually manage as a OR logical operator, user need at least on of listed rights
  • path is used to manage return to callback part

Author

[email protected]

License

This project is licensed under the MIT license. See the LICENSE file for more info.