Amplify-angular-material NPM

NgxCognito

This project was generated with Angular CLI version 9.0.3.

Description

This library provides the complete logic and angular material components for AWS-Amplify.

Prerequisite

Angular Material is installed
Cognito with Amplify is used and configured aws-amplify
Angular i18n is installed ng add @angular/localize

Amplify:

Add to polyfills.ts

(window as any).global = window;

main.ts cognito (see config: https://aws-amplify.github.io/docs/js/angular)

 Amplify.configure({
   Auth: environment.cognito.Auth
 });
 
 Auth.configure({
   oauth: environment.cognito.oauth
 });

disable Ivy because angular-amplify does not support it right now. tsconfig.json

 "angularCompilerOptions": {
    "enableIvy": false
 }

optional: disable Safari auto zoom in to input fields. index.html:
```
 <meta ... content="... maximum-scale=1">
```

Library

Configuration

AppModule

    imports: [
      ...
      AuthModule.forRoot(),
      ...
   ]

Customize:

      const config = {
        domain: 'www.dev.auth.de',
        ...
      };

      imports: [
        ...
        AuthModule.forRoot(config),
        ...
     ]

Configuration:

Parameter	Default	Options	Effect
domain	''	string	for the qr

Features

Login/SignUp/Forgot Password components
Http Interceptor
Auth guard

Library routes:

const routes: Routes = [
  { path: 'login', component: LoginPageComponent },
  { path: 'confirm-login', component: MfaChallengePageComponent },
  { path: 'signup', component: SignUpPageComponent },
  { path: 'confirm', component: ConfirmSignUpPageComponent },
  { path: 'forgot', component: ForgotPasswordPageComponent },
  { path: 'select-mfa', component: MfaSelectionPageComponent },
  { path: 'setup-mfa', component: MfaSetupPageComponent }
];

// /can-not-load is used by the auth.guard

Example:

login() {
    this.router.navigate(['/login']);
}

logout() {
  this.auth.signOut()
  .then(() => this.router.navigate(['/home']));
}


const routes: Routes = [
  {path: '', redirectTo: '/example', pathMatch: 'full'},
  {path: 'can-not-load', redirectTo: '/home', pathMatch: 'full'},
  {path: 'example', canLoad: [AuthGuard], loadChildren: () => import('../app/recipe/example.module').then(m => m.Example)},
];