From cf576c00bf2871cef69b7c8d343ceb1341615bc9 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Mon, 29 Apr 2024 20:58:35 +0300
Subject: [PATCH] fix(clerk-js): Passkeys should not be a candidate for the
 dynamic field

---
 .changeset/calm-starfishes-divide.md               |  5 +++++
 packages/clerk-js/src/ui/common/constants.ts       |  4 +++-
 .../SignIn/__tests__/SignInStart.test.tsx          | 14 ++++++++++++++
 3 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/calm-starfishes-divide.md

diff --git a/.changeset/calm-starfishes-divide.md b/.changeset/calm-starfishes-divide.md
new file mode 100644
index 00000000000..99fa401dd3d
--- /dev/null
+++ b/.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.
diff --git a/packages/clerk-js/src/ui/common/constants.ts b/packages/clerk-js/src/ui/common/constants.ts
index 37a7cf642ba..f14f0e8af8f 100644
--- a/packages/clerk-js/src/ui/common/constants.ts
+++ b/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));
diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInStart.test.tsx b/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInStart.test.tsx
index 71660d4d20f..b0f2d61ac53 100644
--- a/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInStart.test.tsx
+++ b/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 => {