@bagubagu/authenticator

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'
      }
    } 
  }