Authenticator

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

Quick start

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:

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

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.

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

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

{
  "files": [
    "src/main.ts",
    "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);
  }
}

Next steps