From c04ad94b1dd58fe4b59333b76a3988b1811d5cc2 Mon Sep 17 00:00:00 2001 From: George Desipris <73396808+desiprisg@users.noreply.github.com> Date: Thu, 12 Oct 2023 05:05:12 +0300 Subject: [PATCH] feat(clerk-js): Start with phone input if the only sign in initial value is the phone number (#1861) --- .changeset/large-rockets-return.md | 5 +++++ .../clerk-js/src/ui/components/SignIn/SignInStart.tsx | 9 ++++++++- 2 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 .changeset/large-rockets-return.md diff --git a/.changeset/large-rockets-return.md b/.changeset/large-rockets-return.md new file mode 100644 index 0000000000..0be182a611 --- /dev/null +++ b/.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. diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx index 3a38697453..03bb13750e 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx +++ b/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(identifierAttributes[0] || ''); + + const onlyPhoneNumberInitialValueExists = + !!ctx.initialValues?.phoneNumber && !(ctx.initialValues.emailAddress || ctx.initialValues.username); + const shouldStartWithPhoneNumberIdentifier = + onlyPhoneNumberInitialValueExists && identifierAttributes.includes('phone_number'); + const [identifierAttribute, setIdentifierAttribute] = useState( + shouldStartWithPhoneNumberIdentifier ? 'phone_number' : identifierAttributes[0] || '', + ); const [hasSwitchedByAutofill, setHasSwitchedByAutofill] = useState(false); const organizationTicket = getClerkQueryParam('__clerk_ticket') || '';