feat(authenticator): add angular support for email mfa

examples/angular/src/app/app-routing.module.ts

@@ -23,6 +23,9 @@ import { SignUpWithPhoneComponent } from 'src/pages/ui/components/authenticator/
 import { SignUpWithUsernameComponent } from 'src/pages/ui/components/authenticator/sign-up-with-username/sign-up-with-username.component';
 import { UseAuthenticatorComponent } from 'src/pages/ui/components/authenticator/useAuthenticator/useAuthenticator.component';
 import { UseAuthenticatorHomeComponent } from 'src/pages/ui/components/authenticator/useAuthenticator/home/useAuthenticatorHome.component';
+import { SignInWithEmailMfaComponent } from 'src/pages/ui/components/authenticator/sign-in-with-email-mfa/sign-in-with-email-mfa.component';
+import { SignInWithEmailMfaSelectionComponent } from 'src/pages/ui/components/authenticator/sign-in-with-email-mfa-selection/sign-in-with-email-mfa-selection.component';
+import { SignInWithEmailMfaSetupSelectionComponent } from 'src/pages/ui/components/authenticator/sign-in-with-email-mfa-setup-selection/sign-in-with-email-mfa-setup-selection.component';
 
 const routes: Routes = [
   {
@@ -117,6 +120,18 @@ const routes: Routes = [
     path: 'ui/components/authenticator/useAuthenticator/home',
     component: UseAuthenticatorHomeComponent,
   },
+  {
+    path: 'ui/components/authenticator/sign-in-with-email-mfa',
+    component: SignInWithEmailMfaComponent,
+  },
+  {
+    path: 'ui/components/authenticator/sign-in-with-email-mfa-selection',
+    component: SignInWithEmailMfaSelectionComponent,
+  },
+  {
+    path: 'ui/components/authenticator/sign-in-with-email-mfa-setup-selection',
+    component: SignInWithEmailMfaSetupSelectionComponent,
+  },
 ];
 
 @NgModule({

examples/angular/src/app/app.module.ts

@@ -28,6 +28,9 @@ import { SignUpWithPhoneComponent } from 'src/pages/ui/components/authenticator/
 import { SignUpWithUsernameComponent } from 'src/pages/ui/components/authenticator/sign-up-with-username/sign-up-with-username.component';
 import { UseAuthenticatorComponent } from 'src/pages/ui/components/authenticator/useAuthenticator/useAuthenticator.component';
 import { UseAuthenticatorHomeComponent } from 'src/pages/ui/components/authenticator/useAuthenticator/home/useAuthenticatorHome.component';
+import { SignInWithEmailMfaComponent } from 'src/pages/ui/components/authenticator/sign-in-with-email-mfa/sign-in-with-email-mfa.component';
+import { SignInWithEmailMfaSelectionComponent } from 'src/pages/ui/components/authenticator/sign-in-with-email-mfa-selection/sign-in-with-email-mfa-selection.component';
+import { SignInWithEmailMfaSetupSelectionComponent } from 'src/pages/ui/components/authenticator/sign-in-with-email-mfa-setup-selection/sign-in-with-email-mfa-setup-selection.component';
 
 @NgModule({
   declarations: [
@@ -55,6 +58,9 @@ import { UseAuthenticatorHomeComponent } from 'src/pages/ui/components/authentic
     SignUpWithUsernameComponent,
     UseAuthenticatorComponent,
     UseAuthenticatorHomeComponent,
+    SignInWithEmailMfaComponent,
+    SignInWithEmailMfaSelectionComponent,
+    SignInWithEmailMfaSetupSelectionComponent,
   ],
   imports: [
     BrowserModule,

examples/angular/src/pages/ui/components/authenticator/sign-in-with-email-mfa-selection/aws-exports.js

@@ -0,0 +1,2 @@
+import awsExports from '@environments/auth/gen2/auth-with-email-mfa/amplify_outputs.json';
+export default awsExports;

examples/angular/src/pages/ui/components/authenticator/sign-in-with-email-mfa-selection/sign-in-with-email-mfa-selection.component.html

@@ -0,0 +1,10 @@
+<amplify-authenticator [services]="services">
+    <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>

examples/angular/src/pages/ui/components/authenticator/sign-in-with-email-mfa-selection/sign-in-with-email-mfa-selection.component.ts

@@ -0,0 +1,60 @@
+import { Component, OnInit } from '@angular/core';
+import { Amplify } from 'aws-amplify';
+import { AuthenticatorComponent } from '@aws-amplify/ui-angular';
+
+import awsExports from './aws-exports';
+
+@Component({
+  selector: 'app-sign-in-with-email-mfa-selection',
+  templateUrl: './sign-in-with-email-mfa-selection.component.html',
+})
+export class SignInWithEmailMfaSelectionComponent implements OnInit {
+  public services: AuthenticatorComponent['services'] = {
+    handleSignIn: async () => {
+      return {
+        isSignedIn: false,
+        nextStep: {
+          signInStep: 'CONTINUE_SIGN_IN_WITH_MFA_SELECTION',
+          allowedMFATypes: ['EMAIL', 'TOTP'],
+        },
+      };
+    },
+    handleConfirmSignIn: async ({ challengeResponse }) => {
+      if (challengeResponse === 'EMAIL') {
+        return {
+          isSignedIn: false,
+          nextStep: {
+            signInStep: 'CONFIRM_SIGN_IN_WITH_EMAIL_CODE',
+            codeDeliveryDetails: {
+              destination: 'a***@e***.com',
+              deliveryMedium: 'EMAIL',
+              attributeName: 'email',
+            },
+          },
+        };
+      }
+
+      if (challengeResponse === '123456') {
+        return {
+          isSignedIn: true,
+          nextStep: {
+            signInStep: 'DONE',
+          },
+        };
+      }
+      throw new Error('Invalid code or auth state for the user.');
+    },
+    getCurrentUser: async () => {
+      return {
+        userId: '******************',
+        username: 'james',
+      };
+    },
+  };
+
+  constructor() {
+    Amplify.configure(awsExports);
+  }
+
+  ngOnInit(): void {}
+}

examples/angular/src/pages/ui/components/authenticator/sign-in-with-email-mfa-setup-selection/aws-exports.js

@@ -0,0 +1,2 @@
+import awsExports from '@environments/auth/gen2/auth-with-email-mfa/amplify_outputs.json';
+export default awsExports;

examples/angular/src/pages/ui/components/authenticator/sign-in-with-email-mfa-setup-selection/sign-in-with-email-mfa-setup-selection.component.html

@@ -0,0 +1,10 @@
+<amplify-authenticator [services]="services">
+    <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>

examples/angular/src/pages/ui/components/authenticator/sign-in-with-email-mfa-setup-selection/sign-in-with-email-mfa-setup-selection.component.ts

@@ -0,0 +1,67 @@
+import { Component, OnInit } from '@angular/core';
+import { Amplify } from 'aws-amplify';
+import { AuthenticatorComponent } from '@aws-amplify/ui-angular';
+
+import awsExports from './aws-exports';
+
+@Component({
+  selector: 'app-sign-in-with-email-mfa-setup-selection',
+  templateUrl: './sign-in-with-email-mfa-setup-selection.component.html',
+})
+export class SignInWithEmailMfaSetupSelectionComponent implements OnInit {
+  public services: AuthenticatorComponent['services'] = {
+    handleSignIn: async () => {
+      return {
+        isSignedIn: false,
+        nextStep: {
+          signInStep: 'CONTINUE_SIGN_IN_WITH_MFA_SETUP_SELECTION',
+          allowedMFATypes: ['EMAIL', 'TOTP'],
+        },
+      };
+    },
+    handleConfirmSignIn: async ({ challengeResponse }) => {
+      if (challengeResponse === 'EMAIL') {
+        return {
+          isSignedIn: false,
+          nextStep: {
+            signInStep: 'CONTINUE_SIGN_IN_WITH_EMAIL_SETUP',
+          },
+        };
+      }
+      if (challengeResponse.includes('@example.com')) {
+        return {
+          isSignedIn: false,
+          nextStep: {
+            signInStep: 'CONFIRM_SIGN_IN_WITH_EMAIL_CODE',
+            codeDeliveryDetails: {
+              destination: 'a***@e***.com',
+              deliveryMedium: 'EMAIL',
+              attributeName: 'email',
+            },
+          },
+        };
+      }
+      if (challengeResponse === '123456') {
+        return {
+          isSignedIn: true,
+          nextStep: {
+            signInStep: 'DONE',
+          },
+        };
+      }
+      throw new Error('Invalid code or auth state for the user.');
+    },
+    getCurrentUser: async () => {
+      return {
+        userId: '******************',
+        username: 'james',
+      };
+    },
+  };
+
+  constructor() {
+    Amplify.configure(awsExports);
+  }
+
+  ngOnInit(): void {}
+}

examples/angular/src/pages/ui/components/authenticator/sign-in-with-email-mfa/aws-exports.js

@@ -0,0 +1,2 @@
+import awsExports from '@environments/auth/gen2/auth-with-email-mfa/amplify_outputs.json';
+export default awsExports;

examples/angular/src/pages/ui/components/authenticator/sign-in-with-email-mfa/sign-in-with-email-mfa.component.html

@@ -0,0 +1,10 @@
+<amplify-authenticator [services]="services">
+    <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>

examples/angular/src/pages/ui/components/authenticator/sign-in-with-email-mfa/sign-in-with-email-mfa.component.ts

@@ -0,0 +1,48 @@
+import { Component } from '@angular/core';
+import { Amplify } from 'aws-amplify';
+import { AuthenticatorComponent } from '@aws-amplify/ui-angular';
+
+import awsExports from './aws-exports';
+
+@Component({
+  selector: 'app-sign-in-with-email-mfa',
+  templateUrl: './sign-in-with-email-mfa.component.html',
+})
+export class SignInWithEmailMfaComponent {
+  public services: AuthenticatorComponent['services'] = {
+    handleSignIn: async () => {
+      return {
+        isSignedIn: false,
+        nextStep: {
+          signInStep: 'CONFIRM_SIGN_IN_WITH_EMAIL_CODE',
+          codeDeliveryDetails: {
+            destination: 'a***@e***.com',
+            deliveryMedium: 'EMAIL',
+            attributeName: 'email',
+          },
+        },
+      };
+    },
+    handleConfirmSignIn: async ({ challengeResponse }) => {
+      if (challengeResponse === '123456') {
+        return {
+          isSignedIn: true,
+          nextStep: {
+            signInStep: 'DONE',
+          },
+        };
+      }
+      throw new Error('Invalid code or auth state for the user.');
+    },
+    getCurrentUser: async () => {
+      return {
+        userId: '******************',
+        username: 'james',
+      };
+    },
+  };
+
+  constructor() {
+    Amplify.configure(awsExports);
+  }
+}

packages/angular/projects/ui-angular/src/lib/components/authenticator/authenticator.module.ts

@@ -17,6 +17,8 @@ import { ForceNewPasswordComponent } from './components/force-new-password/force
 import { ForceNewPasswordFormFieldsComponent } from './components/force-new-password/force-new-password-form-fields/force-new-password-form-fields.component';
 import { FormFieldComponent } from './components/form-field/form-field.component';
 import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component';
+import { SelectMfaTypeComponent } from './components/select-mfa-type/select-mfa-type.component';
+import { SetupEmailComponent } from './components/setup-email/setup-email.component';
 import { SetupTotpComponent } from './components/setup-totp/setup-totp.component';
 import { SignInComponent } from './components/sign-in/sign-in.component';
 import { SignUpComponent } from './components/sign-up/sign-up.component';
@@ -59,6 +61,8 @@ import { AmplifySlotDirective } from '../../utilities/amplify-slot/amplify-slot.
     PhoneNumberFieldComponent,
     ForgotPasswordComponent,
     SelectComponent,
+    SelectMfaTypeComponent,
+    SetupEmailComponent,
     SetupTotpComponent,
     SignInComponent,
     SignUpComponent,

packages/angular/projects/ui-angular/src/lib/components/authenticator/components/authenticator/authenticator.component.html

@@ -4,7 +4,10 @@
   *ngIf="hasRouteComponent()"
 >
   <div data-amplify-container>
-    <amplify-slot name="header" [context]="context"></amplify-slot>
+    <amplify-slot
+      name="header"
+      [context]="context"
+    ></amplify-slot>
     <div
       data-amplify-router
       [attr.data-amplify-router-content]="hasTabs() ? undefined : ''"
@@ -122,9 +125,30 @@
       >
         <amplify-confirm-verify-user></amplify-confirm-verify-user>
       </amplify-slot>
+
+      <!-- selectMfaType content -->
+      <amplify-slot
+        name="select-mfa-type"
+        [context]="context"
+        *ngIf="route === 'selectMfaType'"
+      >
+        <amplify-select-mfa-type></amplify-select-mfa-type>
+      </amplify-slot>
+
+      <!-- setupEmail content -->
+      <amplify-slot
+        name="setup-email"
+        [context]="context"
+        *ngIf="route === 'setupEmail'"
+      >
+        <amplify-setup-email></amplify-setup-email>
+      </amplify-slot>
     </div>
 
-    <amplify-slot name="footer" [context]="context"></amplify-slot>
+    <amplify-slot
+      name="footer"
+      [context]="context"
+    ></amplify-slot>
   </div>
 </div>
 
@@ -135,4 +159,4 @@
   *ngIf="route === 'authenticated'"
 >
   <ng-content></ng-content>
-</amplify-slot>
+</amplify-slot>

packages/angular/projects/ui-angular/src/lib/components/authenticator/components/form-field/form-field.component.html

@@ -41,7 +41,11 @@
     [describedBy]="ariaDescribedBy"
   ></amplify-text-field>
 
-  <div data-amplify-sign-up-errors *ngIf="hasError()" [id]="errorId">
+  <div
+    data-amplify-sign-up-errors
+    *ngIf="hasError()"
+    [id]="errorId"
+  >
     <div
       class="amplify-text amplify-text--error"
       data-variation="error"
@@ -50,4 +54,4 @@
       {{ translate(error) }}
     </div>
   </div>
-</div>
+</div>