shared-shell-auth-module v1.1.0

Shell Authorization Module

This module must be used for SM Shell(s) to unify the authorization flow.

Features of the module:

• provide Amplify dynamic config for working with Cognito Multipools;

• check authorization (local storage idToken) with Amplify and redirect a user to the SM Authorization form if the user is not authorized;

• provide your app (Shell) with /auth route to validate authorization after a user logged in on SM Authorization form;

• provide you app with logout component for header;

• provide Authorization Guard to verify routes;

• provide Authorization Interceptor to add auth token automatically for each request to microservices using HttpHandler.

Integration

• app.module:

  Should be added as one of first modules to init /auth route

import {AuthModule} from './modules/auth';
@NgModule({
    imports: [AuthModule]
})

• app.component:

  You should check authorization on OnInit of your app (Shell).

import {AuthService} from './modules/auth';
export class AppComponent implements OnInit {
    constructor(private authService: AuthService) {}
    ngOnInit() {
        this.authService.isAuthorized().subscribe((isAuthorized) => {
            // your action on authorized here
        });
    }
}

• services usage

  You should use idToken to make requests to microservices. Token can be found in AuthService.getToken().

import {AuthService} from '../modules/auth';
export class UsersService {
    private token: string;
    constructor(private authService: AuthService) {
        authService.getToken().then(token => {
            this.token = token;
        });
    }
}

• header logout functionality

  user.component.ts

import {AuthService} from '../../modules/auth';
@Component({
    selector   : 'app-user',
    templateUrl: './user.component.html'
})
export class UserComponent implements OnInit {
    user: any     = {};
    constructor(private authService: AuthService) { }
    ngOnInit() {
        this.authService.getAuthorizedUser().subscribe(user => {
            this.user = user;
        });
    }
}

user.component.html

<div class="user-data" *ngIf="!!user.email" appDialog>
  <span class="user-name">
    {{ user.email }}
    <mat-icon aria-hidden="false">more_vert</mat-icon>
  </span>
    <div class="user-details">
        <div class="content">
            <mat-card>
                <mat-card-content>
                    <mat-list class="nav-list navigation">
                        <mat-list-item>
                            <!-- AuthModule logout in header -->
                            <app-auth-header-logout></app-auth-header-logout>
                        </mat-list-item>
                    </mat-list>
                </mat-card-content>
            </mat-card>
        </div>
    </div>
</div>