fix(clerk-js,types): Use intent parameter to reload resource (#5553)

Author: dstaley

.changeset/tidy-dolls-join.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Optionally handle the `intent` parameter on SSO redirects to reload specific resources.

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

@@ -1528,16 +1528,15 @@ export class Clerk implements ClerkInterface {
     // directs the opening page to navigate to the /sso-callback route), we need to reload the signIn and signUp resources
     // to ensure that we have the latest state. This operation can fail when we try reloading a resource that doesn't
     // exist (such as when reloading a signIn resource during a signUp attempt), but this can be safely ignored.
-    if (!window.opener) {
+    if (!window.opener && params.reloadResource) {
       try {
-        await signIn.reload();
-      } catch {
-        // This can be safely ignored
-      }
-      try {
-        await signUp.reload();
+        if (params.reloadResource === 'signIn') {
+          await signIn.reload();
+        } else if (params.reloadResource === 'signUp') {
+          await signUp.reload();
+        }
       } catch {
-        // This can be safely ignored
+        // This catch intentionally left blank.
       }
     }
 

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

@@ -264,7 +264,7 @@ export class SignIn extends BaseResource implements SignInResource {
     if (!popup) {
       clerkMissingOptionError('popup');
     }
-    return _authenticateWithPopup(SignIn.clerk, this.authenticateWithRedirectOrPopup, params, url => {
+    return _authenticateWithPopup(SignIn.clerk, 'signIn', this.authenticateWithRedirectOrPopup, params, url => {
       popup.location.href = url.toString();
     });
   };

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

@@ -360,7 +360,7 @@ export class SignUp extends BaseResource implements SignUpResource {
       clerkMissingOptionError('popup');
     }
 
-    return _authenticateWithPopup(SignUp.clerk, this.authenticateWithRedirectOrPopup, params, url => {
+    return _authenticateWithPopup(SignUp.clerk, 'signUp', this.authenticateWithRedirectOrPopup, params, url => {
       popup.location.href = url instanceof URL ? url.toString() : url;
     });
   };

packages/clerk-js/src/ui/common/SSOCallback.tsx

@@ -24,7 +24,9 @@ export const SSOCallbackCard = (props: HandleOAuthCallbackParams | HandleSamlCal
   React.useEffect(() => {
     let timeoutId: ReturnType<typeof setTimeout>;
     if (__internal_setActiveInProgress !== true) {
-      handleRedirectCallback({ ...props }, navigate).catch(e => {
+      const intent = new URLSearchParams(window.location.search).get('intent');
+      const reloadResource = intent === 'signIn' || intent === 'signUp' ? intent : undefined;
+      handleRedirectCallback({ ...props, reloadResource }, navigate).catch(e => {
         handleError(e, [], card.setError);
         timeoutId = setTimeout(() => void navigate('../'), 4000);
       });

packages/clerk-js/src/utils/authenticateWithPopup.ts

@@ -5,6 +5,7 @@ import type { Clerk } from '../core/clerk';
 
 export async function _authenticateWithPopup(
   client: Clerk,
+  reloadResource: 'signIn' | 'signUp',
   authenticateMethod: (
     params: AuthenticateWithRedirectParams,
     navigateCallback: (url: URL | string) => void,
@@ -27,6 +28,7 @@ export async function _authenticateWithPopup(
   const r = new URL(redirectUrl);
   r.searchParams.set('sign_in_force_redirect_url', params.redirectUrlComplete);
   r.searchParams.set('sign_up_force_redirect_url', params.redirectUrlComplete);
+  r.searchParams.set('intent', reloadResource);
   // All URLs are decorated with the dev browser token in development mode since we're moving between AP and the app.
   const redirectUrlWithForceRedirectUrl = client.buildUrlWithAuth(r.toString());
 

packages/types/src/clerk.ts

@@ -720,6 +720,10 @@ export type HandleOAuthCallbackParams = TransferableOption &
      * Full URL or path to navigate to after requesting phone verification.
      */
     verifyPhoneNumberUrl?: string | null;
+    /**
+     * The underlying resource to optionally reload before processing an OAuth callback.
+     */
+    reloadResource?: 'signIn' | 'signUp';
   };
 
 export type HandleSamlCallbackParams = HandleOAuthCallbackParams;