SM Authorization Module

This module must be used for SM Products 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 with logout component for header;

• provide your app with available products 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 imports with provided parameters: apiEndpoint, formUrl which should be stored in environments files

import {SmAuthModule} from '@spheremall_org/auth-module';
@NgModule({
    imports: [
        SmAuthModule.forRoot({
          apiEndpoint: environment.ACCOUNTS_API_ENDPOINT,
          formUrl: environment.AUTH_FORM_URL
        })
    ]
})

• routes.ts:

You should use authorization guard for your routes.

import {AuthGuardService} from '@spheremall_org/auth-module';

export const routes: Routes = [
  {
      path       : '', 
      component  : Component, 
      canActivate: [ AuthGuardService ], 
      data       : { isProduction: environment.production }
  }
];

• app.component:

Authorization will be automatically checked on Guard level, but you can use isAuthorized method from AuthService if it is needed.

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

• services usage

AuthorizationInterceptor will add authorization header to each request automatically. It is already included in SmAuthModule, no other actions required. IdToken can be found in AuthService.getToken().

import {AuthService} from '@spheremall_org/auth-module';
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 '@spheremall_org/auth-module';
@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>
              <!-- SmAuthModule logout in header -->
              <sm-auth-header-logout></sm-auth-header-logout>
            </mat-list-item>
          </mat-list>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>

• header available products list

app.component.html

<!--Remove existing logo & title
<span class="title-logo">
  <img src="../assets/images/shell-app-icon.png" alt="{{ title }}">
</span>
<h1>{{ title }}</h1>
-->

<!--Add component with `product` parameter-->
<sm-header-products product="Heimdall || Eden || Tyto || Thuja"></sm-header-products>