fix(examples,e2e): Add examples and tests for #1580

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

@@ -19,6 +19,7 @@ import { SignUpWithEmailLambdaComponent } from 'src/pages/ui/components/authenti
 import { SignUpWithPhoneComponent } from 'src/pages/ui/components/authenticator/sign-up-with-phone/sign-up-with-phone.component';
 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';
 
 const routes: Routes = [
   {
@@ -101,6 +102,10 @@ const routes: Routes = [
     path: 'ui/components/authenticator/useAuthenticator',
     component: UseAuthenticatorComponent,
   },
+  {
+    path: 'ui/components/authenticator/useAuthenticator/home',
+    component: UseAuthenticatorHomeComponent,
+  },
 ];
 
 @NgModule({

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

@@ -25,6 +25,7 @@ import { SignUpWithEmailLambdaComponent } from 'src/pages/ui/components/authenti
 import { SignUpWithPhoneComponent } from 'src/pages/ui/components/authenticator/sign-up-with-phone/sign-up-with-phone.component';
 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';
 
 @NgModule({
   declarations: [
@@ -49,6 +50,7 @@ import { UseAuthenticatorComponent } from 'src/pages/ui/components/authenticator
     SignUpWithPhoneComponent,
     SignUpWithUsernameComponent,
     UseAuthenticatorComponent,
+    UseAuthenticatorHomeComponent,
   ],
   imports: [
     BrowserModule,

examples/angular/src/pages/ui/components/authenticator/useAuthenticator/home/useAuthenticatorHome.component.html

@@ -0,0 +1,2 @@
+<div>Hello, {{ authenticator.user?.username }}!</div>
+<button (click)="handleClick($event)">Sign Out</button>

examples/angular/src/pages/ui/components/authenticator/useAuthenticator/home/useAuthenticatorHome.component.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Amplify } from 'aws-amplify';
+import { AuthenticatorService } from '@aws-amplify/ui-angular';
+
+import awsExports from '../aws-exports';
+
+@Component({
+  selector: 'use-authenticator',
+  templateUrl: 'useAuthenticatorHome.component.html',
+})
+export class UseAuthenticatorHomeComponent {
+  constructor(
+    public authenticator: AuthenticatorService,
+    private router: Router,
+    private route: ActivatedRoute
+  ) {
+    Amplify.configure(awsExports);
+  }
+
+  public handleClick(event: Event) {
+    event.preventDefault();
+    this.authenticator.signOut();
+    this.router.navigate(['../'], { relativeTo: this.route });
+  }
+}

examples/angular/src/pages/ui/components/authenticator/useAuthenticator/useAuthenticator.component.html

@@ -1,8 +1,5 @@
-<ng-container *ngIf="authenticator.route === 'authenticated'">
-  <h2>Welcome, {{ authenticator.user.username }}!</h2>
-  <button (click)="authenticator.signOut()">Sign Out</button>
-</ng-container>
-
-<ng-container *ngIf="authenticator.route !== 'authenticated'">
-  <amplify-authenticator></amplify-authenticator>
-</ng-container>
+<amplify-authenticator>
+  <ng-template amplifySlot="authenticated">
+    <button (click)="navigateHome($event)">Navigate to Home</button>
+  </ng-template>
+</amplify-authenticator>

examples/angular/src/pages/ui/components/authenticator/useAuthenticator/useAuthenticator.component.ts

@@ -1,15 +1,25 @@
-import { Component } from '@angular/core';
-import { Amplify } from 'aws-amplify';
+import { Component, OnInit } from '@angular/core';
+import { Amplify, Auth } from 'aws-amplify';
 import { AuthenticatorService } from '@aws-amplify/ui-angular';
 
 import awsExports from './aws-exports';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'use-authenticator',
   templateUrl: 'useAuthenticator.component.html',
 })
 export class UseAuthenticatorComponent {
-  constructor(public authenticator: AuthenticatorService) {
+  constructor(
+    public authenticator: AuthenticatorService,
+    private router: Router,
+    private route: ActivatedRoute
+  ) {
     Amplify.configure(awsExports);
   }
+
+  public navigateHome(event: Event) {
+    event.preventDefault();
+    this.router.navigate(['home'], { relativeTo: this.route });
+  }
 }

examples/next/pages/_app.page.tsx

@@ -3,9 +3,18 @@
 // https://nextjs.org/docs/advanced-features/custom-app
 import App from 'next/app';
 import { Amplify } from 'aws-amplify';
+import { Authenticator, AmplifyProvider } from '@aws-amplify/ui-react';
 
 if (typeof window !== 'undefined') {
   window['Amplify'] = Amplify;
 }
 
-export default App;
+export default function MyApp(props) {
+  return (
+    <AmplifyProvider>
+      <Authenticator.Provider>
+        <App {...props} />
+      </Authenticator.Provider>
+    </AmplifyProvider>
+  );
+}

examples/next/pages/ui/components/authenticator/useAuthenticator/home/index.page.tsx

@@ -0,0 +1,24 @@
+import { Amplify } from 'aws-amplify';
+import { useAuthenticator } from '@aws-amplify/ui-react';
+import * as React from 'react';
+import awsExports from '../aws-exports';
+import router from 'next/router';
+
+Amplify.configure(awsExports);
+
+export default function App() {
+  const { user, signOut } = useAuthenticator();
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    signOut();
+    router.push('../useAuthenticator');
+  };
+
+  return (
+    <>
+      <div>Hello, {user?.username}!</div>
+      <button onClick={handleClick}>Sign Out</button>
+    </>
+  );
+}

examples/next/pages/ui/components/authenticator/useAuthenticator/index.page.tsx

@@ -1,34 +1,19 @@
-import { Amplify } from 'aws-amplify';
+import router from 'next/router';
 
-import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react';
+import { Amplify } from 'aws-amplify';
 import '@aws-amplify/ui-react/styles.css';
 
 import awsExports from './aws-exports';
+import { Authenticator } from '@aws-amplify/ui-react';
 
 Amplify.configure(awsExports);
 
-const Home = () => {
-  const { user, signOut } = useAuthenticator((context) => [context.user]);
-
-  return (
-    <>
-      <h2>Welcome, {user.username}!</h2>
-      <button onClick={signOut}>Sign Out</button>
-    </>
-  );
-};
-
-const Login = () => <Authenticator />;
-
-function App() {
-  const { route } = useAuthenticator((context) => [context.route]);
-  return route === 'authenticated' ? <Home /> : <Login />;
-}
+export default function App() {
+  const navigateHome = () => router.push('useAuthenticator/home');
 
-export default function AppWithProvider() {
   return (
-    <Authenticator.Provider>
-      <App></App>
-    </Authenticator.Provider>
+    <Authenticator>
+      {() => <button onClick={navigateHome}>Navigate to Home</button>}
+    </Authenticator>
   );
 }

examples/vue/src/pages/ui/components/authenticator/useAuthenticator/home/index.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { toRefs } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { Amplify } from 'aws-amplify';
+import { Authenticator, useAuthenticator } from '@aws-amplify/ui-vue';
+import '@aws-amplify/ui-vue/styles.css';
+import aws_exports from '../aws-exports';
+
+Amplify.configure(aws_exports);
+
+const router = useRouter();
+const { user, signOut } = toRefs(useAuthenticator());
+const handleClick = (event: Event) => {
+  event.preventDefault();
+  signOut.value();
+  router.push('../useAuthenticator');
+};
+</script>
+
+<template>
+  <!-- TODO: this authenticator shouldn't be needed -->
+  <authenticator></authenticator>
+  <div>Hello, {{ user?.username }}!</div>
+  <button @click="handleClick">Sign Out</button>
+</template>

examples/vue/src/pages/ui/components/authenticator/useAuthenticator/index.vue

@@ -7,14 +7,16 @@ import aws_exports from './aws-exports';
 
 Amplify.configure(aws_exports);
 
-const { route, user, signOut } = toRefs(useAuthenticator());
+const { route } = toRefs(useAuthenticator());
 const props = useAuthenticator();
 </script>
 
 <template>
-  <authenticator> </authenticator>
-  <template v-if="route === 'authenticated'">
-    <h1>Hello {{ user?.username }}!</h1>
-    <button @click="signOut">Sign out</button>
-  </template>
+  <authenticator>
+    <template v-slot>
+      <router-link to="useAuthenticator/home">
+        <button>Navigate to Home</button>
+      </router-link>
+    </template>
+  </authenticator>
 </template>

packages/e2e/cypress/integration/ui/components/authenticator/useAuthenticator/useAuthenticator.ts

@@ -0,0 +1,7 @@
+import { Then, When } from 'cypress-cucumber-preprocessor/steps';
+
+Then('I see a valid greetings message', () => {
+  cy.findByRole('document')
+    .contains(new RegExp('^Hello, .+!$', 'i'))
+    .should('exist');
+});

packages/e2e/features/ui/components/authenticator/useAuthenticator.feature

@@ -19,9 +19,11 @@ Feature: Headless Usage
     When I type my "username" with status "CONFIRMED"
     And I type my password
     And I click the "Sign in" button
-    Then I see "Sign out"
-    When I reload the page
-    Then I see "Sign out"
-    And I click the "Sign out" button
-    Then I see "Sign in"
+    Then I see "Navigate to Home"
+    And I click the "Navigate to Home" button
+    Then I see a valid greetings message
+    And I reload the page
+    Then I see a valid greetings message
+    And I click the "Sign Out" button
+    Then I see "Sign In"