@aws-amplify/ui-react 6.13.2 → 6.15.0

package/dist/index.js

@@ -6,17 +6,17 @@ var React = require('react');
 var isEqual = require('lodash/isEqual.js');
 var uiReactCore = require('@aws-amplify/ui-react-core');
 var ui = require('@aws-amplify/ui');
-var Field = require('./Field-BjInyX0G.js');
+var Field = require('./Field-Cq088Vbv.js');
 require('aws-amplify/storage');
 var debounce = require('lodash/debounce.js');
 var reactDropdownMenu = require('@radix-ui/react-dropdown-menu');
 var reactSlider = require('@radix-ui/react-slider');
 var QRCode = require('qrcode');
 var utils = require('aws-amplify/utils');
+var auth = require('aws-amplify/auth');
 var reactDirection = require('@radix-ui/react-direction');
 var ThemeStyle = require('./ThemeStyle-DA2-Clfz.js');
 require('@aws-amplify/core');
-require('aws-amplify/auth');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -2472,7 +2472,7 @@ const defaultDeleteUserDisplayText = {
     warningText: 'Deleting your account is not reversible. You will lose access to your account and all data associated with it.',
 };
 
-const VERSION = '6.13.2';
+const VERSION = '6.15.0';
 
 const logger$2 = ui.getLogger('AccountSettings');
 const getIsDisabled = (formValues, validationError) => {
@@ -2794,17 +2794,30 @@ function FormField({ autocomplete: autoComplete, dialCode, name, type, ...props
     }
 }
 
-function FormFields() {
+function FormFields({ includePassword, } = {}) {
     const { fields } = uiReactCore.useAuthenticator(({ route }) => [route]);
-    const formFields = React__namespace.useRef(fields.map((field, index) => (React__namespace.createElement(FormField
-    // use index for key, field order is static
-    , { 
+    const { selectedAuthMethod, preferredChallenge } = uiReactCore.useAuthenticator((context) => [context.selectedAuthMethod, context.preferredChallenge]);
+    // Determine if password should be shown
+    const effectiveMethod = selectedAuthMethod ?? preferredChallenge;
+    const shouldRequirePassword = includePassword ?? (!effectiveMethod || effectiveMethod === 'PASSWORD');
+    const formFields = React__namespace.useRef(fields
+        .map((field, index) => {
+        // Make password and confirm_password optional for passwordless methods
+        if ((field.name === 'password' || field.name === 'confirm_password') &&
+            !shouldRequirePassword) {
+            return (React__namespace.createElement(FormField, { key: index, ...field, isRequired: false }));
+        }
+        return (React__namespace.createElement(FormField
         // use index for key, field order is static
-        key: index, ...field })))).current;
+        , { 
+            // use index for key, field order is static
+            key: index, ...field }));
+    })
+        .filter(Boolean)).current;
     return React__namespace.createElement(React__namespace.Fragment, null, formFields);
 }
 
-const { getDeliveryMessageText, getDeliveryMethodText, getConfirmingText: getConfirmingText$1, getConfirmText: getConfirmText$1, getResendCodeText: getResendCodeText$1, } = ui.authenticatorTextUtil;
+const { getDeliveryMessageText: getDeliveryMessageText$1, getDeliveryMethodText: getDeliveryMethodText$1, getConfirmingText: getConfirmingText$1, getConfirmText: getConfirmText$1, getResendCodeText: getResendCodeText$2, } = ui.authenticatorTextUtil;
 function ConfirmSignUp({ className, variation, }) {
     const { isPending, resendCode, codeDeliveryDetails } = uiReactCore.useAuthenticator((context) => [
         context.isPending,
@@ -2822,18 +2835,18 @@ function ConfirmSignUp({ className, variation, }) {
             React__namespace["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
                 React__namespace["default"].createElement(Header, null),
                 React__namespace["default"].createElement(Field.Flex, { direction: "column" },
-                    React__namespace["default"].createElement(Field.Text, { className: "amplify-authenticator__subtitle" }, getDeliveryMessageText(codeDeliveryDetails)),
+                    React__namespace["default"].createElement(Field.Text, { className: "amplify-authenticator__subtitle" }, getDeliveryMessageText$1(codeDeliveryDetails)),
                     React__namespace["default"].createElement(FormFields, null),
                     React__namespace["default"].createElement(RemoteErrorMessage, null),
                     React__namespace["default"].createElement(Field.Button, { variation: "primary", isDisabled: isPending, type: "submit", loadingText: getConfirmingText$1(), isLoading: isPending }, getConfirmText$1()),
-                    React__namespace["default"].createElement(Field.Button, { onClick: resendCode, type: "button" }, getResendCodeText$1())),
+                    React__namespace["default"].createElement(Field.Button, { onClick: resendCode, type: "button" }, getResendCodeText$2())),
                 React__namespace["default"].createElement(Footer, null)))));
 }
 const DefaultHeader = () => {
     const { codeDeliveryDetails } = uiReactCore.useAuthenticator((context) => [
         context.codeDeliveryDetails,
     ]);
-    return (React__namespace["default"].createElement(Heading, { level: 4 }, getDeliveryMethodText(codeDeliveryDetails)));
+    return (React__namespace["default"].createElement(Heading, { level: 4 }, getDeliveryMethodText$1(codeDeliveryDetails)));
 };
 ConfirmSignUp.Header = DefaultHeader;
 ConfirmSignUp.Footer = function Footer() {
@@ -2841,7 +2854,7 @@ ConfirmSignUp.Footer = function Footer() {
     return null;
 };
 
-const { getChangePasswordText, getChangingText, getBackToSignInText: getBackToSignInText$2 } = ui.authenticatorTextUtil;
+const { getChangePasswordText, getChangingText, getBackToSignInText: getBackToSignInText$3 } = ui.authenticatorTextUtil;
 const ForceNewPassword = ({ className, variation, }) => {
     const { isPending, toSignIn } = uiReactCore.useAuthenticator((context) => [
         context.isPending,
@@ -2858,7 +2871,7 @@ const ForceNewPassword = ({ className, variation, }) => {
                 React__namespace["default"].createElement(FormFields, null),
                 React__namespace["default"].createElement(RemoteErrorMessage, null),
                 React__namespace["default"].createElement(Field.Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getChangingText() }, getChangePasswordText()),
-                React__namespace["default"].createElement(Field.Button, { onClick: toSignIn, type: "button", variation: "link", size: "small" }, getBackToSignInText$2()),
+                React__namespace["default"].createElement(Field.Button, { onClick: toSignIn, type: "button", variation: "link", size: "small" }, getBackToSignInText$3()),
                 React__namespace["default"].createElement(Footer, null)))));
 };
 ForceNewPassword.FormFields = function FormFields$1() {
@@ -2871,15 +2884,28 @@ ForceNewPassword.Footer = function Footer() {
     return null;
 };
 
-const { getConfirmText, getConfirmingText, getBackToSignInText: getBackToSignInText$1 } = ui.authenticatorTextUtil;
+const isSignInOrSignUpRoute = (route) => route === 'signIn' || route === 'signUp';
+/**
+ * Checks if challenge is OTP
+ * @param challengeName - The challenge name (e.g., 'EMAIL_OTP', 'SMS_MFA')
+ * @returns true if challenge is OTP
+ */
+const isOtpChallenge = (challengeName) => !!challengeName &&
+    (challengeName === 'EMAIL_OTP' || challengeName === 'SMS_MFA');
+
+const { getConfirmText, getConfirmingText, getBackToSignInText: getBackToSignInText$2, getResendCodeText: getResendCodeText$1, } = ui.authenticatorTextUtil;
 const ConfirmSignInFooter = () => {
-    const { isPending, toSignIn } = uiReactCore.useAuthenticator((context) => [
+    const { isPending, toSignIn, challengeName, resendCode } = uiReactCore.useAuthenticator((context) => [
         context.isPending,
         context.toSignIn,
+        context.challengeName,
+        context.resendCode,
     ]);
+    const showResendCode = isOtpChallenge(challengeName) && resendCode;
     return (React__namespace["default"].createElement(Field.Flex, { direction: "column" },
         React__namespace["default"].createElement(Field.Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getConfirmingText() }, getConfirmText()),
-        React__namespace["default"].createElement(Field.Button, { onClick: toSignIn, type: "button", variation: "link", size: "small" }, getBackToSignInText$1())));
+        showResendCode && (React__namespace["default"].createElement(Field.Button, { onClick: resendCode, type: "button" }, getResendCodeText$1())),
+        React__namespace["default"].createElement(Field.Button, { onClick: toSignIn, type: "button", variation: "link", size: "small" }, getBackToSignInText$2())));
 };
 
 const logger = new utils.ConsoleLogger('SetupTotp-logger');
@@ -3016,7 +3042,7 @@ const FederatedSignInButton = (props) => {
         React__namespace["default"].createElement(Field.Text, { as: "span" }, text)));
 };
 
-const { getSignInWithFederationText, getOrText } = ui.authenticatorTextUtil;
+const { getSignInWithFederationText, getOrText: getOrText$2 } = ui.authenticatorTextUtil;
 function FederatedSignIn() {
     const { route, socialProviders } = uiReactCore.useAuthenticator(({ route, socialProviders }) => [route, socialProviders]);
     if (socialProviders.length === 0) {
@@ -3039,19 +3065,60 @@ function FederatedSignIn() {
                     console.error(`Authenticator does not support ${provider}. Please open an issue: https://github.com/aws-amplify/amplify-ui/issues/choose`);
             }
         }),
-        React__namespace["default"].createElement(Divider, { size: "small", label: getOrText() })));
+        React__namespace["default"].createElement(Divider, { size: "small", label: getOrText$2() })));
 }
 
-const { getSignInText, getSigningInText, getForgotPasswordText } = ui.authenticatorTextUtil;
+const { getSignInText, getSigningInText: getSigningInText$1, getForgotPasswordText, getSignInWithEmailText: getSignInWithEmailText$1, getSignInWithSmsText: getSignInWithSmsText$1, getSignInWithPasskeyText: getSignInWithPasskeyText$1, getOtherSignInOptionsText, getEnterUsernameFirstText, } = ui.authenticatorTextUtil;
 function SignIn() {
-    const { isPending } = uiReactCore.useAuthenticator((context) => [context.isPending]);
+    const { isPending, availableAuthMethods, preferredChallenge, toShowAuthMethods, } = uiReactCore.useAuthenticator((context) => [
+        context.isPending,
+        context.availableAuthMethods,
+        context.preferredChallenge,
+        context.toShowAuthMethods,
+    ]);
     const { handleChange, handleSubmit } = useFormHandlers();
+    const [usernameValue, setUsernameValue] = React__namespace["default"].useState('');
     const { components: { 
     // @ts-ignore
     SignIn: { Header = SignIn.Header, Footer = SignIn.Footer }, }, } = useCustomComponents();
+    const hasMultipleMethods = availableAuthMethods && availableAuthMethods.length > 1;
+    const showPreferredButton = hasMultipleMethods && preferredChallenge;
+    const hasUsername = usernameValue.trim().length > 0;
+    const handleFormChange = React__namespace["default"].useCallback((e) => {
+        const { name, value } = e.target;
+        // Track username for "Other sign-in options" button validation
+        if (name === 'username' && typeof value === 'string') {
+            setUsernameValue(value);
+        }
+        handleChange(e);
+    }, [handleChange]);
+    const getPreferredButtonText = () => {
+        if (!preferredChallenge)
+            return getSignInText();
+        switch (preferredChallenge) {
+            case 'EMAIL_OTP':
+                return getSignInWithEmailText$1();
+            case 'SMS_OTP':
+                return getSignInWithSmsText$1();
+            case 'WEB_AUTHN':
+                return getSignInWithPasskeyText$1();
+            case 'PASSWORD':
+            default:
+                return getSignInText();
+        }
+    };
+    const handlePreferredMethodClick = (e) => {
+        e.preventDefault();
+        // For passwordless methods, just submit - the actor already knows the preferredChallenge
+        handleSubmit(e);
+    };
+    const handleOtherOptionsClick = (e) => {
+        e.preventDefault();
+        toShowAuthMethods();
+    };
     return (React__namespace["default"].createElement(Field.View, null,
         React__namespace["default"].createElement(Header, null),
-        React__namespace["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-signin": "", method: "post", onSubmit: handleSubmit, onChange: handleChange },
+        React__namespace["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-signin": "", method: "post", onSubmit: showPreferredButton ? handlePreferredMethodClick : handleSubmit, onChange: handleFormChange },
             React__namespace["default"].createElement(FederatedSignIn, null),
             React__namespace["default"].createElement(Field.Flex, { direction: "column" },
                 React__namespace["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
@@ -3059,7 +3126,8 @@ function SignIn() {
                         React__namespace["default"].createElement("legend", null, getSignInText())),
                     React__namespace["default"].createElement(FormFields, null)),
                 React__namespace["default"].createElement(RemoteErrorMessage, null),
-                React__namespace["default"].createElement(Field.Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getSigningInText() }, getSignInText()),
+                React__namespace["default"].createElement(Field.Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getSigningInText$1() }, showPreferredButton ? getPreferredButtonText() : getSignInText()),
+                showPreferredButton && (React__namespace["default"].createElement(Field.Button, { onClick: handleOtherOptionsClick, size: "small", variation: "link", isDisabled: isPending || !hasUsername, title: !hasUsername ? getEnterUsernameFirstText() : undefined }, getOtherSignInOptionsText())),
                 React__namespace["default"].createElement(Footer, null)))));
 }
 const DefaultFooter = () => {
@@ -3075,25 +3143,76 @@ SignIn.Header = function Header() {
     return null;
 };
 
-const { getCreateAccountText, getCreatingAccountText } = ui.authenticatorTextUtil;
+const { getCreateAccountText, getCreatingAccountText, getCreateAccountWithEmailText, getCreateAccountWithPasswordText, getCreateAccountWithSmsText, getOrText: getOrText$1, } = ui.authenticatorTextUtil;
 function SignUp() {
-    const { hasValidationErrors, isPending } = uiReactCore.useAuthenticator((context) => [
+    const { hasValidationErrors, isPending, availableAuthMethods, preferredChallenge, selectedAuthMethod, } = uiReactCore.useAuthenticator((context) => [
         context.hasValidationErrors,
         context.isPending,
+        context.availableAuthMethods,
+        context.preferredChallenge,
+        context.selectedAuthMethod,
     ]);
     const { handleChange, handleBlur, handleSubmit } = useFormHandlers();
     const { components: { 
     // @ts-ignore
     SignUp: { Header = SignUp.Header, FormFields = SignUp.FormFields, Footer = SignUp.Footer, }, }, } = useCustomComponents();
+    // Filter out WEB_AUTHN for sign-up (passkeys are sign-in only)
+    const signUpMethods = availableAuthMethods?.filter((m) => m !== 'WEB_AUTHN');
+    const hasMultipleMethods = signUpMethods && signUpMethods.length > 1;
+    // Determine which method to show first
+    const primaryMethod = preferredChallenge && preferredChallenge !== 'WEB_AUTHN'
+        ? preferredChallenge
+        : 'PASSWORD';
+    // Other methods (excluding primary)
+    const otherMethods = signUpMethods?.filter((m) => m !== primaryMethod) ?? [];
+    // Determine if password should be shown
+    const effectiveMethod = selectedAuthMethod ?? primaryMethod;
+    const isPasswordless = effectiveMethod !== 'PASSWORD';
+    const getButtonText = (method) => {
+        switch (method) {
+            case 'EMAIL_OTP':
+                return getCreateAccountWithEmailText();
+            case 'SMS_OTP':
+                return getCreateAccountWithSmsText();
+            case 'PASSWORD':
+                return hasMultipleMethods
+                    ? getCreateAccountWithPasswordText()
+                    : getCreateAccountText();
+            default:
+                return getCreateAccountText();
+        }
+    };
+    const handleMethodClick = (method) => (e) => {
+        e.preventDefault();
+        const form = e.target.closest('form');
+        if (form) {
+            // Get or create the hidden input
+            if (!form.__authMethod) {
+                const input = document.createElement('input');
+                input.name = '__authMethod';
+                form.appendChild(input);
+            }
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            form.__authMethod.type = 'hidden';
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            form.__authMethod.value = method;
+            form.requestSubmit();
+        }
+    };
     return (React__namespace["default"].createElement(Field.View, null,
         React__namespace["default"].createElement(Header, null),
         React__namespace["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-signup": "", method: "post", onChange: handleChange, onSubmit: handleSubmit, onBlur: handleBlur },
             React__namespace["default"].createElement(FederatedSignIn, null),
             React__namespace["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
                 React__namespace["default"].createElement(Field.Flex, { direction: "column" },
-                    React__namespace["default"].createElement(FormFields, null),
+                    React__namespace["default"].createElement(FormFields, { includePassword: !isPasswordless }),
                     React__namespace["default"].createElement(RemoteErrorMessage, null)),
-                React__namespace["default"].createElement(Field.Button, { isDisabled: hasValidationErrors || isPending, isFullWidth: true, type: "submit", variation: "primary", isLoading: isPending, loadingText: getCreatingAccountText() }, getCreateAccountText()),
+                React__namespace["default"].createElement(Field.Button, { isDisabled: ((!hasMultipleMethods || otherMethods.length == 0) &&
+                        hasValidationErrors) ||
+                        isPending, isFullWidth: true, type: "submit", variation: "primary", isLoading: isPending, loadingText: getCreatingAccountText(), onClick: handleMethodClick(primaryMethod) }, getButtonText(primaryMethod)),
+                hasMultipleMethods && otherMethods.length > 0 && (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
+                    React__namespace["default"].createElement(Field.Flex, { justifyContent: "center", padding: "medium 0" }, getOrText$1()),
+                    otherMethods.map((method) => (React__namespace["default"].createElement(Field.Button, { key: method, isDisabled: isPending, isFullWidth: true, type: "button", variation: "primary", onClick: handleMethodClick(method) }, getButtonText(method)))))),
                 React__namespace["default"].createElement(Footer, null)))));
 }
 SignUp.Header = function Header() {
@@ -3192,28 +3311,38 @@ VerifyUser.Footer = function Footer() {
     return null;
 };
 
-const { getChallengeText } = ui.authenticatorTextUtil;
+const { getChallengeText, getDeliveryMessageText, getDeliveryMethodText } = ui.authenticatorTextUtil;
 const ConfirmSignIn = ({ className, variation, }) => {
-    const { isPending } = uiReactCore.useAuthenticator((context) => [context.isPending]);
+    const { isPending, challengeName, codeDeliveryDetails } = uiReactCore.useAuthenticator((context) => [
+        context.isPending,
+        context.challengeName,
+        context.codeDeliveryDetails,
+    ]);
     const { handleChange, handleSubmit } = useFormHandlers();
     const { components: { 
     // @ts-ignore
     ConfirmSignIn: { Header = ConfirmSignIn.Header, Footer = ConfirmSignIn.Footer, }, }, } = useCustomComponents();
+    const showDeliveryMessage = isOtpChallenge(challengeName) && codeDeliveryDetails;
     return (React__namespace["default"].createElement(RouteContainer, { className: className, variation: variation },
         React__namespace["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-confirmsignin": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
             React__namespace["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
                 React__namespace["default"].createElement(Header, null),
                 React__namespace["default"].createElement(Field.Flex, { direction: "column" },
+                    showDeliveryMessage && (React__namespace["default"].createElement(Field.Text, { className: "amplify-authenticator__subtitle" }, getDeliveryMessageText(codeDeliveryDetails))),
                     React__namespace["default"].createElement(FormFields, null),
                     React__namespace["default"].createElement(RemoteErrorMessage, null)),
                 React__namespace["default"].createElement(ConfirmSignInFooter, null),
                 React__namespace["default"].createElement(Footer, null)))));
 };
 function Header() {
-    const { challengeName } = uiReactCore.useAuthenticator(({ challengeName }) => [
+    const { challengeName, codeDeliveryDetails } = uiReactCore.useAuthenticator(({ challengeName, codeDeliveryDetails }) => [
         challengeName,
+        codeDeliveryDetails,
     ]);
-    return React__namespace["default"].createElement(Heading, { level: 3 }, getChallengeText(challengeName));
+    const showDeliveryMethod = isOtpChallenge(challengeName) && codeDeliveryDetails;
+    return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
+        React__namespace["default"].createElement(Heading, { level: 3 }, getChallengeText(challengeName)),
+        showDeliveryMethod && (React__namespace["default"].createElement(Heading, { level: 5 }, getDeliveryMethodText(codeDeliveryDetails)))));
 }
 ConfirmSignIn.Header = Header;
 ConfirmSignIn.Footer = function Footer() {
@@ -3247,7 +3376,7 @@ ConfirmResetPassword.Footer = function Footer() {
     return null;
 };
 
-const { getBackToSignInText, getSendingText, getSendCodeText, getResetYourPasswordText, } = ui.authenticatorTextUtil;
+const { getBackToSignInText: getBackToSignInText$1, getSendingText, getSendCodeText, getResetYourPasswordText, } = ui.authenticatorTextUtil;
 const ForgotPassword = ({ className, variation, }) => {
     const { isPending } = uiReactCore.useAuthenticator((context) => [context.isPending]);
     const { handleChange, handleSubmit } = useFormHandlers();
@@ -3261,7 +3390,7 @@ const ForgotPassword = ({ className, variation, }) => {
                 React__namespace["default"].createElement(Field.Flex, { direction: "column" },
                     React__namespace["default"].createElement(FormFields, null)),
                 React__namespace["default"].createElement(RemoteErrorMessage, null),
-                React__namespace["default"].createElement(TwoButtonSubmitFooter, { cancelButtonText: getBackToSignInText(), cancelButtonSendType: "SIGN_IN", submitButtonText: isPending ? (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
+                React__namespace["default"].createElement(TwoButtonSubmitFooter, { cancelButtonText: getBackToSignInText$1(), cancelButtonSendType: "SIGN_IN", submitButtonText: isPending ? (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
                         getSendingText(),
                         "\u2026")) : (React__namespace["default"].createElement(React__namespace["default"].Fragment, null, getSendCodeText())) }),
                 React__namespace["default"].createElement(Footer, null)))));
@@ -3274,8 +3403,6 @@ ForgotPassword.Footer = function Footer() {
     return null;
 };
 
-const isSignInOrSignUpRoute = (route) => route === 'signIn' || route === 'signUp';
-
 const { getMfaTypeLabelByValue, getSelectMfaTypeByChallengeName, getSelectMfaTypeText, } = ui.authenticatorTextUtil;
 const SelectMfaType = ({ className, variation, }) => {
     const { isPending, allowedMfaTypes = [] } = uiReactCore.useAuthenticator((context) => {
@@ -3331,6 +3458,143 @@ SetupEmail.Footer = function Footer() {
     return null;
 };
 
+const { getSignInWithPasswordText, getSignInWithEmailText, getSignInWithSmsText, getSignInWithPasskeyText, getSigningInText, getBackToSignInText, getOrText, getUsernameLabelByLoginMechanism, } = ui.authenticatorTextUtil;
+const getMethodButtonLabel = (method) => {
+    switch (method) {
+        case 'EMAIL_OTP':
+            return getSignInWithEmailText();
+        case 'SMS_OTP':
+            return getSignInWithSmsText();
+        case 'WEB_AUTHN':
+            return getSignInWithPasskeyText();
+        case 'PASSWORD':
+            return getSignInWithPasswordText();
+        default:
+            return getSignInWithPasswordText();
+    }
+};
+const SignInSelectAuthFactor = ({ className, variation, }) => {
+    const { isPending, username, availableAuthMethods, toSignIn, selectAuthMethod, loginMechanism, } = uiReactCore.useAuthenticator((context) => [
+        context.isPending,
+        context.username,
+        context.availableAuthMethods,
+        context.toSignIn,
+        context.selectAuthMethod,
+        context.loginMechanism,
+    ]);
+    const { handleChange, handleSubmit } = useFormHandlers();
+    const methods = (availableAuthMethods ?? []);
+    const hasPassword = methods.includes('PASSWORD');
+    const passwordlessMethods = methods.filter((m) => m !== 'PASSWORD');
+    const handleMethodSelect = (method) => {
+        selectAuthMethod({ method });
+    };
+    const usernameLabel = getUsernameLabelByLoginMechanism(loginMechanism);
+    return (React__namespace["default"].createElement(RouteContainer, { className: className, variation: variation },
+        React__namespace["default"].createElement("form", { "data-amplify-form": true, "data-amplify-authenticator-signinselect": true, method: "post", onSubmit: handleSubmit, onChange: handleChange },
+            React__namespace["default"].createElement(Field.Flex, { direction: "column" },
+                React__namespace["default"].createElement(TextField, { label: usernameLabel, name: "username", value: username, isReadOnly: true, isDisabled: true }),
+                hasPassword && (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
+                    React__namespace["default"].createElement(PasswordField, { label: "Password", name: "password", autoComplete: "current-password", isDisabled: isPending }),
+                    React__namespace["default"].createElement(Field.Button, { isDisabled: isPending, type: "submit", variation: "primary", isFullWidth: true, isLoading: isPending, loadingText: getSigningInText() }, getSignInWithPasswordText()))),
+                hasPassword && passwordlessMethods.length > 0 && (React__namespace["default"].createElement(Divider, { label: getOrText() })),
+                passwordlessMethods.length > 0 && (React__namespace["default"].createElement(Field.Flex, { direction: "column", gap: "0.5rem" }, passwordlessMethods.map((method) => (React__namespace["default"].createElement(Field.Button, { key: method, variation: "primary", isFullWidth: true, isDisabled: isPending, onClick: () => handleMethodSelect(method) }, getMethodButtonLabel(method)))))),
+                React__namespace["default"].createElement(RemoteErrorMessage, null),
+                React__namespace["default"].createElement(Field.Button, { onClick: toSignIn, size: "small", variation: "link", isDisabled: isPending }, getBackToSignInText())))));
+};
+
+const { getPasskeyPromptHeadingText, getPasskeyPromptDescriptionText, getCreatePasskeyText, getRegisteringText, getContinueWithoutPasskeyText, getPasskeyCreatedSuccessText, getPasskeyRegisteredText, getPasskeyRegistrationFailedText, getPasskeyLabelText, getExistingPasskeysText, getSetupAnotherPasskeyText, getContinueText, } = ui.authenticatorTextUtil;
+function PasskeyPrompt({ className, variation, }) {
+    const [success, setSuccess] = React__namespace["default"].useState(false);
+    const [error, setError] = React__namespace["default"].useState(null);
+    const [isRegistering, setIsRegistering] = React__namespace["default"].useState(false);
+    const [credentials, setCredentials] = React__namespace["default"].useState([]);
+    const { submitForm, isPending } = uiReactCore.useAuthenticator((context) => [
+        context.submitForm,
+        context.isPending,
+    ]);
+    const loadCredentials = React__namespace["default"].useCallback(async () => {
+        try {
+            const result = await auth.listWebAuthnCredentials();
+            setCredentials(result.credentials || []);
+        }
+        catch {
+            // Silently fail - credentials list is optional
+        }
+    }, []);
+    React__namespace["default"].useEffect(() => {
+        if (success) {
+            void loadCredentials();
+        }
+    }, [success, loadCredentials]);
+    const handleSkip = React__namespace["default"].useCallback(() => {
+        submitForm({ type: 'SKIP' });
+    }, [submitForm]);
+    const handleContinue = React__namespace["default"].useCallback(() => {
+        submitForm({ type: 'SUBMIT' });
+    }, [submitForm]);
+    const handleRegister = React__namespace["default"].useCallback(async () => {
+        try {
+            setError(null);
+            setIsRegistering(true);
+            await auth.associateWebAuthnCredential();
+            setSuccess(true);
+        }
+        catch (err) {
+            const error = err;
+            const errorName = error.name ?? '';
+            const errorMessage = error.message ?? '';
+            // If user canceled, skip silently without showing error
+            if (errorName === 'PasskeyRegistrationCanceled' ||
+                errorName === 'NotAllowedError' ||
+                errorMessage.includes('canceled') ||
+                errorMessage.includes('cancelled') ||
+                errorMessage.includes('ceremony has been canceled') ||
+                errorMessage.includes('not allowed')) {
+                handleSkip();
+                return;
+            }
+            // Show user-friendly error message
+            setError(getPasskeyRegistrationFailedText());
+        }
+        finally {
+            setIsRegistering(false);
+        }
+    }, [handleSkip]);
+    if (success) {
+        return (React__namespace["default"].createElement(RouteContainer, { className: className, variation: variation },
+            React__namespace["default"].createElement(Field.Flex, { direction: "column", padding: "large", "data-amplify-authenticator-passkeyprompt": "" },
+                React__namespace["default"].createElement(Field.Flex, { direction: "column", gap: "xs" },
+                    React__namespace["default"].createElement(Field.IconCheckCircleFill, { className: "amplify-authenticator__passkey-success-icon" }),
+                    React__namespace["default"].createElement(Heading, { level: 4 }, getPasskeyCreatedSuccessText()),
+                    React__namespace["default"].createElement(Field.Text, null, getPasskeyRegisteredText())),
+                credentials.length > 0 && (React__namespace["default"].createElement(Field.View, { marginTop: "large" },
+                    React__namespace["default"].createElement(Heading, { level: 5 }, getExistingPasskeysText()),
+                    React__namespace["default"].createElement(Field.Flex, { direction: "column", gap: "xs", marginTop: "xs" }, credentials.map((cred, index) => (React__namespace["default"].createElement(Field.View, { key: cred.credentialId, className: "amplify-authenticator__passkey-credential-item" },
+                        React__namespace["default"].createElement(Field.Text, { fontSize: "small" }, cred.friendlyCredentialName ??
+                            `${getPasskeyLabelText()} ${index + 1}`))))))),
+                React__namespace["default"].createElement(Field.Flex, { direction: "column", gap: "medium", marginTop: "large" },
+                    React__namespace["default"].createElement(Field.Button, { onClick: () => {
+                            setSuccess(false);
+                            handleRegister();
+                        }, variation: "link" }, getSetupAnotherPasskeyText()),
+                    React__namespace["default"].createElement(Field.Button, { onClick: () => handleContinue(), variation: "primary", isFullWidth: true }, getContinueText())))));
+    }
+    const isButtonDisabled = isPending || isRegistering;
+    return (React__namespace["default"].createElement(RouteContainer, { className: className, variation: variation },
+        React__namespace["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-passkeyprompt": "" },
+            React__namespace["default"].createElement(Field.Flex, { direction: "column", gap: "medium" },
+                React__namespace["default"].createElement(Heading, { level: 4 }, getPasskeyPromptHeadingText()),
+                React__namespace["default"].createElement(Field.Text, null, getPasskeyPromptDescriptionText()),
+                React__namespace["default"].createElement(Field.Flex, { justifyContent: "center" },
+                    React__namespace["default"].createElement(Field.IconPasskey, { className: "amplify-authenticator__passkey-icon" })),
+                React__namespace["default"].createElement(Field.Flex, { direction: "column", gap: "medium" },
+                    React__namespace["default"].createElement(Field.Button, { onClick: () => void handleRegister(), variation: "primary", isDisabled: isButtonDisabled, isLoading: isRegistering, loadingText: getRegisteringText() }, getCreatePasskeyText()),
+                    React__namespace["default"].createElement(Field.Button, { onClick: handleSkip, variation: "link", isDisabled: isButtonDisabled }, getContinueWithoutPasskeyText()),
+                    error && (React__namespace["default"].createElement(Field.Text, { className: "amplify-authenticator__passkey-error" }, error)),
+                    React__namespace["default"].createElement(RemoteErrorMessage, null))))));
+}
+
 function RenderNothing() {
     // @ts-ignore
     return null;
@@ -3355,6 +3619,10 @@ const getRouteComponent = (route) => {
         case 'signIn':
         case 'signUp':
             return SignInSignUpTabs;
+        case 'signInSelectAuthFactor':
+            return SignInSelectAuthFactor;
+        case 'passkeyPrompt':
+            return PasskeyPrompt;
         case 'forceNewPassword':
             return ForceNewPassword;
         case 'forgotPassword':
@@ -3441,7 +3709,7 @@ const defaultComponents = {
 // which allows the `Authenticator` to just return `children` if a user is authenticated.
 // Once the `Provider` is removed from the `Authenticator` component and exported as
 // `AuthenticatorProvider`, this component should be renamed to `Authenticator`.
-function AuthenticatorInternal({ children, className, components: customComponents, formFields, hideSignUp, initialState, loginMechanisms, passwordSettings, signUpAttributes, services, socialProviders, variation, }) {
+function AuthenticatorInternal({ children, className, components: customComponents, formFields, hideSignUp, initialState, loginMechanisms, passwordSettings, passwordless, signUpAttributes, services, socialProviders, variation, }) {
     Field.useDeprecationWarning({
         message: 'The `passwordSettings` prop has been deprecated and will be removed in a future major version of Amplify UI.',
         // shouldWarn: !!passwordSettings,
@@ -3455,6 +3723,7 @@ function AuthenticatorInternal({ children, className, components: customComponen
         initialState,
         loginMechanisms,
         passwordSettings,
+        passwordless,
         services,
         signUpAttributes,
         socialProviders,

package/dist/internal.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Field = require('./Field-BjInyX0G.js');
+var Field = require('./Field-Cq088Vbv.js');
 var React = require('react');
 var Storage = require('aws-amplify/storage');
 var ui = require('@aws-amplify/ui');
@@ -17129,6 +17129,7 @@ exports.FileSelect = Field.FileSelect;
 exports.IconAdd = Field.IconAdd;
 exports.IconCheck = Field.IconCheck;
 exports.IconCheckCircle = Field.IconCheckCircle;
+exports.IconCheckCircleFill = Field.IconCheckCircleFill;
 exports.IconChevronLeft = Field.IconChevronLeft;
 exports.IconChevronRight = Field.IconChevronRight;
 exports.IconClose = Field.IconClose;
@@ -17137,6 +17138,7 @@ exports.IconExpandMore = Field.IconExpandMore;
 exports.IconIndeterminate = Field.IconIndeterminate;
 exports.IconInfo = Field.IconInfo;
 exports.IconMenu = Field.IconMenu;
+exports.IconPasskey = Field.IconPasskey;
 exports.IconRemove = Field.IconRemove;
 exports.IconSearch = Field.IconSearch;
 exports.IconStar = Field.IconStar;

package/dist/styles/StorageBrowser.css

@@ -384,7 +384,6 @@
   animation-timing-function: linear;
   animation-name: spin;
 }
-
 @keyframes spin {
   0% {
     transform: rotate(0deg);

package/dist/styles/StorageBrowser.layer.css

@@ -385,7 +385,6 @@
   animation-timing-function: linear;
   animation-name: spin;
 }
-
 @keyframes spin {
   0% {
     transform: rotate(0deg);

package/dist/styles/authenticator.css

@@ -69,4 +69,21 @@
 .amplify-authenticator__federated-button {
   font-weight: normal;
   gap: var(--amplify-space-medium);
+}
+
+[data-amplify-authenticator-passkeyprompt] .amplify-authenticator__passkey-success-icon {
+  font-size: var(--amplify-font-sizes-xxxl);
+  color: var(--amplify-colors-green-60, #34a853);
+}
+[data-amplify-authenticator-passkeyprompt] .amplify-authenticator__passkey-credential-item {
+  padding: var(--amplify-space-medium);
+  background-color: var(--amplify-colors-background-secondary);
+  border-radius: var(--amplify-radii-small);
+}
+[data-amplify-authenticator-passkeyprompt] .amplify-authenticator__passkey-error {
+  color: var(--amplify-colors-font-error);
+  margin-top: var(--amplify-space-small);
+}
+[data-amplify-authenticator-passkeyprompt] .amplify-authenticator__passkey-icon {
+  font-size: var(--amplify-components-authenticator-passkey-icon-size, 12rem);
 }

package/dist/styles/authenticator.layer.css

@@ -71,4 +71,21 @@
   font-weight: normal;
   gap: var(--amplify-space-medium);
 }
+
+[data-amplify-authenticator-passkeyprompt] .amplify-authenticator__passkey-success-icon {
+  font-size: var(--amplify-font-sizes-xxxl);
+  color: var(--amplify-colors-green-60, #34a853);
+}
+[data-amplify-authenticator-passkeyprompt] .amplify-authenticator__passkey-credential-item {
+  padding: var(--amplify-space-medium);
+  background-color: var(--amplify-colors-background-secondary);
+  border-radius: var(--amplify-radii-small);
+}
+[data-amplify-authenticator-passkeyprompt] .amplify-authenticator__passkey-error {
+  color: var(--amplify-colors-font-error);
+  margin-top: var(--amplify-space-small);
+}
+[data-amplify-authenticator-passkeyprompt] .amplify-authenticator__passkey-icon {
+  font-size: var(--amplify-components-authenticator-passkey-icon-size, 12rem);
+}
 }