Authenticator

Bagubagu AWS Amplify Authenticator

This library was generated with Angular CLI version 8.0.1.

Installation

Using npm:

`npm i -save @bagubagu/authenticator`

Using yarn

`yarn add @bagubagu/authenticator`

Skip these instruction if you already installed

1. Install AWS Amplify Angular, see instructions here.

2. Install Angular Material, see and follow instructions here. Don't forget to include angular theme to style.scss !

3. Install Angular Flex Layout, see instructions here.

4. Install @bagubagu/utils

npm install --save @bagubagu/utils or yarn add @bagubagu/utils

Usage

1. In app.module.ts

  import { AuthenticatorModule } from '@bagubagu/authenticator';

  @NgModule({
    declarations: [],
    imports: [AuthenticatorModule],
    exports: []
  })

  export class AppModule {}

2. In component (template html)

  <bag-authenticator></bag-authenticator>

Configuration

| Attribute | Type | Description | Default | Required | | --------------------- | -------- | ----------------------------------------- | ---------- | -------- | | redirectSuccessSignIn | string | path for redirect if sign in success | | yes | | signUp | boolean | 'true' if want to use sign up methods | false | no | | signInMethods | string[] | Option field signIn methods | ['email'] | no | | signUpMethods | string[] | Option field signUp methods | ['email'] | no | | cognitoOptionSignIn | string | option for aws cognito end user sign in | 'username' | no | | forgotPassword | boolean | displaying forgot password button | false | no | | confirmSignUp | boolean | displaying confirm sign up button | false | no | | header | string | header for displaying at top of component | | no |

example:

In app.component.html :

  <bag-authenticator
    [redirectSuccessSignIn]="authenticatorConfig.redirectSuccessSignIn"
    [signUp]="authenticatorConfig.signUp"
    [signUpMethods]="authenticatorConfig.signUpMethods"
    [header]="authenticatorConfig.header"
  ></bag-authenticator>

In app.component.ts :

  import { Component } from '@angular/core';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })

  export class AppComponent {
    authenticatorConfig: any = {
      redirectSuccessSignIn: '/home',
      signUp: true,
      signUpMethods: ['email', 'phoneNumber'],
      header: 'Admin Panel'
    } 
  }

Customizing component style

| Attrubute | Page | | ------------------------- | ------------------------------| | authStyle | general | | signInStyle | Sign In Component | | signUpStyle | Sign Up Component | | otpStyle | OTP Component | | forgotPasswordStyle | Forgot Password Component | | confirmSignUpStyle | Confirm Sign Up Component | | requiredNewPasswordStyle | RequiredNewPassword Component |

In app.component.html :

  <bag-authenticator
    [redirectSuccessSignIn]="authenticatorConfig.redirectSuccessSignIn"
    [signUp]="authenticatorConfig.signUp"
    [signUpMethods]="authenticatorConfig.signUpMethods"
    [header]="authenticatorConfig.header"
    [authStyle]="authenticatorConfig.authStyle"
  ></bag-authenticator>

In app.component.ts :

  import { Component } from '@angular/core';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })

  export class AppComponent {
    authenticatorConfig: any = {
      redirectSuccessSignIn: '/home',
      signUp: true,
      signUpMethods: ['email', 'phoneNumber'],
      header: 'Admin Panel',
      authStyle: {
        'background-color': 'skyblue'
      }
    } 
  }