fix(clerk-js): Passkeys should not be a candidate for the dynamic field

.changeset/calm-starfishes-divide.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': 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.

packages/clerk-js/src/ui/common/constants.ts

@@ -44,7 +44,9 @@ 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));

packages/clerk-js/src/ui/components/SignIn/__tests__/SignInStart.test.tsx

@@ -58,6 +58,20 @@ describe('SignInStart', () => {
       screen.getByText(/email address or username/i);
     });
 
+    it('passkeys shall not interfere with dynamic field when email address and phone number is enabled', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withPhoneNumber();
+        f.withEmailAddress();
+        f.withPasskey();
+      });
+      const { userEvent } = render(<SignInStart />, { wrapper });
+      screen.getByText(/email address/i);
+      await userEvent.click(screen.getByText(/use phone/i));
+      screen.getByText(/phone number/i);
+      await userEvent.click(screen.getByText(/use email/i));
+      screen.getByText(/email address/i);
+    });
+
     mockWebAuthn(() => {
       it('enables login with passkey via dedicated button', async () => {
         const { wrapper } = await createFixtures(f => {