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
here.
1. Install AWS Amplify Angular, see instructionshere. Don't forget to include angular theme to style.scss !
2. Install Angular Material, see and follow instructionshere.
3. Install Angular Flex Layout, see instructions4. Install @bagubagu/utils
npm install --save @bagubagu/utils
oryarn 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'
}
}
}