fix(clerk-js,types): Fix the redirection that happens when SSO fails (#2955)

* fix(clerk-js,types): Fix the redirection that happens when SSO fails

Author: anagstef

.changeset/tame-coats-repeat.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Return to localhost when SSO callback fails on SignIn or SignUp

packages/clerk-js/src/core/clerk.ts

@@ -1019,9 +1019,9 @@ export class Clerk implements ClerkInterface {
 
     const makeNavigate = (to: string) => () => navigate(to);
 
-    const navigateToSignIn = makeNavigate(displayConfig.signInUrl);
+    const navigateToSignIn = makeNavigate(params.signInUrl || displayConfig.signInUrl);
 
-    const navigateToSignUp = makeNavigate(displayConfig.signUpUrl);
+    const navigateToSignUp = makeNavigate(params.signUpUrl || displayConfig.signUpUrl);
 
     const navigateToFactorOne = makeNavigate(
       params.firstFactorUrl ||

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

@@ -42,6 +42,8 @@ function SignInRoutes(): JSX.Element {
         </Route>
         <Route path='sso-callback'>
           <SignInSSOCallback
+            signUpUrl={signInContext.signUpUrl}
+            signInUrl={signInContext.signInUrl}
             afterSignInUrl={signInContext.afterSignInUrl}
             afterSignUpUrl={signInContext.afterSignUpUrl}
             redirectUrl={signInContext.redirectUrl}

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

@@ -40,6 +40,8 @@ function SignUpRoutes(): JSX.Element {
         </Route>
         <Route path='sso-callback'>
           <SignUpSSOCallback
+            signUpUrl={signUpContext.signUpUrl}
+            signInUrl={signUpContext.signInUrl}
             afterSignUpUrl={signUpContext.afterSignUpUrl}
             afterSignInUrl={signUpContext.afterSignInUrl}
             redirectUrl={signUpContext.redirectUrl}

packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

@@ -91,7 +91,12 @@ export const useSignUpContext = (): SignUpContextType => {
     displayConfig: displayConfig,
   });
 
-  let signUpUrl = pickRedirectionProp('signUpUrl', { ctx, options, displayConfig }, false);
+  // The `ctx` object here refers to the SignUp component's props.
+  // SignUp's own options won't have a `signUpUrl` property, so we have to get the value
+  // from the `path` prop instead, when the routing is set to 'path'.
+  let signUpUrl =
+    (ctx.routing === 'path' ? ctx.path : undefined) ||
+    pickRedirectionProp('signUpUrl', { options, displayConfig }, false);
   if (authQs && ctx.routing !== 'virtual') {
     signUpUrl += `#/?${authQs}`;
   }
@@ -175,7 +180,12 @@ export const useSignInContext = (): SignInContextType => {
     signUpUrl += `#/?${authQs}`;
   }
 
-  let signInUrl = pickRedirectionProp('signInUrl', { ctx, options, displayConfig }, false);
+  // The `ctx` object here refers to the SignIn component's props.
+  // SignIn's own options won't have a `signInUrl` property, so we have to get the value
+  // from the `path` prop instead, when the routing is set to 'path'.
+  let signInUrl =
+    (ctx.routing === 'path' ? ctx.path : undefined) ||
+    pickRedirectionProp('signInUrl', { options, displayConfig }, false);
   if (authQs && ctx.routing !== 'virtual') {
     signInUrl += `#/?${authQs}`;
   }

packages/elements/src/internals/machines/third-party/actors.ts

@@ -88,6 +88,8 @@ export const handleRedirectCallback = fromCallback<AnyEventObject, HandleRedirec
         secondFactorUrl: ClerkJSNavigationEvent.signIn,
         verifyEmailAddressUrl: ClerkJSNavigationEvent.verification,
         verifyPhoneNumberUrl: ClerkJSNavigationEvent.verification,
+        signUpUrl: ClerkJSNavigationEvent.signUp,
+        signInUrl: ClerkJSNavigationEvent.signIn,
       } satisfies Required<HandleOAuthCallbackParams>,
       customNavigate,
     );

packages/types/src/clerk.ts

@@ -451,6 +451,14 @@ export interface Clerk {
 }
 
 export type HandleOAuthCallbackParams = AfterActionURLs & {
+  /**
+   * Full URL or path where the SignIn component is mounted.
+   */
+  signInUrl?: string;
+  /**
+   * Full URL or path where the SignUp component is mounted.
+   */
+  signUpUrl?: string;
   /**
    * Full URL or path to navigate after successful sign in
    * or sign up.