@aws-amplify/ui-react-core 2.1.32 → 3.0.0

package/dist/index.js

@@ -4,8 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var react = require('@xstate/react');
-var awsAmplify = require('aws-amplify');
+var auth = require('aws-amplify/auth');
 var ui = require('@aws-amplify/ui');
+var reactHookForm = require('react-hook-form');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -30,43 +31,6 @@ function _interopNamespace(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
 /**
  * AuthenticatorContext serves static reference to the auth machine service.
  *
@@ -74,9 +38,9 @@ function __awaiter(thisArg, _arguments, P, generator) {
  */
 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);
-});
+const createHubHandler = (options) => async (data, service) => {
+    await 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
@@ -85,7 +49,7 @@ function AuthenticatorProvider({ children, }) {
     const [authStatus, setAuthStatus] = React__default["default"].useState('configuring');
     // only run on first render
     React__default["default"].useEffect(() => {
-        awsAmplify.Auth.currentAuthenticatedUser()
+        auth.getCurrentUser()
             .then(() => {
             setAuthStatus('authenticated');
         })
@@ -125,8 +89,8 @@ const COMPONENT_ROUTE_KEYS = [
     'confirmSignUp',
     'confirmVerifyUser',
     'forceNewPassword',
-    'resetPassword',
-    'setupTOTP',
+    'forgotPassword',
+    'setupTotp',
     'signIn',
     'signUp',
     'verifyUser',
@@ -137,8 +101,8 @@ const COMPONENT_ROUTE_NAMES = [
     'ConfirmSignUp',
     'ConfirmVerifyUser',
     'ForceNewPassword',
-    'ResetPassword',
-    'SetupTOTP',
+    'ForgotPassword',
+    'SetupTotp',
     'SignIn',
     'SignUp',
     'VerifyUser',
@@ -153,7 +117,7 @@ function resolveAuthenticatorComponents(defaults, overrides) {
         const Default = defaults[route];
         const Override = overrides[route];
         if (typeof Override !== 'function') {
-            return Object.assign(Object.assign({}, components), { [route]: Default });
+            return { ...components, [route]: Default };
         }
         const { Footer, FormFields, Header } = Default;
         // cast to allow assigning of component slots
@@ -161,7 +125,7 @@ function resolveAuthenticatorComponents(defaults, overrides) {
         Component.Footer = Footer;
         Component.FormFields = FormFields;
         Component.Header = Header;
-        return Object.assign(Object.assign({}, components), { [route]: Component });
+        return { ...components, [route]: Component };
     }, {});
 }
 
@@ -189,19 +153,13 @@ const getComparator = (selector) => (currentFacade, nextFacade) => {
     // Shallow compare the array values
     return areSelectorDepsEqual(currentSelectorDeps, nextSelectorDeps);
 };
-const getQRFields = (state) => {
-    var _a, _b, _c;
-    return (Object.assign({}, (_c = (_b = (_a = ui.getActorContext(state)) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.setupTOTP) === null || _c === void 0 ? void 0 : _c.QR));
-};
-const getTotpSecretCodeCallback = (user) => function getTotpSecretCode() {
-    return __awaiter(this, void 0, void 0, function* () {
-        return yield awsAmplify.Auth.setupTOTP(user);
-    });
-};
-const flattenFormFields = (fields) => fields.flatMap(([name, options]) => (Object.assign({ name }, options)));
-const convertContactMethodsToFields = (unverifiedContactMethods) => {
-    return (unverifiedContactMethods &&
-        Object.entries(unverifiedContactMethods).map(([name, value]) => {
+const getQRFields = (state) => ({
+    ...ui.getActorContext(state)?.formFields?.setupTotp?.QR,
+});
+const flattenFormFields = (fields) => fields.flatMap(([name, options]) => ({ name, ...options }));
+const convertContactMethodsToFields = (unverifiedUserAttributes) => {
+    return (unverifiedUserAttributes &&
+        Object.entries(unverifiedUserAttributes).map(([name, value]) => {
             const valueIsString = ui.isString(value);
             if (!valueIsString || !name) {
                 return {};
@@ -213,10 +171,10 @@ const convertContactMethodsToFields = (unverifiedContactMethods) => {
  * Retrieves default and custom (RWA only, to be updated) form field values from state machine
  * for subcomponent routes that render fields
  */
-const getMachineFields = (route, state, unverifiedContactMethods) => {
+const getMachineFields = (route, state, unverifiedUserAttributes) => {
     if (isComponentRouteKey(route)) {
         return route === 'verifyUser'
-            ? convertContactMethodsToFields(unverifiedContactMethods)
+            ? convertContactMethodsToFields(unverifiedUserAttributes)
             : flattenFormFields(ui.getSortedFormFields(route, state));
     }
     return [];
@@ -232,27 +190,116 @@ function useAuthenticator(selector) {
     }
     const { service } = context;
     const { send } = service;
-    const xstateSelector = React.useCallback((state) => (Object.assign({}, ui.getServiceFacade({ send, state }))), [send]);
+    const xstateSelector = React.useCallback((state) => ({ ...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"]);
+    const { route, totpSecretCode, unverifiedUserAttributes, user, ...rest } = facade;
     // do not memoize output. `service.getSnapshot` reference remains stable preventing
     // `fields` from updating with current form state on value changes
     const serviceSnapshot = service.getSnapshot();
-    // legacy `QRFields` values only used for SetupTOTP page to retrieve issuer information, will be removed in future
-    const QRFields = route === 'setupTOTP' ? getQRFields(serviceSnapshot) : null;
+    // legacy `QRFields` values only used for SetupTotp page to retrieve issuer information, will be removed in future
+    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), { authStatus,
+    const fields = getMachineFields(route, serviceSnapshot, unverifiedUserAttributes);
+    return {
+        ...rest,
+        authStatus,
         route,
         totpSecretCode,
-        unverifiedContactMethods,
+        unverifiedUserAttributes,
         user,
         /** @deprecated For internal use only */
-        fields, getTotpSecretCode: getTotpSecretCodeCallback(user), QRFields });
+        fields,
+        QRFields,
+    };
+}
+
+const DEFAULT_ERROR_MESSAGE$1 = '`useForm` must be called inside a `FormProvider`';
+/**
+ * Utility hook corresponding to `FormProvider`, must be used within a `FormProvider`
+ *
+ * @internal Extend for public export. `useForm` and `UseForm` are an abstraction layer
+ * on top of `useFormContext` and `UseFormReturn`, imported from `react-hook-form`
+ *
+ * @param options optional parameters
+ * @returns `Form` utilities
+ */
+function useForm(options = {}) {
+    const formContext = reactHookForm.useFormContext();
+    const { errorMessage, onSubmit: _onSubmit } = options;
+    if (!formContext) {
+        throw new Error(errorMessage ?? DEFAULT_ERROR_MESSAGE$1);
+    }
+    const { formState, getFieldState: _getFieldState, getValues, handleSubmit, register, reset, setValue, } = formContext;
+    // Do not memoize, `formState` updates on all events
+    const getFieldState = (name) => {
+        const { error, ...fieldState } = _getFieldState(name, formState);
+        const { message: errorMessage } = error ?? {};
+        return { ...fieldState, errorMessage, hasError: !!errorMessage };
+    };
+    // memoize `registerField` and `setFormValue` together,
+    // `register` and `setValue` maintain stable references
+    const { registerField, setFormValue } = React__default["default"].useMemo(() => {
+        return {
+            registerField: ({ name, ...options }) => register(name, options),
+            setFormValue: ({ name, value, ...options }) => setValue(name, value, options),
+        };
+    }, [register, setValue]);
+    const onSubmit = React__default["default"].useCallback((event) => {
+        const handler = _onSubmit ? handleSubmit(_onSubmit) : ui.noop;
+        handler(event);
+    }, [_onSubmit, handleSubmit]);
+    return {
+        getFieldState,
+        getValues,
+        isValid: formState.isValid,
+        onSubmit,
+        registerField,
+        reset,
+        setFormValue,
+    };
+}
+
+const DEFAULT_ERROR_MESSAGE = '`useField` must be used within a `FormProvider`';
+/**
+ * `Field` integration hook for usage with React `Field` components.
+ *
+ * @param params Requires `name`, all additional params optional
+ * @returns `Form` aware `Field` event handlers and state values
+ */
+function useField(params) {
+    const { getFieldState, registerField } = useForm({
+        errorMessage: DEFAULT_ERROR_MESSAGE,
+    });
+    return {
+        ...registerField(params),
+        ...getFieldState(params.name),
+    };
+}
+
+const DEFAULT_MODE = 'onTouched';
+const FormProvider = React__default["default"].forwardRef(function FormProvider({ children, defaultValues, mode = DEFAULT_MODE }, ref) {
+    const formProviderProps = reactHookForm.useForm({
+        defaultValues,
+        mode,
+    });
+    const { getValues, reset } = formProviderProps;
+    React__default["default"].useImperativeHandle(ref, () => ({ getValues, reset: () => reset(defaultValues) }), [defaultValues, getValues, reset]);
+    return (React__default["default"].createElement(reactHookForm.FormProvider, { ...formProviderProps }, children));
+});
+
+/**
+ * @param Child `Form` base component wrapped inside `FormProvider`
+ * @returns Composed `Form` component exposing `FormContext` values to descendents
+ */
+function withFormProvider(Child) {
+    return React__default["default"].forwardRef(function Form({ defaultValues, mode, ...props }, ref) {
+        return (React__default["default"].createElement(FormProvider, { defaultValues: defaultValues, mode: mode, ref: ref },
+            React__default["default"].createElement(Child, { ...props })));
+    });
 }
 
 /**
@@ -282,8 +329,8 @@ const CONFIRM_RESET_PASSWORD_MACHINE_KEYS = [
 ];
 const CONFIRM_SIGN_IN_MACHINE_KEYS = [
     ...COMMON_ROUTE_MACHINE_KEYS,
+    'challengeName',
     'toSignIn',
-    'user',
 ];
 const CONFIRM_SIGN_UP_MACHINE_KEYS = [
     ...COMMON_ROUTE_MACHINE_KEYS,
@@ -306,13 +353,15 @@ const RESET_PASSWORD_MACHINE_KEYS = [
 ];
 const SIGN_IN_MACHINE_KEYS = [
     ...COMMON_ROUTE_MACHINE_KEYS,
+    'socialProviders',
     'toFederatedSignIn',
-    'toResetPassword',
+    'toForgotPassword',
     'toSignUp',
 ];
 const SIGN_UP_MACHINE_KEYS = [
     ...COMMON_ROUTE_MACHINE_KEYS,
     'hasValidationErrors',
+    'socialProviders',
     'toSignIn',
     'validationErrors',
 ];
@@ -320,6 +369,7 @@ const SETUP_TOTP_MACHINE_KEYS = [
     ...COMMON_ROUTE_MACHINE_KEYS,
     'toSignIn',
     'totpSecretCode',
+    'username',
 ];
 const VERIFY_USER_MACHINE_KEYS = [
     ...COMMON_ROUTE_MACHINE_KEYS,
@@ -333,8 +383,8 @@ const MACHINE_PROP_KEYS = {
     forceNewPassword: FORCE_NEW_PASSWORD_MACHINE_KEYS,
     signIn: SIGN_IN_MACHINE_KEYS,
     signUp: SIGN_UP_MACHINE_KEYS,
-    resetPassword: RESET_PASSWORD_MACHINE_KEYS,
-    setupTOTP: SETUP_TOTP_MACHINE_KEYS,
+    forgotPassword: RESET_PASSWORD_MACHINE_KEYS,
+    setupTotp: SETUP_TOTP_MACHINE_KEYS,
     verifyUser: VERIFY_USER_MACHINE_KEYS,
 };
 
@@ -350,47 +400,66 @@ const getRouteMachineSelector = (route) => isComponentRouteKey(route)
     : routeSelector$1;
 const isFormEventHandlerKey = (key) => ['updateBlur', 'updateForm', 'submitForm'].includes(key);
 const convertEventHandlerKey = (key) => EVENT_HANDLER_KEY_MAP[key];
-const getConvertedMachineProps = (route, context) => MACHINE_PROP_KEYS[route].reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [isFormEventHandlerKey(key) ? convertEventHandlerKey(key) : key]: context[key] })), {});
+const getConvertedMachineProps = (route, context) => MACHINE_PROP_KEYS[route].reduce((acc, key) => ({
+    ...acc,
+    [isFormEventHandlerKey(key) ? convertEventHandlerKey(key) : key]: context[key],
+}), {});
 function resolveConfirmResetPasswordRoute(Component, props) {
     return {
         Component,
-        props: Object.assign(Object.assign({}, Component), getConvertedMachineProps('confirmResetPassword', props)),
+        props: {
+            ...Component,
+            ...getConvertedMachineProps('confirmResetPassword', props),
+        },
     };
 }
 function resolveConfirmSignInRoute(Component, props) {
-    const _a = getConvertedMachineProps('confirmSignIn', props), { user } = _a, machineProps = __rest(_a, ["user"]);
-    // prior to the `confirmSignIn` route, `user.username` is populated
-    const challengeName = user.challengeName;
-    return { Component, props: Object.assign(Object.assign(Object.assign({}, Component), machineProps), { challengeName }) };
+    const { challengeName, ...machineProps } = getConvertedMachineProps('confirmSignIn', props);
+    return { Component, props: { ...Component, ...machineProps, challengeName } };
 }
 function resolveConfirmSignUpRoute(Component, props) {
     return {
         Component,
-        props: Object.assign(Object.assign({}, Component), getConvertedMachineProps('confirmSignUp', props)),
+        props: {
+            ...Component,
+            ...getConvertedMachineProps('confirmSignUp', props),
+        },
     };
 }
 function resolveConfirmVerifyUserRoute(Component, props) {
     return {
         Component,
-        props: Object.assign(Object.assign({}, Component), getConvertedMachineProps('confirmVerifyUser', props)),
+        props: {
+            ...Component,
+            ...getConvertedMachineProps('confirmVerifyUser', props),
+        },
     };
 }
 function resolveForceNewPasswordRoute(Component, props) {
     return {
         Component,
-        props: Object.assign(Object.assign({}, Component), getConvertedMachineProps('forceNewPassword', props)),
+        props: {
+            ...Component,
+            ...getConvertedMachineProps('forceNewPassword', props),
+        },
     };
 }
-function resolveResetPasswordRoute(Component, props) {
+function resolveForgotPasswordRoute(Component, props) {
     return {
         Component,
-        props: Object.assign(Object.assign({}, Component), getConvertedMachineProps('resetPassword', props)),
+        props: {
+            ...Component,
+            ...getConvertedMachineProps('forgotPassword', props),
+        },
     };
 }
-function resolveSetupTOTPRoute(Component, props) {
+function resolveSetupTotpRoute(Component, props) {
     return {
         Component,
-        props: Object.assign(Object.assign({}, Component), getConvertedMachineProps('setupTOTP', props)),
+        props: {
+            ...Component,
+            ...getConvertedMachineProps('setupTotp', props),
+        },
     };
 }
 function resolveSignInRoute(Component, props) {
@@ -398,19 +467,26 @@ function resolveSignInRoute(Component, props) {
     const hideSignUp = false;
     return {
         Component,
-        props: Object.assign(Object.assign(Object.assign({}, Component), getConvertedMachineProps('signIn', props)), { hideSignUp }),
+        props: {
+            ...Component,
+            ...getConvertedMachineProps('signIn', props),
+            hideSignUp,
+        },
     };
 }
 function resolveSignUpRoute(Component, props) {
     return {
         Component,
-        props: Object.assign(Object.assign({}, Component), getConvertedMachineProps('signUp', props)),
+        props: { ...Component, ...getConvertedMachineProps('signUp', props) },
     };
 }
 function resolveVerifyUserRoute(Component, props) {
     return {
         Component,
-        props: Object.assign(Object.assign({}, Component), getConvertedMachineProps('verifyUser', props)),
+        props: {
+            ...Component,
+            ...getConvertedMachineProps('verifyUser', props),
+        },
     };
 }
 function resolveDefault() {
@@ -429,7 +505,7 @@ function useAuthenticatorRoute({ components, }) {
     // Only state machine props specified by the current `routeSelector` will have their current value
     // returned by `useAuthenticator`, non-machine props returned will always be the current value
     const routeSelectorProps = useAuthenticator(routeMachineSelector);
-    const { ConfirmResetPassword, ConfirmSignIn, ConfirmSignUp, ConfirmVerifyUser, ForceNewPassword, ResetPassword, SetupTOTP, SignIn, SignUp, VerifyUser, } = components;
+    const { ConfirmResetPassword, ConfirmSignIn, ConfirmSignUp, ConfirmVerifyUser, ForceNewPassword, ForgotPassword, SetupTotp, SignIn, SignUp, VerifyUser, } = components;
     switch (route) {
         case 'confirmResetPassword': {
             return resolveConfirmResetPasswordRoute(ConfirmResetPassword, routeSelectorProps);
@@ -446,11 +522,11 @@ function useAuthenticatorRoute({ components, }) {
         case 'forceNewPassword': {
             return resolveForceNewPasswordRoute(ForceNewPassword, routeSelectorProps);
         }
-        case 'resetPassword': {
-            return resolveResetPasswordRoute(ResetPassword, routeSelectorProps);
+        case 'forgotPassword': {
+            return resolveForgotPasswordRoute(ForgotPassword, routeSelectorProps);
         }
-        case 'setupTOTP': {
-            return resolveSetupTOTPRoute(SetupTOTP, routeSelectorProps);
+        case 'setupTotp': {
+            return resolveSetupTotpRoute(SetupTotp, routeSelectorProps);
         }
         case 'signIn': {
             return resolveSignInRoute(SignIn, routeSelectorProps);
@@ -528,13 +604,125 @@ function useHasValueUpdated(value, ignoreFirstRender = false) {
     return previous !== value;
 }
 
+function useSetUserAgent({ componentName, packageName, version, }) {
+    React.useEffect(() => {
+        const clearUserAgent = ui.setUserAgent({
+            componentName,
+            packageName,
+            version,
+        });
+        return clearUserAgent;
+    }, [componentName, packageName, version]);
+}
+
+function useTimeout({ callback, delay, }) {
+    const storedCallback = React__default["default"].useRef(callback);
+    React__default["default"].useLayoutEffect(() => {
+        storedCallback.current = callback;
+    }, [callback]);
+    React__default["default"].useEffect(() => {
+        if (!ui.isTypedFunction(storedCallback.current) || !delay) {
+            return;
+        }
+        const timeoutId = setTimeout(() => {
+            storedCallback.current?.();
+        }, delay);
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [delay]);
+}
+
+const INVALID_OPTIONS_MESSAGE = 'an `errorMessage` or a `defaultValue` must be provided in `options`';
+/**
+ * Uses `ContextType`/`Name` generics and `options` to create:
+ * - `${Name}Context`: React Context of type `ContextType`
+ * - `Provider${Name}`: React Context `Provider` component exposing the `ContextType`
+ *   as optional props
+ * - `use${Name}`: Utility Hook exposing the values of `ContextType`. Allows
+ *   params with `errorMessage` for granular error messaging
+ *
+ * @template ContextType Type definition of the Context.
+ * > For most use cases the keys of `ContextType` should not be optional in
+ * preference of explicit `undefined` to avoid optional types on the
+ * Utility Hook return
+ *
+ * @param options Context utility options. Requires a `contextName`, and
+ * either a `defaultValue` of `ContextType` **or** an `errorMessage`
+ * allowing for differing behaviors of the Utility Hook when used outside a
+ * parent `Provider`:
+ *
+ * - `defaultValue`: Ensures the Utility Hook returns a default value for
+ *   scenarios **where the missing context values should not impact usage**
+ * - `errorMessage`: Ensures the Utility Hook throws an error for
+ *   scenarios **where the missing context values should prevent** usage
+ *
+ * @returns `Context`, `Provider` Component and `useContext` Utility Hook
+ *
+ * @usage
+ * ```ts
+ * interface StuffContextType {
+ *   things: number;
+ * }
+ *
+ * // with `defaultValue`
+ * const defaultValue: StuffContextType = { things: 7 };
+ *
+ * const { StuffProvider, useStuff } = createContextUtilities({
+ *   contextName: 'Stuff',
+ *   defaultValue,
+ * });
+ *
+ * // with `errorMessage`
+ * const { StuffProvider, useStuff } = createContextUtilities<StuffContextType>({
+ *   contextName: 'Stuff',
+ *   errorMessage: '`useStuff` must be used in a `StuffProvider`'
+ * });
+ * ```
+ */
+function createContextUtilities(options) {
+    const { contextName, defaultValue, errorMessage } = options ?? {};
+    if (ui.isUndefined(defaultValue) && !ui.isString(errorMessage)) {
+        throw new Error(INVALID_OPTIONS_MESSAGE);
+    }
+    const Context = React__default["default"].createContext(defaultValue);
+    function Provider(props) {
+        const { children, ...context } = props;
+        const value = React__default["default"].useMemo(() => context, 
+        // Unpack `context` for the dep array; using `[context]` results in
+        // evaluation on every render
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        Object.values(context));
+        return React__default["default"].createElement(Context.Provider, { value: value }, children);
+    }
+    Provider.displayName = `${contextName}Provider`;
+    return {
+        [`use${contextName}`]: function (params) {
+            const context = React__default["default"].useContext(Context);
+            if (ui.isUndefined(context)) {
+                throw new Error(params?.errorMessage ?? errorMessage);
+            }
+            return context;
+        },
+        [`${contextName}Provider`]: Provider,
+        [`${contextName}Context`]: Context,
+    };
+}
+
 exports.AuthenticatorProvider = AuthenticatorProvider;
+exports.FormProvider = FormProvider;
 exports.RenderNothing = RenderNothing;
+exports.createContextUtilities = createContextUtilities;
 exports.isAuthenticatorComponentRouteKey = isComponentRouteKey;
 exports.resolveAuthenticatorComponents = resolveAuthenticatorComponents;
 exports.useAuthenticator = useAuthenticator;
 exports.useAuthenticatorInitMachine = useAuthenticatorInitMachine;
 exports.useAuthenticatorRoute = useAuthenticatorRoute;
 exports.useDeprecationWarning = useDeprecationWarning;
+exports.useField = useField;
+exports.useForm = useForm;
 exports.useHasValueUpdated = useHasValueUpdated;
 exports.usePreviousValue = usePreviousValue;
+exports.useSetUserAgent = useSetUserAgent;
+exports.useTimeout = useTimeout;
+exports.withFormProvider = withFormProvider;

package/dist/types/Authenticator/hooks/types.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { AuthChallengeName, AuthenticatorServiceFacade, LegacyFormFieldOptions } from '@aws-amplify/ui';
+import { ChallengeName, AuthenticatorServiceFacade, LegacyFormFieldOptions } from '@aws-amplify/ui';
 import { UseAuthenticator } from './useAuthenticator';
-export type AuthenticatorRouteComponentKey = 'confirmResetPassword' | 'confirmSignIn' | 'confirmSignUp' | 'confirmVerifyUser' | 'forceNewPassword' | 'resetPassword' | 'setupTOTP' | 'signIn' | 'signUp' | 'verifyUser';
+export type AuthenticatorRouteComponentKey = 'confirmResetPassword' | 'confirmSignIn' | 'confirmSignUp' | 'confirmVerifyUser' | 'forceNewPassword' | 'forgotPassword' | 'setupTotp' | 'signIn' | 'signUp' | 'verifyUser';
 export type AuthenticatorLegacyField = LegacyFormFieldOptions;
 export type AuthenticatorLegacyFields = AuthenticatorLegacyField[];
 /**
@@ -52,7 +52,7 @@ export type ConfirmResetPasswordBaseProps<FieldType = {}> = {
     resendCode: UseAuthenticator['resendCode'];
 } & CommonRouteProps & ComponentSlots<FieldType> & ValidationProps;
 export type ConfirmSignInBaseProps<FieldType = {}> = {
-    challengeName: AuthChallengeName;
+    challengeName: ChallengeName | undefined;
     toSignIn: UseAuthenticator['toSignIn'];
 } & CommonRouteProps & ComponentSlots<FieldType> & ValidationProps;
 export type ConfirmSignUpBaseProps<FieldType = {}> = {
@@ -68,18 +68,21 @@ export type ForceResetPasswordBaseProps<FieldType = {}> = {
 export type ResetPasswordBaseProps<FieldType = {}> = {
     toSignIn: UseAuthenticator['toSignIn'];
 } & CommonRouteProps & ComponentSlots<FieldType> & ValidationProps;
-export type SetupTOTPBaseProps<FieldType = {}> = {
+export type SetupTotpBaseProps<FieldType = {}> = {
     toSignIn: UseAuthenticator['toSignIn'];
     totpSecretCode: UseAuthenticator['totpSecretCode'];
+    username: UseAuthenticator['username'];
 } & CommonRouteProps & ComponentSlots<FieldType> & ValidationProps;
 export type SignInBaseProps<FieldType = {}> = {
     hideSignUp?: boolean;
+    socialProviders?: UseAuthenticator['socialProviders'];
     toFederatedSignIn: UseAuthenticator['toFederatedSignIn'];
-    toResetPassword: UseAuthenticator['toResetPassword'];
+    toForgotPassword: UseAuthenticator['toForgotPassword'];
     toSignUp: UseAuthenticator['toSignUp'];
 } & CommonRouteProps & ComponentSlots<FieldType> & ValidationProps;
 export type SignUpBaseProps<FieldType = {}> = {
     hideSignIn?: boolean;
+    socialProviders?: UseAuthenticator['socialProviders'];
     toFederatedSignIn: UseAuthenticator['toFederatedSignIn'];
     toSignIn: UseAuthenticator['toSignIn'];
 } & CommonRouteProps & ComponentSlots<FieldType> & ValidationProps;
@@ -92,8 +95,8 @@ export interface DefaultProps<FieldType = {}> {
     ConfirmResetPassword: ConfirmResetPasswordBaseProps<FieldType>;
     ConfirmVerifyUser: ConfirmVerifyUserProps<FieldType>;
     ForceNewPassword: ForceResetPasswordBaseProps<FieldType>;
-    ResetPassword: ResetPasswordBaseProps<FieldType>;
-    SetupTOTP: SetupTOTPBaseProps<FieldType>;
+    ForgotPassword: ResetPasswordBaseProps<FieldType>;
+    SetupTotp: SetupTotpBaseProps<FieldType>;
     SignIn: SignInBaseProps<FieldType>;
     SignUp: SignUpBaseProps<FieldType>;
     VerifyUser: VerifyUserProps<FieldType>;

package/dist/types/Authenticator/hooks/useAuthenticator/types.d.ts

@@ -5,7 +5,7 @@ import { AuthenticatorServiceFacade, LegacyFormFieldOptions } from '@aws-amplify
  */
 type AuthenticatorMachineContext = AuthenticatorServiceFacade;
 type AuthenticatorMachineContextKey = keyof AuthenticatorMachineContext;
-export type AuthenticatorRouteComponentKey = 'signIn' | 'signUp' | 'forceNewPassword' | 'confirmResetPassword' | 'confirmSignIn' | 'confirmSignUp' | 'confirmVerifyUser' | 'resetPassword' | 'setupTOTP' | 'verifyUser';
+export type AuthenticatorRouteComponentKey = 'signIn' | 'signUp' | 'forceNewPassword' | 'confirmResetPassword' | 'confirmSignIn' | 'confirmSignUp' | 'confirmVerifyUser' | 'forgotPassword' | 'setupTotp' | 'verifyUser';
 export type AuthenticatorLegacyFields = LegacyFormFieldOptions[];
 /**
  * Inspired from https://xstate.js.org/docs/packages/xstate-react/#useselector-actor-selector-compare-getsnapshot.
@@ -18,8 +18,6 @@ export interface UseAuthenticator extends AuthenticatorServiceFacade {
     /** @deprecated For internal use only */
     fields: AuthenticatorLegacyFields;
     /** @deprecated For internal use only */
-    getTotpSecretCode: () => Promise<string>;
-    /** @deprecated For internal use only */
     QRFields: {
         totpIssuer?: string;
         totpUsername?: string;

package/dist/types/Authenticator/hooks/useAuthenticator/utils.d.ts

@@ -1,4 +1,4 @@
-import { AmplifyUser, AuthenticatorRoute, AuthMachineState, UnverifiedContactMethods } from '@aws-amplify/ui';
+import { AuthenticatorRoute, AuthMachineState, UnverifiedUserAttributes } from '@aws-amplify/ui';
 import { AuthenticatorLegacyFields } from '../types';
 import { Comparator, UseAuthenticatorSelector } from './types';
 export declare const defaultComparator: () => false;
@@ -12,9 +12,8 @@ export declare const getQRFields: (state: AuthMachineState) => {
     totpIssuer?: string;
     totpUsername?: string;
 };
-export declare const getTotpSecretCodeCallback: (user: AmplifyUser) => () => Promise<string>;
 /**
  * Retrieves default and custom (RWA only, to be updated) form field values from state machine
  * for subcomponent routes that render fields
  */
-export declare const getMachineFields: (route: AuthenticatorRoute, state: AuthMachineState, unverifiedContactMethods: UnverifiedContactMethods) => AuthenticatorLegacyFields;
+export declare const getMachineFields: (route: AuthenticatorRoute, state: AuthMachineState, unverifiedUserAttributes: UnverifiedUserAttributes) => AuthenticatorLegacyFields;