@bagubagu/authenticator v0.2.4

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

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

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