From f540e98435c86298415552537e33164471298a5c Mon Sep 17 00:00:00 2001
From: Stefanos Anagnostou <anagstef@users.noreply.github.com>
Date: Fri, 29 Mar 2024 17:41:50 +0200
Subject: [PATCH] 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
---
 .changeset/tame-coats-repeat.md                    |  6 ++++++
 packages/clerk-js/src/core/clerk.ts                |  4 ++--
 .../clerk-js/src/ui/components/SignIn/SignIn.tsx   |  2 ++
 .../clerk-js/src/ui/components/SignUp/SignUp.tsx   |  2 ++
 .../src/ui/contexts/ClerkUIComponentsContext.tsx   | 14 ++++++++++++--
 .../src/internals/machines/third-party/actors.ts   |  2 ++
 packages/types/src/clerk.ts                        |  8 ++++++++
 7 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/tame-coats-repeat.md

diff --git a/.changeset/tame-coats-repeat.md b/.changeset/tame-coats-repeat.md
new file mode 100644
index 0000000000..b71dce9c74
--- /dev/null
+++ b/.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
diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index 12c6aa8760..6dba8fee65 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/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 ||
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx b/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx
index 7f5d8594e2..9ef2e7f8e2 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx
+++ b/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}
diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx
index 9d056c5073..efcd372182 100644
--- a/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx
+++ b/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}
diff --git a/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx b/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx
index 948140845a..221500195c 100644
--- a/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx
+++ b/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}`;
   }
diff --git a/packages/elements/src/internals/machines/third-party/actors.ts b/packages/elements/src/internals/machines/third-party/actors.ts
index 379a249e26..fdef6b85e1 100644
--- a/packages/elements/src/internals/machines/third-party/actors.ts
+++ b/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,
     );
diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts
index ec515e4a33..d162c61701 100644
--- a/packages/types/src/clerk.ts
+++ b/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.