@aws-amplify/ui-react-core 2.1.20 → 2.1.22

package/dist/esm/Authenticator/context/AuthenticatorProvider.mjs

@@ -1,9 +1,29 @@
+import { __awaiter } from '../../node_modules/tslib/tslib.es6.mjs';
 import React, { useContext, useMemo, useEffect } from 'react';
 import { useInterpret } from '@xstate/react';
-import { createAuthenticatorMachine, listenToAuthHub } from '@aws-amplify/ui';
+import { Auth } from 'aws-amplify';
+import { createAuthenticatorMachine, listenToAuthHub, defaultAuthHubHandler } from '@aws-amplify/ui';
 import { AuthenticatorContext } from './AuthenticatorContext.mjs';
 
+const createHubHandler = (options) => (data, service) => __awaiter(void 0, void 0, void 0, function* () {
+    yield defaultAuthHubHandler(data, service, options);
+});
 function AuthenticatorProvider({ children, }) {
+    // `authStatus` is exposed by `useAuthenticator` but should not be derived directly from the
+    // state machine as the machine only updates on `Authenticator` initiated events, which
+    // leads to scenarios where the state machine `authStatus` gets "stuck". For exmample,
+    // if a user was to sign in using `Auth.signIn` directly rather than using `Authenticator`
+    const [authStatus, setAuthStatus] = React.useState('configuring');
+    // only run on first render
+    React.useEffect(() => {
+        Auth.currentAuthenticatedUser()
+            .then(() => {
+            setAuthStatus('authenticated');
+        })
+            .catch(() => {
+            setAuthStatus('unauthenticated');
+        });
+    }, []);
     /**
      * Based on use cases, developer might already have added another Provider
      * outside Authenticator. In that case, we sync the two providers by just
@@ -13,10 +33,16 @@ function AuthenticatorProvider({ children, }) {
      */
     const parentProviderVal = useContext(AuthenticatorContext);
     const service = useInterpret(createAuthenticatorMachine);
-    const value = useMemo(() => (!parentProviderVal ? { service } : parentProviderVal), [parentProviderVal, service]);
+    const value = useMemo(() => (!parentProviderVal ? { authStatus, service } : parentProviderVal), [authStatus, parentProviderVal, service]);
     const { service: activeService } = value;
     useEffect(() => {
-        const unsubscribe = listenToAuthHub(activeService);
+        const onSignIn = () => {
+            setAuthStatus('authenticated');
+        };
+        const onSignOut = () => {
+            setAuthStatus('unauthenticated');
+        };
+        const unsubscribe = listenToAuthHub(activeService, createHubHandler({ onSignIn, onSignOut }));
         return unsubscribe;
     }, [activeService]);
     return (React.createElement(AuthenticatorContext.Provider, { value: value }, children));

package/dist/esm/Authenticator/hooks/useAuthenticator/useAuthenticator.mjs

@@ -2,6 +2,7 @@ import { __rest } from '../../../node_modules/tslib/tslib.es6.mjs';
 import React, { useCallback } from 'react';
 import { useSelector } from '@xstate/react';
 import { getServiceFacade } from '@aws-amplify/ui';
+import 'aws-amplify';
 import { AuthenticatorContext } from '../../context/AuthenticatorContext.mjs';
 import { USE_AUTHENTICATOR_ERROR } from './constants.mjs';
 import { getQRFields, getMachineFields, getTotpSecretCodeCallback, getComparator, defaultComparator } from './utils.mjs';
@@ -18,6 +19,9 @@ function useAuthenticator(selector) {
     const { send } = service;
     const xstateSelector = useCallback((state) => (Object.assign({}, getServiceFacade({ send, state }))), [send]);
     const comparator = selector ? getComparator(selector) : defaultComparator;
+    // the purpose of `context.authStatus`is to intentionally override `facade.authStatus`. `facade.authStatus` does
+    // not update on external sign in events (for example when a user is not using the `Authenticator`).
+    const { authStatus } = context;
     const facade = useSelector(service, xstateSelector, comparator);
     const { route, totpSecretCode, unverifiedContactMethods, user } = facade, rest = __rest(facade, ["route", "totpSecretCode", "unverifiedContactMethods", "user"]);
     // do not memoize output. `service.getSnapshot` reference remains stable preventing
@@ -27,7 +31,8 @@ function useAuthenticator(selector) {
     const QRFields = route === 'setupTOTP' ? getQRFields(serviceSnapshot) : null;
     // legacy `formFields` values required until form state is removed from state machine
     const fields = getMachineFields(route, serviceSnapshot, unverifiedContactMethods);
-    return Object.assign(Object.assign({}, rest), { route,
+    return Object.assign(Object.assign({}, rest), { authStatus,
+        route,
         totpSecretCode,
         unverifiedContactMethods,
         user,

package/dist/index.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var react = require('@xstate/react');
-var ui = require('@aws-amplify/ui');
 var awsAmplify = require('aws-amplify');
+var ui = require('@aws-amplify/ui');
 var notifications = require('@aws-amplify/notifications');
 var core = require('@aws-amplify/core');
 
@@ -13,32 +13,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-/**
- * AuthenticatorContext serves static reference to the auth machine service.
- *
- * https://xstate.js.org/docs/recipes/react.html#context-provider
- */
-const AuthenticatorContext = React__default["default"].createContext(null);
-
-function AuthenticatorProvider({ children, }) {
-    /**
-     * Based on use cases, developer might already have added another Provider
-     * outside Authenticator. In that case, we sync the two providers by just
-     * passing the parent value.
-     *
-     * TODO(BREAKING): enforce only one provider in App tree
-     */
-    const parentProviderVal = React.useContext(AuthenticatorContext);
-    const service = react.useInterpret(ui.createAuthenticatorMachine);
-    const value = React.useMemo(() => (!parentProviderVal ? { service } : parentProviderVal), [parentProviderVal, service]);
-    const { service: activeService } = value;
-    React.useEffect(() => {
-        const unsubscribe = ui.listenToAuthHub(activeService);
-        return unsubscribe;
-    }, [activeService]);
-    return (React__default["default"].createElement(AuthenticatorContext.Provider, { value: value }, children));
-}
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -76,6 +50,56 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
+/**
+ * AuthenticatorContext serves static reference to the auth machine service.
+ *
+ * https://xstate.js.org/docs/recipes/react.html#context-provider
+ */
+const AuthenticatorContext = React__default["default"].createContext(null);
+
+const createHubHandler = (options) => (data, service) => __awaiter(void 0, void 0, void 0, function* () {
+    yield ui.defaultAuthHubHandler(data, service, options);
+});
+function AuthenticatorProvider({ children, }) {
+    // `authStatus` is exposed by `useAuthenticator` but should not be derived directly from the
+    // state machine as the machine only updates on `Authenticator` initiated events, which
+    // leads to scenarios where the state machine `authStatus` gets "stuck". For exmample,
+    // if a user was to sign in using `Auth.signIn` directly rather than using `Authenticator`
+    const [authStatus, setAuthStatus] = React__default["default"].useState('configuring');
+    // only run on first render
+    React__default["default"].useEffect(() => {
+        awsAmplify.Auth.currentAuthenticatedUser()
+            .then(() => {
+            setAuthStatus('authenticated');
+        })
+            .catch(() => {
+            setAuthStatus('unauthenticated');
+        });
+    }, []);
+    /**
+     * Based on use cases, developer might already have added another Provider
+     * outside Authenticator. In that case, we sync the two providers by just
+     * passing the parent value.
+     *
+     * TODO(BREAKING): enforce only one provider in App tree
+     */
+    const parentProviderVal = React.useContext(AuthenticatorContext);
+    const service = react.useInterpret(ui.createAuthenticatorMachine);
+    const value = React.useMemo(() => (!parentProviderVal ? { authStatus, service } : parentProviderVal), [authStatus, parentProviderVal, service]);
+    const { service: activeService } = value;
+    React.useEffect(() => {
+        const onSignIn = () => {
+            setAuthStatus('authenticated');
+        };
+        const onSignOut = () => {
+            setAuthStatus('unauthenticated');
+        };
+        const unsubscribe = ui.listenToAuthHub(activeService, createHubHandler({ onSignIn, onSignOut }));
+        return unsubscribe;
+    }, [activeService]);
+    return (React__default["default"].createElement(AuthenticatorContext.Provider, { value: value }, children));
+}
+
 const USE_AUTHENTICATOR_ERROR = '`useAuthenticator` must be used inside an `Authenticator.Provider`.';
 
 const COMPONENT_ROUTE_KEYS = [
@@ -193,6 +217,9 @@ function useAuthenticator(selector) {
     const { send } = service;
     const xstateSelector = React.useCallback((state) => (Object.assign({}, ui.getServiceFacade({ send, state }))), [send]);
     const comparator = selector ? getComparator(selector) : defaultComparator;
+    // the purpose of `context.authStatus`is to intentionally override `facade.authStatus`. `facade.authStatus` does
+    // not update on external sign in events (for example when a user is not using the `Authenticator`).
+    const { authStatus } = context;
     const facade = react.useSelector(service, xstateSelector, comparator);
     const { route, totpSecretCode, unverifiedContactMethods, user } = facade, rest = __rest(facade, ["route", "totpSecretCode", "unverifiedContactMethods", "user"]);
     // do not memoize output. `service.getSnapshot` reference remains stable preventing
@@ -202,7 +229,8 @@ function useAuthenticator(selector) {
     const QRFields = route === 'setupTOTP' ? getQRFields(serviceSnapshot) : null;
     // legacy `formFields` values required until form state is removed from state machine
     const fields = getMachineFields(route, serviceSnapshot, unverifiedContactMethods);
-    return Object.assign(Object.assign({}, rest), { route,
+    return Object.assign(Object.assign({}, rest), { authStatus,
+        route,
         totpSecretCode,
         unverifiedContactMethods,
         user,

package/dist/types/Authenticator/context/AuthenticatorContext.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AuthInterpreter } from '@aws-amplify/ui';
+import { AuthInterpreter, AuthStatus } from '@aws-amplify/ui';
 /**
  * Authenticator React.Context type
  */
@@ -11,5 +11,7 @@ type AuthenticatorContextType = {
  *
  * https://xstate.js.org/docs/recipes/react.html#context-provider
  */
-export declare const AuthenticatorContext: React.Context<AuthenticatorContextType | null>;
+export declare const AuthenticatorContext: React.Context<(AuthenticatorContextType & {
+    authStatus: AuthStatus;
+}) | null>;
 export {};

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@aws-amplify/ui-react-core",
-  "version": "2.1.20",
+  "version": "2.1.22",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "react-native": "dist/index.js",
   "exports": {
     ".": {
       "import": "./dist/esm/index.mjs",
-      "require": "./dist/index.js"
+      "require": "./dist/index.js",
+      "types": "./dist/types/index.d.ts"
     },
     "./package.json": "./package.json"
   },
@@ -30,7 +31,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.6.1",
+    "@aws-amplify/ui": "5.6.3",
     "@xstate/react": "3.0.1",
     "lodash": "4.17.21",
     "xstate": "^4.33.6"