@aws-amplify/ui 6.12.1 → 6.14.0

package/dist/esm/helpers/authenticator/facade.mjs

@@ -27,8 +27,10 @@ const getSendEventAliases = (send) => {
     return {
         initializeMachine: sendToMachine('INIT'),
         resendCode: sendToMachine('RESEND'),
+        selectAuthMethod: sendToMachine('SELECT_METHOD'),
         signOut: sendToMachine('SIGN_OUT'),
         submitForm: sendToMachine('SUBMIT'),
+        toShowAuthMethods: sendToMachine('SHOW_AUTH_METHODS'),
         updateForm: sendToMachine('CHANGE'),
         updateBlur: sendToMachine('BLUR'),
         // Actions that don't immediately invoke a service but instead transition to a screen
@@ -53,8 +55,9 @@ const getNextSendEventAliases = (send) => {
 };
 const getServiceContextFacade = (state) => {
     const actorContext = (getActorContext(state) ?? {});
-    const { allowedMfaTypes, challengeName, codeDeliveryDetails, remoteError: error, validationError: validationErrors, totpSecretCode = null, unverifiedUserAttributes, username, } = actorContext;
-    const { socialProviders = [] } = state.context?.config ?? {};
+    const { allowedMfaTypes, availableAuthMethods, challengeName, codeDeliveryDetails, preferredChallenge, remoteError: error, selectedAuthMethod, validationError: validationErrors, totpSecretCode = null, unverifiedUserAttributes, username, } = actorContext;
+    const { socialProviders = [], loginMechanisms } = state.context?.config ?? {};
+    const loginMechanism = loginMechanisms?.[0];
     // check for user in actorContext prior to state context. actorContext is more "up to date",
     // but is not available on all states
     const user = actorContext?.user ?? state.context?.user;
@@ -78,12 +81,16 @@ const getServiceContextFacade = (state) => {
     const facade = {
         allowedMfaTypes,
         authStatus,
+        availableAuthMethods,
         challengeName,
         codeDeliveryDetails,
         error,
         hasValidationErrors,
         isPending,
+        loginMechanism,
+        preferredChallenge,
         route,
+        selectedAuthMethod,
         socialProviders,
         totpSecretCode,
         unverifiedUserAttributes,

package/dist/esm/helpers/authenticator/formFields/defaults.mjs

@@ -32,16 +32,32 @@ const getConfirmationCodeFormFields = (_) => ({
         placeholder: 'Code',
     },
 });
-const getSignInFormFields = (state) => ({
-    username: { ...getAliasDefaultFormField(state) },
-    password: {
-        ...getDefaultFormField('password'),
-        autocomplete: 'current-password',
-    },
-});
+const getSignInFormFields = (state) => {
+    const actorContext = state.context.actorRef?.getSnapshot()?.context;
+    const availableAuthMethods = actorContext?.availableAuthMethods;
+    const preferredChallenge = actorContext?.preferredChallenge;
+    const shouldShowPassword = !availableAuthMethods?.length ||
+        (availableAuthMethods.length === 1 &&
+            availableAuthMethods[0] === 'PASSWORD') ||
+        (availableAuthMethods.length > 1 &&
+            (!preferredChallenge || preferredChallenge === 'PASSWORD'));
+    const fields = {
+        username: { ...getAliasDefaultFormField(state) },
+    };
+    if (shouldShowPassword) {
+        fields.password = {
+            ...getDefaultFormField('password'),
+            autocomplete: 'current-password',
+        };
+    }
+    return fields;
+};
 const getSignUpFormFields = (state) => {
     const { loginMechanisms, signUpAttributes } = state.context.config;
     const primaryAlias = getPrimaryAlias(state);
+    const actorContext = state.context.actorRef?.getSnapshot()?.context;
+    const availableAuthMethods = actorContext?.availableAuthMethods;
+    const hasMultipleMethods = availableAuthMethods && availableAuthMethods.length > 1;
     /**
      * @migration signUp Fields created here
      */
@@ -57,7 +73,17 @@ const getSignUpFormFields = (state) => {
             const fieldAttrs = fieldName === primaryAlias
                 ? getAliasDefaultFormField(state)
                 : getDefaultFormField(fieldName);
-            formField[fieldName] = { ...fieldAttrs };
+            // Make email, phone_number, password, and confirm_password optional when multiple auth methods available
+            // Validation will check based on selected method
+            const isOptional = hasMultipleMethods &&
+                (fieldName === 'email' ||
+                    fieldName === 'phone_number' ||
+                    fieldName === 'password' ||
+                    fieldName === 'confirm_password');
+            formField[fieldName] = {
+                ...fieldAttrs,
+                ...(isOptional && { isRequired: false }),
+            };
         }
         else {
             // There's a `custom:*` attribute or one we don't already have an implementation for

package/dist/esm/helpers/authenticator/getRoute.mjs

@@ -27,6 +27,14 @@ const getRoute = (state, actorState) => {
         case actorState?.matches('setupTotp.edit'):
         case actorState?.matches('setupTotp.submit'):
             return 'setupTotp';
+        case actorState?.matches('signIn.submit'):
+            return actorState?.context.selectedAuthMethod != null
+                ? 'signInSelectAuthFactor'
+                : 'signIn';
+        case actorState?.matches('signIn.selectMethod'):
+            return 'signInSelectAuthFactor';
+        case actorState?.matches('passkeyPrompt'):
+            return 'passkeyPrompt';
         case actorState?.matches('signIn'):
             return 'signIn';
         case actorState?.matches('signUp'):

package/dist/esm/helpers/authenticator/textUtil.mjs

@@ -65,6 +65,17 @@ const getSelectMfaTypeByChallengeName = (challengeName) => {
     }
     return translate(DefaultTexts.MFA_SELECTION);
 };
+const getUsernameLabelByLoginMechanism = (loginMechanism) => {
+    switch (loginMechanism) {
+        case 'email':
+            return translate(DefaultTexts.EMAIL_ADDRESS);
+        case 'phone_number':
+            return translate(DefaultTexts.PHONE_NUMBER);
+        case 'username':
+        default:
+            return translate(DefaultTexts.USERNAME);
+    }
+};
 const getMfaTypeLabelByValue = (mfaType) => {
     switch (mfaType) {
         case 'EMAIL':
@@ -84,6 +95,7 @@ const authenticatorTextUtil = {
     getChangingText: () => translate(DefaultTexts.CHANGING_PASSWORD),
     getConfirmText: () => translate(DefaultTexts.CONFIRM),
     getConfirmingText: () => translate(DefaultTexts.CONFIRMING),
+    getContinueText: () => translate(DefaultTexts.CONTINUE),
     getCopyText: () => translate(DefaultTexts.UPPERCASE_COPY),
     getHidePasswordText: () => translate(DefaultTexts.HIDE_PASSWORD),
     getLoadingText: () => translate(DefaultTexts.LOADING),
@@ -106,6 +118,9 @@ const authenticatorTextUtil = {
     /** SignUp */
     getCreatingAccountText: () => translate(DefaultTexts.CREATING_ACCOUNT),
     getCreateAccountText: () => translate(DefaultTexts.CREATE_ACCOUNT),
+    getCreateAccountWithEmailText: () => translate(DefaultTexts.CREATE_ACCOUNT_WITH_EMAIL_OTP),
+    getCreateAccountWithPasswordText: () => translate(DefaultTexts.CREATE_ACCOUNT_WITH_PASSWORD),
+    getCreateAccountWithSmsText: () => translate(DefaultTexts.CREATE_ACCOUNT_WITH_SMS_OTP),
     /** ConfirmSignUp */
     getDeliveryMessageText,
     getDeliveryMethodText,
@@ -132,6 +147,25 @@ const authenticatorTextUtil = {
     getVerifyText: () => translate(DefaultTexts.VERIFY),
     getVerifyContactText: () => translate(DefaultTexts.VERIFY_CONTACT),
     getAccountRecoveryInfoText: () => translate(DefaultTexts.VERIFY_HEADING),
+    /** Passwordless */
+    getPasskeyPromptHeadingText: () => translate(DefaultTexts.PASSKEY_PROMPT_HEADING),
+    getPasskeyPromptDescriptionText: () => translate(DefaultTexts.PASSKEY_PROMPT_DESCRIPTION),
+    getCreatePasskeyText: () => translate(DefaultTexts.CREATE_PASSKEY),
+    getRegisteringText: () => translate(DefaultTexts.REGISTERING),
+    getContinueWithoutPasskeyText: () => translate(DefaultTexts.CONTINUE_WITHOUT_PASSKEY),
+    getPasskeyCreatedSuccessText: () => translate(DefaultTexts.PASSKEY_CREATED_SUCCESS),
+    getPasskeyRegisteredText: () => translate(DefaultTexts.PASSKEY_REGISTERED),
+    getPasskeyRegistrationFailedText: () => translate(DefaultTexts.PASSKEY_REGISTRATION_FAILED),
+    getPasskeyLabelText: () => translate(DefaultTexts.PASSKEY_LABEL),
+    getExistingPasskeysText: () => translate(DefaultTexts.EXISTING_PASSKEYS),
+    getSetupAnotherPasskeyText: () => translate(DefaultTexts.SETUP_ANOTHER_PASSKEY),
+    getSignInWithPasswordText: () => translate(DefaultTexts.SIGN_IN_WITH_PASSWORD),
+    getSignInWithEmailText: () => translate(DefaultTexts.SIGN_IN_WITH_EMAIL),
+    getSignInWithSmsText: () => translate(DefaultTexts.SIGN_IN_WITH_SMS),
+    getSignInWithPasskeyText: () => translate(DefaultTexts.SIGN_IN_WITH_PASSKEY),
+    getOtherSignInOptionsText: () => translate(DefaultTexts.OTHER_SIGN_IN_OPTIONS),
+    getEnterUsernameFirstText: () => translate(DefaultTexts.ENTER_USERNAME_FIRST),
+    getUsernameLabelByLoginMechanism,
     /** Validations */
     // TODO: add defaultText
     getInvalidEmailText: () => translate('Please enter a valid email'),

package/dist/esm/i18n/dictionaries/authenticator/defaultTexts.mjs

@@ -22,7 +22,13 @@ const defaultTexts = {
     CONFIRM: 'Confirm',
     CONFIRMATION_CODE: 'Confirmation Code',
     CONFIRMING: 'Confirming',
+    CONTINUE: 'Continue',
+    CONTINUE_WITHOUT_PASSKEY: 'Continue without a Passkey',
     CREATE_ACCOUNT: 'Create Account',
+    CREATE_ACCOUNT_WITH_EMAIL_OTP: 'Create account with Email OTP',
+    CREATE_ACCOUNT_WITH_PASSWORD: 'Create account with Password',
+    CREATE_ACCOUNT_WITH_SMS_OTP: 'Create account with SMS OTP',
+    CREATE_PASSKEY: 'Create a Passkey',
     CREATING_ACCOUNT: 'Creating Account',
     EMAIL_ADDRESS: 'Email',
     EMAIL_OTP: 'Email Message',
@@ -39,6 +45,8 @@ const defaultTexts = {
     ENTER_PHONE_NUMBER: 'Enter your Phone Number',
     ENTER_PREFERRED_USERNAME: 'Enter your Preferred Username',
     ENTER_USERNAME: 'Enter your username',
+    ENTER_USERNAME_FIRST: 'Please enter your username first',
+    EXISTING_PASSKEYS: 'Existing Passkeys',
     FAMILY_NAME: 'Family Name',
     GIVEN_NAME: 'Given Name',
     FORGOT_PASSWORD: 'Forgot Password?',
@@ -53,16 +61,30 @@ const defaultTexts = {
     NICKNAME: 'Nickname',
     NEW_PASSWORD: 'New password',
     OR: 'or',
+    OTHER_SIGN_IN_OPTIONS: 'Other sign-in options',
+    PASSKEY_AUTHENTICATION_CANCELED: 'Passkey authentication was canceled. Please try again or use a different sign-in method.',
+    PASSKEY_CREATED_SUCCESS: 'Passkey created successfully!',
+    PASSKEY_LABEL: 'Passkey',
+    PASSKEY_PROMPT_DESCRIPTION: 'Passkeys are WebAuthn credentials that validate your identity using biometric data like touch or facial recognition or device authentication like passwords or PINs, serving as a secure password replacement.',
+    PASSKEY_PROMPT_HEADING: 'Sign in faster with Passkey',
+    PASSKEY_REGISTERED: 'Your passkey has been successfully registered.',
+    PASSKEY_REGISTRATION_FAILED: 'Failed to create passkey. Please try again.',
     PASSWORD: 'Password',
+    PASSWORDLESS_NOT_ENABLED: 'Passwordless authentication is not enabled for this account. Please contact your administrator or use password sign-in.',
     PHONE_NUMBER: 'Phone Number',
     PREFERRED_USERNAME: 'Preferred Username',
     PROFILE: 'Profile',
+    REGISTERING: 'Registering',
     RESEND_CODE: 'Resend Code',
     RESET_PASSWORD_HEADING: 'Reset your password',
     RESET_PASSWORD: 'Reset Password',
     SEND_CODE: 'Send code',
+    CODE_DELIVERY_FAILED: 'Unable to send verification code. Please try again.',
+    VERIFICATION_CODE_EXPIRED: 'Your verification code has expired. Please request a new code.',
+    VERIFICATION_CODE_INVALID: 'The verification code you entered is incorrect. Please try again.',
     SENDING: 'Sending',
     SELECT_MFA_TYPE: 'Select MFA Type',
+    SETUP_ANOTHER_PASSKEY: 'Setup another Passkey',
     SETUP_EMAIL: 'Setup Email',
     SETUP_TOTP: 'Setup TOTP',
     SHOW_PASSWORD: 'Show password',
@@ -70,8 +92,12 @@ const defaultTexts = {
     SIGN_IN_TAB: 'Sign In',
     SIGN_IN_WITH_AMAZON: 'Sign In with Amazon',
     SIGN_IN_WITH_APPLE: 'Sign In with Apple',
+    SIGN_IN_WITH_EMAIL: 'Sign In with Email',
     SIGN_IN_WITH_FACEBOOK: 'Sign In with Facebook',
     SIGN_IN_WITH_GOOGLE: 'Sign In with Google',
+    SIGN_IN_WITH_PASSKEY: 'Sign In with Passkey',
+    SIGN_IN_WITH_PASSWORD: 'Sign In with Password',
+    SIGN_IN_WITH_SMS: 'Sign In with SMS',
     SIGN_IN: 'Sign in to your account',
     SIGN_UP_BUTTON: 'Create a new account',
     SIGNING_IN_BUTTON: 'Signing in',
@@ -81,6 +107,7 @@ const defaultTexts = {
     SUBMITTING: 'Submitting',
     SOFTWARE_TOKEN_MFA: 'Authenticator App (TOTP)',
     UPPERCASE_COPY: 'COPY',
+    USERNAME: 'Username',
     VERIFY_CONTACT: 'Verify Contact',
     VERIFY_HEADING: 'Account recovery requires verified contact information',
     VERIFY: 'Verify',

package/dist/esm/i18n/dictionaries/authenticator/es.mjs

@@ -92,7 +92,7 @@ const esDict = {
     'Sign Up with Google': 'Crear cuenta con Google',
     'Sign Up': 'Crear cuenta',
     'User already exists': 'El usuario ya existe',
-    'User does not exist': 'El usuario no existe',
+    'User does not exist.': 'El usuario no existe',
     'Username/client id combination not found.': 'El usuario no existe',
     'Username cannot be empty': 'El nombre de usuario no puede estar vacío',
     'Your passwords must match': 'Las contraseñas deben coincidir',

package/dist/esm/i18n/dictionaries/authenticator/fr.mjs

@@ -111,7 +111,7 @@ const frDict = {
     'Sign Up': "S'inscrire",
     SMS: 'SMS',
     'User already exists': "L'utilisateur existe déjà",
-    'User does not exist': "L'utilisateur n'existe pas",
+    'User does not exist.': "L'utilisateur n'existe pas",
     'Username cannot be empty': "Le nom d'utilisateur doit être renseigné",
     'Username/client id combination not found.': "L'utilisateur n'existe pas",
     'We Emailed You': 'Nous vous avons envoyé un code',

package/dist/esm/machines/authenticator/actions.mjs

@@ -2,6 +2,7 @@ import { actions } from 'xstate';
 import '@aws-amplify/core/internals/utils';
 import 'aws-amplify/utils';
 import '../../utils/setUserAgent/constants.mjs';
+import { translate, DefaultTexts } from '../../i18n/translations.mjs';
 import '../../types/authenticator/user.mjs';
 import '../../types/authenticator/attributes.mjs';
 import { trimValues } from '../../helpers/authenticator/utils.mjs';
@@ -14,7 +15,12 @@ const clearActorDoneData = assign({ actorDoneData: undefined });
 const clearChallengeName = assign({ challengeName: undefined });
 const clearMissingAttributes = assign({ missingAttributes: undefined });
 const clearError = assign({ remoteError: undefined });
-const clearFormValues = assign({ formValues: {} });
+const clearFormValues = assign({
+    formValues: (context) => ({
+        // Preserve username for passwordless flows to avoid "username is required" errors
+        username: context.formValues?.username,
+    }),
+});
 const clearTouched = assign({ touched: {} });
 const clearUser = assign({ user: undefined });
 const clearValidationError = assign({ validationError: {} });
@@ -115,7 +121,28 @@ const setRemoteError = assign({
         if (data.name === 'NoUserPoolError') {
             return `Configuration error (see console) – please contact the administrator`;
         }
-        return data?.message || data;
+        const message = data?.message || '';
+        // Handle USER_AUTH flow not enabled error
+        if (message.includes('USER_AUTH flow not enabled')) {
+            return translate(DefaultTexts.PASSWORDLESS_NOT_ENABLED);
+        }
+        // Handle cannot send code error
+        if (message.includes('Cannot send code to either')) {
+            return translate(DefaultTexts.CODE_DELIVERY_FAILED);
+        }
+        // Handle invalid/wrong verification code
+        if (message.includes('Invalid code or auth state')) {
+            return translate(DefaultTexts.VERIFICATION_CODE_INVALID);
+        }
+        // Handle expired verification code
+        if (message.includes('session is expired')) {
+            return translate(DefaultTexts.VERIFICATION_CODE_EXPIRED);
+        }
+        // Handle passkey authentication canceled
+        if (message.includes('ceremony has been canceled')) {
+            return translate(DefaultTexts.PASSKEY_AUTHENTICATION_CANCELED);
+        }
+        return message || data;
     },
 });
 const setUser = assign({ user: (_, { data }) => data });
@@ -152,8 +179,12 @@ const handleBlur = assign({
     }),
 });
 const setUnverifiedUserAttributes = assign({
-    unverifiedUserAttributes: (_, { data }) => {
-        const { email, phone_number } = data;
+    unverifiedUserAttributes: (context, { data }) => {
+        // Use fetchedUserAttributes from context if data is not provided
+        const attributes = data || context.fetchedUserAttributes;
+        if (!attributes)
+            return {};
+        const { email, phone_number } = attributes;
         const unverifiedUserAttributes = {
             ...(email && { email }),
             ...(phone_number && { phone_number }),
@@ -167,11 +198,34 @@ const setSelectedUserAttribute = assign({
 });
 // Maps to unexposed `ConfirmSignUpSignUpStep`
 const setConfirmSignUpSignUpStep = assign({ step: 'CONFIRM_SIGN_UP' });
+// Passwordless actions
+const setSelectedAuthMethod = assign({
+    selectedAuthMethod: (_, { data }) => data.method,
+});
+const setSelectedAuthMethodFromForm = assign({
+    selectedAuthMethod: (_, { data }) => {
+        // Extract method from form data if present, default to PASSWORD for form submissions
+        return data?.__authMethod || 'PASSWORD';
+    },
+});
+const setSelectAuthMethodStep = assign({
+    step: 'SELECT_AUTH_METHOD',
+});
+const setFetchedUserAttributes = assign({
+    fetchedUserAttributes: (_, event) => event.data,
+});
+const setHasExistingPasskeys = assign({
+    hasExistingPasskeys: (_, event) => event.data,
+});
+const clearHasExistingPasskeys = assign({
+    hasExistingPasskeys: false,
+});
 const ACTIONS = {
     clearActorDoneData,
     clearChallengeName,
     clearError,
     clearFormValues,
+    clearHasExistingPasskeys,
     clearMissingAttributes,
     clearSelectedUserAttribute,
     clearTouched,
@@ -183,7 +237,9 @@ const ACTIONS = {
     setAllowedMfaTypes,
     setChallengeName,
     setCodeDeliveryDetails,
+    setFetchedUserAttributes,
     setFieldErrors,
+    setHasExistingPasskeys,
     setMissingAttributes,
     setNextResetPasswordStep,
     setNextSignInStep,
@@ -191,6 +247,9 @@ const ACTIONS = {
     setRemoteError,
     setConfirmAttributeCompleteStep,
     setConfirmSignUpSignUpStep,
+    setSelectAuthMethodStep,
+    setSelectedAuthMethod,
+    setSelectedAuthMethodFromForm,
     setShouldVerifyUserAttributeStep,
     setSelectedUserAttribute,
     setSignInStep,