Advanced Usage

Authenticator Service

@aws-amplify/ui-angular ships with AuthenticatorService Angular service that can be used to access, modify, and update Authenticator's auth state. To use them, first inject the service into your component:

app.component.ts

import { Component } from '@angular/core';
import { Amplify } from 'aws-amplify';
import { AuthenticatorService } from '@aws-amplify/ui-angular';

// import config from './aws-exports'; // Amplify Gen 1 config
import config from './amplify_outputs.json'

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class UseAuthenticatorComponent {
  constructor(public authenticator: AuthenticatorService) {
    Amplify.configure(config);
  }
}

Then you can use the authenticator value in your component or template:

app.component.html

<button (click)="authenticator.signOut()">Sign Out</button>

Access Auth State

You can use AuthenticatorService to access route string that represents the current authState. They can be one of:

• idle
• setup
• signIn
• signUp
• confirmSignIn
• confirmSignUp
• selectMfaType
• setupEmail
• setupTotp
• forceNewPassword
• forgotPassword
• confirmResetPassword
• verifyUser
• confirmVerifyUser
• signOut
• authenticated

<!-- Only render this if there's an authenticated user -->
<ng-container *ngIf="authenticator.route === 'authenticated'">
  Welcome back!
</ng-container>

<!-- Render sign-in screen otherwise with authenticator -->
<ng-container *ngIf="authenticator.route !== 'authenticated'">
  <amplify-authenticator></amplify-authenticator>
</ng-container>

Authentication Check

If you just need to check if you're authenticated or not, you can use the more straightforward AuthenticatorService to access the authStatus string. The authStatus string can represent the following states:

• configuring
• authenticated
• unauthenticated

The configuring state only occurs when the Authenticator is first loading.

<!-- Render loading if authStatus is still configuring  -->
<ng-container *ngIf="authenticator.authStatus === 'configuring'">
  Loading...
</ng-container>

<!-- Only render this if there's an authenticated user -->
<ng-container *ngIf="authenticator.authStatus === 'authenticated'">
  Welcome back!
</ng-container>

<!-- Render sign-in screen otherwise with authenticator -->
<ng-container *ngIf="authenticator.authStatus !== 'authenticated'">
  <amplify-authenticator></amplify-authenticator>
</ng-container>

Access Authenticated User

You can use AuthenticatorService to access current signed in user. If no user is authenticated, it'll return undefined.

<ng-container *ngIf="!!authenticator.user">
  <h2>Welcome, {{ authenticator.user.username }}!</h2>
</ng-container>

Trigger Transitions

You can use AuthenticatorService to access functions that lets you trigger transitions to the authenticator. Please see Full API to see all supported transition functions. Any invalid transitions (e.g. signUp directly to authenticated) will be ignored.

<ng-container *ngIf="!!authenticator.user">
  <h2>Welcome, {{ authenticator.user.username }}!</h2>
  <button (click)="authenticator.signOut()">Sign Out</button>
</ng-container>

Example

Here's an example that uses the toForgotPassword trigger transition, to create a custom button. Note that example uses the Footer "slot" override.

use-authenticator.component.ts

import { Component } from '@angular/core';
import { Amplify } from 'aws-amplify';
import { AuthenticatorService } from '@aws-amplify/ui-angular';

import awsExports from './aws-exports';

@Component({
  selector: 'use-authenticator',
  templateUrl: 'useAuthenticator.component.html',
})
export class UseAuthenticatorComponent {
  constructor(public authenticator: AuthenticatorService) {
    Amplify.configure(awsExports);
  }
}

use-authenticator.component.html

<amplify-authenticator>
  <ng-template amplifySlot="sign-in-footer">
    <div style="text-align: center">
      <button
        (click)="authenticator.toForgotPassword()"
        class="amplify-button amplify-field-group__control"
        data-fullwidth="false"
        data-size="small"
        type="button"
        style="font-weight: normal"
      >
        Reset Password
      </button>
    </div>
  </ng-template>
  <ng-template
    amplifySlot="authenticated"
    let-user="user"
    let-signOut="signOut"
  >
    <h2>Welcome, {{ user.username }}!</h2>
    <button (click)="signOut()">Sign Out</button>
  </ng-template>
</amplify-authenticator>

Full API

Below is the full list of context that AuthenticatorService provides.