fix(nextjs): Redirect to sign-up based on clerk_status (#4863)

clerk · Jan 10, 2025 · d5c4841 · d5c4841
1 parent 7cc1b3a
commit d5c4841
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/.changeset/eighty-jars-destroy.md b/.changeset/eighty-jars-destroy.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Redirect to sign-up based on clerk_status
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@@ -94,6 +94,7 @@ export function _SignInStart(): JSX.Element {
   const [hasSwitchedByAutofill, setHasSwitchedByAutofill] = useState(false);
 
   const organizationTicket = getClerkQueryParam('__clerk_ticket') || '';
+  const clerkStatus = getClerkQueryParam('__clerk_status') || '';
 
   const standardFormAttributes = userSettings.enabledFirstFactorIdentifiers;
   const web3FirstFactors = userSettings.web3FirstFactors;
@@ -173,6 +174,13 @@ export function _SignInStart(): JSX.Element {
       return;
     }
 
+    if (clerkStatus === 'sign_up') {
+      // We explicitly navigate to 'create' in the combined flow to trigger a client-side navigation. Navigating to
+      // signUpUrl triggers a full page reload when used with the hash router.
+      navigate(isCombinedFlow ? 'create' : signUpUrl);
+      return;
+    }
+
     status.setLoading();
     card.setLoading();
     signIn
@@ -410,7 +418,9 @@ export function _SignInStart(): JSX.Element {
     return components[identifierField.type as keyof typeof components];
   }, [identifierField.type]);
 
-  if (status.isLoading) {
+  if (status.isLoading || clerkStatus === 'sign_up') {
+    // clerkStatus being sign_up will trigger a navigation to the sign up flow, so show a loading card instead of
+    // rendering the sign in flow.
     return <LoadingCard />;
   }
 

diff --git a/packages/clerk-js/src/utils/getClerkQueryParam.ts b/packages/clerk-js/src/utils/getClerkQueryParam.ts
@@ -16,7 +16,7 @@ const ClerkQueryParams = [
 type ClerkQueryParam = (typeof ClerkQueryParams)[number];
 
 type ClerkQueryParamsToValuesMap = {
-  __clerk_status: VerificationStatus;
+  __clerk_status: VerificationStatus | TicketStatus;
 } & Record<(typeof ClerkQueryParams)[number], string>;
 
 export type VerificationStatus =
@@ -27,6 +27,8 @@ export type VerificationStatus =
   | 'verified_switch_tab'
   | 'client_mismatch';
 
+type TicketStatus = 'sign_in' | 'sign_up';
+
 export function getClerkQueryParam<T extends ClerkQueryParam>(param: T): ClerkQueryParamsToValuesMap[T] | null {
   const val = new URL(window.location.href).searchParams.get(param);
   return val ? (val as ClerkQueryParamsToValuesMap[T]) : null;