This module is a wrapper of utils based on Auth0-Js SSO implementation.
npm install ses-auth0module --save
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]
})
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.
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
valere.colleville@ses-imagotag.com
This project is licensed under the MIT license. See the LICENSE file for more info.