feat: Added Auth Status (#1804)

* Added Auth Check

* Added changeset

* Changed to authStatus

* Updated changeset

* Fixed tests

* Updated text based on code review

* Changed pending to configuring

* Changed comments

Co-authored-by: Erik Hanchett <[email protected]>

Author: ErikCH

.changeset/spicy-queens-happen.md

@@ -0,0 +1,7 @@
+---
+'@aws-amplify/ui-angular': minor
+'@aws-amplify/ui': minor
+'@aws-amplify/ui-vue': minor
+---
+
+New authStatus feature, to check if a user is authenticated or not

docs/src/pages/components/authenticator/advanced/current-route.angular.mdx

@@ -26,3 +26,30 @@ You can use `AuthenticatorService` to access `route` string that represents the
   <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.
+
+```html
+<!-- 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>
+```

docs/src/pages/components/authenticator/advanced/current-route.react.mdx

@@ -25,3 +25,29 @@ const App = () => {
   return route === 'authenticated' ? <Home /> : <Authenticator />;
 };
 ```
+
+#### Authentication Check
+
+If you just need to check if you're authenticated or not, you can use the more straightforward `useAuthenticator` hook 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.
+
+```tsx{1,4-7}
+import { useAuthenticator } from '@aws-amplify/ui-react';
+
+const App = () => {
+  const { authStatus } = useAuthenticator(context => [context.authStatus]);
+
+  // Use the value of authStatus to decide which page to render
+ return (
+    <>
+      {authStatus === 'configuring' && 'Loading...'}
+      {authStatus !== 'authenticated' ? <Authenticator /> : <Home />}
+    </>
+  );
+};
+```

docs/src/pages/components/authenticator/advanced/current-route.vue.mdx

@@ -28,3 +28,30 @@ You can use `useAuthenticator` composable to access `route` string that represen
   </template>
 </template>
 ```
+
+#### Authentication Check
+
+If you just need to check if you're authenticated or not, you can use the more straightforward `useAuthenticator` composable 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.
+
+```html{1,5-7}
+<script setup>
+  import { Authenticator, useAuthenticator } from '@aws-amplify/ui-vue';
+  const auth = useAuthenticator();
+</script>
+
+<template>
+  <authenticator></authenticator>
+  <template v-if="auth.authStatus === 'configuring'">
+    <button @click="auth.signOut">Loading...</button>
+  </template>
+  <template v-if="auth.authStatus === 'authenticated'">
+    <button @click="auth.signOut">Sign out</button>
+  </template>
+</template>
+```

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

@@ -1,3 +1,4 @@
+{{ authStatus }}
 <amplify-authenticator
   [formFields]="formFields"
   [services]="services"

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

@@ -1,14 +1,14 @@
 import { Component, OnInit } from '@angular/core';
 import { Amplify, Auth, I18n } from 'aws-amplify';
 import awsExports from './aws-exports';
-import { translations } from '@aws-amplify/ui-angular';
+import { AuthenticatorService, translations } from '@aws-amplify/ui-angular';
 
 @Component({
   selector: 'sign-up-with-email',
   templateUrl: 'sign-up-with-email.component.html',
 })
 export class SignUpWithEmailComponent implements OnInit {
-  constructor() {
+  constructor(public authenticator: AuthenticatorService) {
     Amplify.configure(awsExports);
   }
 
@@ -33,6 +33,10 @@ export class SignUpWithEmailComponent implements OnInit {
     },
   };
 
+  get authStatus() {
+    return this.authenticator.authStatus;
+  }
+
   services = {
     async handleSignUp(formData: Record<string, any>) {
       let { username, password, attributes } = formData;

examples/next/pages/ui/components/authenticator/sign-up-with-email/index.page.tsx

@@ -1,6 +1,11 @@
 import { Amplify, Auth, I18n } from 'aws-amplify';
 
-import { Authenticator, translations } from '@aws-amplify/ui-react';
+import {
+  Authenticator,
+  translations,
+  useAuthenticator,
+  View,
+} from '@aws-amplify/ui-react';
 import '@aws-amplify/ui-react/styles.css';
 
 import awsExports from './aws-exports';
@@ -25,6 +30,7 @@ I18n.putVocabulariesForLanguage('en', {
 });
 
 export default function AuthenticatorWithEmail() {
+  const { authStatus } = useAuthenticator((context) => [context.authStatus]);
   const services = {
     async handleSignUp(formData) {
       let { username, password, attributes } = formData;
@@ -40,12 +46,15 @@ export default function AuthenticatorWithEmail() {
   };
 
   return (
-    <Authenticator
-      formFields={formFields}
-      services={services}
-      initialState="signUp"
-    >
-      {({ signOut }) => <button onClick={signOut}>Sign out</button>}
-    </Authenticator>
+    <>
+      <View>{authStatus}</View>
+      <Authenticator
+        formFields={formFields}
+        services={services}
+        initialState="signUp"
+      >
+        {({ signOut }) => <button onClick={signOut}>Sign out</button>}
+      </Authenticator>
+    </>
   );
 }

examples/vue/src/pages/ui/components/authenticator/sign-up-with-email/index.vue

@@ -1,11 +1,18 @@
 <script setup lang="ts">
 import Amplify, { Auth, I18n } from 'aws-amplify';
-import { Authenticator, translations } from '@aws-amplify/ui-vue';
+import {
+  Authenticator,
+  translations,
+  useAuthenticator,
+} from '@aws-amplify/ui-vue';
+import { toRefs } from 'vue';
 import '@aws-amplify/ui-vue/styles.css';
 import aws_exports from './aws-exports';
 
 Amplify.configure(aws_exports);
 
+const { authStatus } = toRefs(useAuthenticator());
+
 const formFields = {
   confirmSignUp: {
     confirmation_code: {
@@ -39,6 +46,7 @@ const services = {
 </script>
 
 <template>
+  {{ authStatus }}
   <authenticator
     :services="services"
     :form-fields="formFields"

packages/angular/projects/ui-angular/src/lib/services/authenticator.service.ts

@@ -70,6 +70,10 @@ export class AuthenticatorService implements OnDestroy {
     return this._facade?.route;
   }
 
+  public get authStatus() {
+    return this._facade?.authStatus;
+  }
+
   public get user() {
     return this._facade?.user;
   }

packages/e2e/features/ui/components/authenticator/sign-up-with-email.feature

@@ -12,6 +12,17 @@ Feature: Sign Up with Email
     And I don't see "Phone Number" as an input field
 
   @angular @react @vue  
+  Scenario: Sign up with a new email & password and check auth message
+    Given I intercept '{ "headers": { "X-Amz-Target": "AWSCognitoIdentityProviderService.SignUp" } }' with fixture "sign-up-with-email"
+    And I see "unauthenticated"
+    When I type a new "email"
+    And I type my password
+    And I confirm my password
+    And I click the "Create Account" button
+    And I see "authenticated"
+    Then I see "Confirmation Code"
+
+@angular @react @vue  
   Scenario: Sign up with a new email & password and lowercase the email 
     Given I intercept '{ "headers": { "X-Amz-Target": "AWSCognitoIdentityProviderService.SignUp" } }' with fixture "sign-up-with-email"
     When I type a new "email" with value "[email protected]"