Amplify UI

Authenticator

Authenticator component adds complete authentication flows to your application with minimal boilerplate.

@aws-amplify/ui-angular v4
The @aws-amplify/ui-angular package is currently on version 5. Working with@aws-amplify/ui-angular version 4 or earlier? See our migration guide.

The Authenticator component adds complete authentication flows to your application with minimal boilerplate.

Quick start

Setup with Amplify Gen 2 backend

To get up and running with the Authenticator, follow the Amplify Gen2 quickstart guide.

Setup with Amplify Gen 1 backend

To setup Amplify using the Gen1 CLI, follow the steps below:

Step 1. Configure backend

The Authenticator works seamlessly with the Amplify CLI to automatically work with your backend.

First, update @aws-amplify/cli with npm or yarn if you're using a version before 6.4.0:

npm install -g @aws-amplify/cli@latest
yarn global add @aws-amplify/cli@latest

Now that you have the Amplify CLI installed, you can set up your Amplify project by running amplify init in your project's root directory. Then run amplify add auth and follow the prompts to add authentication to your backend configuration.

If you have an existing backend, run amplify pull to sync your aws-exports.js with your cloud backend.

You should now have an aws-exports.js file in your src/ directory with your latest backend configuration.

Step 2. Install dependencies

npm install @aws-amplify/ui-angular aws-amplify
yarn add @aws-amplify/ui-angular aws-amplify

Step 3. Add global and process shim

Angular does not include shims for global or process. Follow the instructions below to resolve global or process reference errors.

First, create src/polyfills.ts and add the following:

(window as any).global = window;
(window as any).process = {
  env: { DEBUG: undefined },
};

Then, open your angular.json file, and add src/polyfills.ts to polyfills array(s) in your angular.json. These arrays are located in projects.<project-name>.architect.<task-name>.options.

"polyfills": [
  "zone.js",
"src/polyfills.ts"
],

And finally, make sure to add src/polyfills to files in your tsconfig:

{
  "files": [
    "src/main.ts",
"src/polyfills.ts"
], }

Add the following to your src/polyfills.ts:

(window as any).global = window;
(window as any).process = {
  env: { DEBUG: undefined },
};

Step 4. Add declaration file for aws-exports

If you run into TypeScript errors importing aws-exports.js, create aws-exports.d.ts file in the directory aws-exports.js is in and add the following content:

declare const awsmobile: Record<string, any>
export default awsmobile;

Step 5. Add the Authenticator

The quickest way to get started is by wrapping your application with the Authenticator component. Once an end-user has created an account & signed in, the underlying component is rendered with access to the user.

Register and configure Amplify inside app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Amplify } from 'aws-amplify';
import { AmplifyAuthenticatorModule } from '@aws-amplify/ui-angular';
import { AppComponent } from './app.component';
import awsconfig from '../aws-exports';
Amplify.configure(awsconfig);
@NgModule({ declarations: [AppComponent],
imports: [BrowserModule, AmplifyAuthenticatorModule],
providers: [], bootstrap: [AppComponent], }) export class AppModule {}

Open your angular.json file, and add node_modules/@aws-amplify/ui-angular/theme.css to styles array in your angular.json. This array is located in projects.<project-name>.architect.build.options.

"styles": [
"node_modules/@aws-amplify/ui-angular/theme.css",
"src/styles.css" ],

Wrap your template with amplify-authenticator inside app.component.html

<amplify-authenticator>
  <ng-template
    amplifySlot="authenticated"
    let-user="user"
    let-signOut="signOut"
  >
    <h1>Welcome {{ user.username }}!</h1>
    <button (click)="signOut()">Sign Out</button>
  </ng-template>
</amplify-authenticator>

Only if you are using Angular 17, import the AmplifyAuthenticatorModule in app.component.ts

import { Component } from '@angular/core';
import { Amplify } from 'aws-amplify';
import { AmplifyAuthenticatorModule, AuthenticatorService } from '@aws-amplify/ui-angular';
import awsExports from './aws-exports'; @Component({
standalone: true,
imports: [CommonModule, RouterOutlet, AmplifyAuthenticatorModule],
selector: 'app-root', templateUrl: 'app.component.html', }) export class UseAuthenticatorComponent { constructor(public authenticator: AuthenticatorService) { Amplify.configure(awsExports); } }
Angular Authenticator v1

Looking for a previous version of Authenticator? Checkout the Authenticator v1 documentation.

Please see troubleshooting if you have trouble building or running your application with Authenticator.

Next steps

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.