ngx-cognito
v11.0.6
Published
A library that provides Angular Material components and services for amplify.
Downloads
61
Readme
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 dependencyAmplify:
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:
```typescript
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:
| Parameter | Default | Options | Effect | |---------------------|---------|-------------|----------------------------------------------------------| | domain | '' | string | for the qr | | userNameLoginAllowed | false | boolean | when username is required | | passwordValidator | /^(?=.[A-Z])(?=.[a-z])(?=.*[0-9])(?=.{8,})/ | RegExp | use for password validation | | resetCodeValidator | /^[0-9]{6}$/ | RegExp | use for password reset code validation | | onlyAdminCreateUser | false | boolean | hide createAccount link | | customRouting | false | boolean | application handles login events routing (/, ../confirm, ../setup-mfa, ../confirm-login, ../new-password) | | ignoreHttpsInterceptorUrls | [] | string[] | add urls you do not want to patch with id token eg. ['https://www.example.de'] | | customRedirectAfterLoginUrl | / | string | redirect path after login |
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