feat(clerk-js): Start with phone input if the only sign in initial va…

…lue is the phone number (#1861)

.changeset/large-rockets-return.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+The sign-in form will now switch to the phone input if the only initial value provided was that of the phone number.

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

@@ -45,7 +45,14 @@ export function _SignInStart(): JSX.Element {
     () => groupIdentifiers(userSettings.enabledFirstFactorIdentifiers),
     [userSettings.enabledFirstFactorIdentifiers],
   );
-  const [identifierAttribute, setIdentifierAttribute] = useState<SignInStartIdentifier>(identifierAttributes[0] || '');
+
+  const onlyPhoneNumberInitialValueExists =
+    !!ctx.initialValues?.phoneNumber && !(ctx.initialValues.emailAddress || ctx.initialValues.username);
+  const shouldStartWithPhoneNumberIdentifier =
+    onlyPhoneNumberInitialValueExists && identifierAttributes.includes('phone_number');
+  const [identifierAttribute, setIdentifierAttribute] = useState<SignInStartIdentifier>(
+    shouldStartWithPhoneNumberIdentifier ? 'phone_number' : identifierAttributes[0] || '',
+  );
   const [hasSwitchedByAutofill, setHasSwitchedByAutofill] = useState(false);
 
   const organizationTicket = getClerkQueryParam('__clerk_ticket') || '';