Navigate to /continue route based on missing_requirements status

Author: LauraBeatris

.changeset/silly-zoos-decide.md

@@ -2,4 +2,6 @@
 '@clerk/clerk-js': patch
 ---
 
-Fix sign-up to render legal consent only when required and with no unverified fields
+Navigates to `/sign-up/continue` on sign-up with `missing_requirements` status using `ticket` as strategy
+
+It fixes IdP-initiated flows with missing requirements such as accepting legal consent

packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx

@@ -1,7 +1,7 @@
 import { getAlternativePhoneCodeProviderData } from '@clerk/shared/alternativePhoneCode';
 import { useClerk } from '@clerk/shared/react';
 import type { PhoneCodeChannel, PhoneCodeChannelData, SignUpResource } from '@clerk/shared/types';
-import React, { useMemo } from 'react';
+import React from 'react';
 
 import { isClerkAPIResponseError } from '@/index.headless';
 import { Card } from '@/ui/elements/Card';
@@ -129,16 +129,6 @@ function SignUpStartInternal(): JSX.Element {
   const isProgressiveSignUp = userSettings.signUp.progressive;
   const isLegalConsentEnabled = userSettings.signUp.legal_consent_enabled;
   const oidcPrompt = ctx.oidcPrompt;
-
-  const onlyLegalAcceptedMissing = useMemo(
-    () =>
-      signUp.missingFields &&
-      signUp.missingFields.length === 1 &&
-      signUp.missingFields[0] === 'legal_accepted' &&
-      signUp.unverifiedFields &&
-      signUp.unverifiedFields.length === 0,
-    [signUp.missingFields, signUp.unverifiedFields],
-  );
   const fields = determineActiveFields({
     attributes,
     hasTicket: hasTicket || hasExistingSignUpWithTicket,
@@ -173,6 +163,7 @@ function SignUpStartInternal(): JSX.Element {
           redirectUrlComplete,
           verifyEmailPath: 'verify-email-address',
           verifyPhonePath: 'verify-phone-number',
+          continuePath: './continue',
           handleComplete: () => {
             removeClerkQueryParam('__clerk_ticket');
             removeClerkQueryParam('__clerk_invitation_token');
@@ -454,7 +445,6 @@ function SignUpStartInternal(): JSX.Element {
                     formState={formState}
                     canToggleEmailPhone={canToggleEmailPhone}
                     handleEmailPhoneToggle={handleChangeActive}
-                    onlyLegalAcceptedMissing={onlyLegalAcceptedMissing}
                   />
                 )}
               </SocialButtonsReversibleContainerWithDivider>

packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpStart.test.tsx

@@ -352,24 +352,6 @@ describe('SignUpStart', () => {
       screen.getByText('Terms of Service');
       screen.getByText('Privacy Policy');
     });
-
-    it('displays legal consent only if included in missing fields without unverified fields', async () => {
-      const { wrapper } = await createFixtures(f => {
-        f.withEmailAddress({ required: true });
-        f.withPassword({ required: true });
-        f.startSignUpWithMissingLegalAccepted();
-        f.withLegalConsent();
-        f.withTermsPrivacyPolicyUrls({
-          privacyPolicy: 'https://clerk.dev/privacy',
-          termsOfService: 'https://clerk.dev/tos',
-        });
-      });
-      const { getByText, queryByText } = render(<SignUpStart />, { wrapper });
-      expect(getByText('Terms of Service')).toBeVisible();
-      expect(getByText('Privacy Policy')).toBeVisible();
-      expect(queryByText('Phone number')).not.toBeInTheDocument();
-      expect(queryByText('Password')).not.toBeInTheDocument();
-    });
   });
 
   describe('ticket flow', () => {