diff --git a/.changeset/heavy-wombats-sing.md b/.changeset/heavy-wombats-sing.md new file mode 100644 index 00000000000..38542d2aea9 --- /dev/null +++ b/.changeset/heavy-wombats-sing.md @@ -0,0 +1,6 @@ +--- +"@clerk/clerk-js": patch +"@clerk/types": patch +--- + +Allow users to display the email address field after selecting to input a phone number. Previously that was not possible when passkeys were enabled. (v4) diff --git a/packages/clerk-js/src/ui/common/constants.ts b/packages/clerk-js/src/ui/common/constants.ts index a4e9d3165b7..7d33d9be654 100644 --- a/packages/clerk-js/src/ui/common/constants.ts +++ b/packages/clerk-js/src/ui/common/constants.ts @@ -45,7 +45,8 @@ const FirstFactorConfigs = Object.freeze({ export type SignInStartIdentifier = 'email_address' | 'username' | 'phone_number' | 'email_address_username'; export const groupIdentifiers = (attributes: Attribute[]): SignInStartIdentifier[] => { - let newAttributes: string[] = [...attributes]; + // Always skip passkey, while passkey can be considered an identifier we want to exclude it in the UI we are delivering + let newAttributes: string[] = [...attributes.filter(a => a !== 'passkey')]; //merge email_address and username attributes if (['email_address', 'username'].every(r => newAttributes.includes(r))) { newAttributes = newAttributes.filter(a => !['email_address', 'username'].includes(a)); diff --git a/packages/types/src/userSettings.ts b/packages/types/src/userSettings.ts index efd7cb35bdd..e5b917b227d 100644 --- a/packages/types/src/userSettings.ts +++ b/packages/types/src/userSettings.ts @@ -11,7 +11,8 @@ export type Attribute = | 'password' | 'web3_wallet' | 'authenticator_app' - | 'backup_code'; + | 'backup_code' + | 'passkey'; export type VerificationStrategy = 'email_link' | 'email_code' | 'phone_code' | 'totp' | 'backup_code';