From fbb9e0da4fe87e9bb79db1a841e48ef949278bf0 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 17 Dec 2024 17:06:41 -0500 Subject: [PATCH] feat(clerk-js): Support collecting optional fields in combined flow (#4795) --- .changeset/twelve-goats-shake.md | 5 +++++ .../SignIn/handleCombinedFlowTransfer.ts | 21 ++++++++++++++++--- 2 files changed, 23 insertions(+), 3 deletions(-) create mode 100644 .changeset/twelve-goats-shake.md diff --git a/.changeset/twelve-goats-shake.md b/.changeset/twelve-goats-shake.md new file mode 100644 index 0000000000..7e5b9d9922 --- /dev/null +++ b/.changeset/twelve-goats-shake.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Redirect to sign up start step within combined flow when there are optional fields. diff --git a/packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts b/packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts index 0a883497b9..bad25a763d 100644 --- a/packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts +++ b/packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts @@ -1,4 +1,4 @@ -import type { LoadedClerk, SignUpModes } from '@clerk/types'; +import type { LoadedClerk, SignUpModes, SignUpResource } from '@clerk/types'; import { SIGN_UP_MODES } from '../../../core/constants'; import { completeSignUpFlow } from '../SignUp/util'; @@ -51,9 +51,12 @@ export function handleCombinedFlowTransfer({ paramsToForward.set('__clerk_ticket', organizationTicket); } - // Attempt to transfer directly to sign up verification if email or phone was used. The signUp.create() call will + // Attempt to transfer directly to sign up verification if email or phone was used and there are no optional fields. The signUp.create() call will // inform us if the instance is eligible for moving directly to verification. - if (identifierAttribute === 'emailAddress' || identifierAttribute === 'phoneNumber') { + if ( + (!hasOptionalFields(clerk.client.signUp) && identifierAttribute === 'emailAddress') || + identifierAttribute === 'phoneNumber' + ) { return clerk.client.signUp .create({ [identifierAttribute]: identifierValue, @@ -74,3 +77,15 @@ export function handleCombinedFlowTransfer({ return navigate(`create?${paramsToForward.toString()}`); } + +function hasOptionalFields(signUp: SignUpResource) { + const filteredFields = signUp.optionalFields.filter( + field => + !field.startsWith('oauth_') && + !field.startsWith('web3_') && + field !== 'password' && + field !== 'enterprise_sso' && + field !== 'saml', + ); + return filteredFields.length > 0; +}