ngx-cognito v11.0.6

NgxCognito

Versions

v 11.x.x Angular 11.0.5 v 1.x.x Angular 10.2.4 v 0.x.x Angular 9

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 npm i aws-amplify
• Angular i18n is installed ng add @angular/localize

• Add "ngx-cognito": ^11.0.0, "angularx-qrcode": "^11.0.0" to your package json and install the dependency

• 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
   });

• package.json:

    "devDependencies": {
      ...
      },
      "browser": {
        "crypto": false
      }

• angular.json:

    "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
            "allowedCommonJsDependencies": [
              "lodash",
              "qrcode",
              "@aws-crypto/sha256-js",
              "crypto-js/lib-typedarrays",
              "crypto-js/hmac-sha256",
              "buffer",
              "js-cookie",
              "uuid",
              "ulid",
              "isomorphic-unfetch",
              "axios",
              "@aws-crypto/crc32",
              "@aws-crypto/sha256-browser",
              "fast-xml-parser",
              "zen-observable"
            ]
            ...
          },

• Problem:

  Error: node_modules/@aws-amplify/api-graphql/lib-esm/types/index.d.ts:1:30 - error TS7016: Could not find a declaration file for module 'graphql/error/GraphQLError'. 'xxx/node_modules/graphql/error/GraphQLError.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql/error/GraphQLError';`
   1 import { GraphQLError } from 'graphql/error/GraphQLError';
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Add index.d.ts under src with:

    declare module 'graphql/language/ast' { export type DocumentNode = any }
    declare module 'graphql/error/GraphQLError' { export type GraphQLError = any }

• optional: disable Safari auto zoom in to input fields. index.html:

   <meta ... content="... maximum-scale=1">

Library

Configuration

• AppModule

      imports: [
        ...
        AuthCoreModule.forRoot(),
        
        // AuthModule could also be provided lazy with a custom parent route. Use a WrapperAuthModule in your application with import of AuthModule and load it via { path: 'auth', loadChildren: () => import("./auth-wrapper.module").then((m) => m.AuthWrapperModule) } see also example. (Wrapper module is needed because lazy loading with library modules does not work directly)
  
        AuthModule // Or add AuthModule directly to add routing to the main path
        ...
       ],
       providers: [
         RoutingService
       ]
       export class AppModule {
         constructor(private readonly _: RoutingService) {
         }
       }

• Customize:

        const config = {
          domain: 'www.dev.auth.de',
          userNameLoginAllowed: true
          ...
        };
  
        imports: [
          ...
          AuthCoreModule.forRoot(config),
          ...
       ]   

  Configuration:

Password validation RegExp examples

Please make sure to change your translation file to fit your password validator expression

8 digits with lower, upper case characters and numeric value:
/^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.{8,})/

8 digits with lower, upper case characters, numeric value and special character (!@#$^&):
/^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#\$%\^&])(?=.{8,})/

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: 'reset-password-required', component: ResetPasswordPageComponent },
  { path: 'select-mfa', component: MfaSelectionPageComponent },
  { path: 'setup-mfa', component: MfaSetupPageComponent }
];

// /unauthorized is used by the auth.guard to define where this route should be redirect

Example:

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

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


const routes: Routes = [
  {path: '', redirectTo: '/example', pathMatch: 'full'},
  {path: 'unauthorized', redirectTo: '/home', pathMatch: 'full'},
  {path: 'example', canLoad: [AuthGuard], loadChildren: () => import('../app/recipe/example.module').then(m => m.Example)},
  {
    path: 'role-example', canActivate: [RoleGuardService],
    data: {
      allowedRoles: ['driver', 'admin']
    }, loadChildren: () => import('../app/recipe/example.module').then(m => m.Example)},
];

Group directive

<ng-template [cogUserGroup]="['Admin', 'User']">
  <div>Only visible for Admin or User</div>
<ng-template>

i18n

• create translation file ng xi18n --output-path locale
• copy file and add language: src/locale/messages.de.xlf
• for more Angular Docs
• for merging ngx-i18nsupport