ngx-cognito-material-auth v1.0.0

Cognito Material Auth

Angular library for common auth tasks using AWS Cognito and Angular Material.

Installation

1. Install package

$ npm i ngx-cognito-material-auth

2. Import module and pass cognito details

import { CognitoMaterialAuthModule } from 'ngx-cognito-material-auth';

@NgModule({
  imports: [
    CognitoMaterialAuthModule,
    ...
  ],
  providers: [
    {
      provide: CMA_CONFIG,
      useValue: {
        cognito: {
          clientId: environment.cognito.clientId,
          userPoolId: environment.cognito.userPoolId
        }
      } as Partial<CmaConfig>
    },
    ...
  ],
  ...
})
export class AppModule {}

Usage

Login Component

This component also opens dialogs to reset or set an initial password.

<cma-login>
</cma-login>

Service

Allows manually signing a user in/out, retrieving details about the current user, and checking a users groups.

import {CmaService} from 'ngx-cognito-material-auth';

...
  constructor(
    public cmaService: CmaService
  ) {}

  ngOnInit() {
    this.cmaService.login(this.username, this.password);
  }
...

<ng-container *ngIf="cmaService.currentUserInfo$ | as profile">
  First name: {{ profile.given_name }}
  Last name: {{ profile.family_name }}
</ng-conainer>

Interceptor

Add this HTTP interceptor to automatically add the Cognito idToken to every request header.

import {CmaInterceptor} from 'ngx-cognito-material-auth';

@NgModule(
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CmaInterceptor,
      multi: true
    }
  ],
  ...
)
export class AppModule {}

Route Guards

Use CmaLoggedInGuard to only allow access to a route when the user is signed in. If you only want to allow users of a specific group, use CmaGroupGuard.

import {CmaGroupGuard, CmaLoggedInGuard} from 'ngx-cognito-material-auth';

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
    canActivate: [CmaLoggedInGuard], // Only for authorized users
  },
  {
    path: 'users',
    component: UsersComponent
    canActivate: [CmaGroupGuard], // Only for authorized users
    data: {group: 'Admin'}    // with cognito group 'Admin'
  },
  ...
]

Custom Config

You can pass additional parameters to customize the modules behavior.

@NgModule({
  providers: [
    {
      provide: CMA_CONFIG,
      useValue: {
        additionalInterceptorHeaders: {
          'x-api-key': environment.api.key
        },
        cognito: {
          clientId: environment.cognito.clientId,
          userPoolId: environment.cognito.userPoolId
        }
      } as Partial<CmaConfig>
    },
    ...
  ],
  ...
})
export class AppModule {}

Options

Interface CmaConfig

IE Support

1. Install packages

$ npm i classlist.js isomorphic-fetch

2. Add this to your polyfills.ts

if (!Element.prototype.matches) {
  Element.prototype.matches = (Element.prototype as any).msMatchesSelector ||
    Element.prototype.webkitMatchesSelector;
}

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';

/** IE10 and IE11 support for fetch */
import 'isomorphic-fetch';