feat(clerk-js,types,shared): Introduce force and fallback redirect urls (#3162)

Author: nikosdouvlis

.changeset/friendly-masks-obey.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+'@clerk/types': patch
+---
+
+Introduce forceRedirectUrl and fallbackRedirectUrl

.github/workflows/release.yml

@@ -49,7 +49,7 @@ jobs:
           playwright-enabled: true # Must be present to enable caching on branched workflows
 
       - name: Build release
-        run: npx turbo build $TURBO_ARGS --force
+        run: npx turbo build $TURBO_ARGS --force --filter=!elements
 
       - name: Create Release PR
         id: changesets

integration/playwright.config.ts

@@ -43,10 +43,10 @@ export default defineConfig({
       use: { ...devices['Desktop Chrome'], channel: 'chrome' },
       dependencies: ['setup'],
     },
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-      dependencies: ['setup'],
-    },
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    //   dependencies: ['setup'],
+    // },
   ],
 });

integration/tests/navigation.test.ts

@@ -112,7 +112,7 @@ export default function Page() {
 
     await u.po.signIn.getGoToSignUp().click();
     await u.po.signUp.waitForMounted();
-    await u.page.waitForURL(`${app.serverUrl}/sign-up?redirect_url=${encodeURIComponent(app.serverUrl + '/')}`);
+    await u.page.waitForURL(`${app.serverUrl}/sign-up`);
 
     await page.goBack();
     await u.po.signIn.waitForMounted();

package.json

@@ -9,7 +9,7 @@
     ]
   },
   "scripts": {
-    "build": "FORCE_COLOR=1 turbo build --concurrency=${TURBO_CONCURRENCY:-80%}",
+    "build": "FORCE_COLOR=1 turbo build --concurrency=${TURBO_CONCURRENCY:-80%} --filter=!@clerk/elements",
     "bundlewatch": "turbo bundlewatch",
     "changeset": "changeset",
     "changeset:empty": "npm run changeset -- --empty",
@@ -28,7 +28,7 @@
     "release:canary": "changeset publish --tag canary --no-git-tag",
     "release:snapshot": "changeset publish --tag snapshot --no-git-tag",
     "release:verdaccio": "if [ \"$(npm config get registry)\" = \"https://registry.npmjs.org/\" ]; then echo 'Error: Using default registry' && exit 1; else TURBO_CONCURRENCY=1 npm run build && changeset publish --no-git-tag; fi",
-    "test": "FORCE_COLOR=1 turbo test --concurrency=${TURBO_CONCURRENCY:-80%}",
+    "test": "FORCE_COLOR=1 turbo test --concurrency=${TURBO_CONCURRENCY:-80%} --filter=!@clerk/elements",
     "test:cache:clear": "FORCE_COLOR=1 turbo test:cache:clear --continue --concurrency=${TURBO_CONCURRENCY:-80%}",
     "test:integration:ap-flows": "npm run test:integration:base -- --grep @ap-flows",
     "test:integration:base": "DEBUG=1 npx playwright test --config integration/playwright.config.ts",

packages/clerk-js/src/core/__tests__/clerk.redirects.test.ts

@@ -122,20 +122,36 @@ describe('Clerk singleton - Redirects', () => {
         mockEnvironmentFetch.mockRestore();
       });
 
-      it('redirects to signInUrl', async () => {
-        await clerkForProductionInstance.redirectToSignIn({ redirectUrl: 'https://www.example.com/' });
+      it('redirects to signInUrl for development instance', async () => {
         await clerkForDevelopmentInstance.redirectToSignIn({ redirectUrl: 'https://www.example.com/' });
+        expect(mockNavigate).toHaveBeenCalledWith(
+          '/sign-in#/?redirect_url=https%3A%2F%2Fwww.example.com%2F',
+          undefined,
+        );
+      });
 
-        expect(mockNavigate.mock.calls[0][0]).toBe('/sign-in#/?redirect_url=https%3A%2F%2Fwww.example.com%2F');
-        expect(mockNavigate.mock.calls[1][0]).toBe('/sign-in#/?redirect_url=https%3A%2F%2Fwww.example.com%2F');
+      it('redirects to signInUrl for production instance', async () => {
+        await clerkForProductionInstance.redirectToSignIn({ redirectUrl: 'https://www.example.com/' });
+        expect(mockNavigate).toHaveBeenCalledWith(
+          '/sign-in#/?redirect_url=https%3A%2F%2Fwww.example.com%2F',
+          undefined,
+        );
       });
 
-      it('redirects to signUpUrl', async () => {
-        await clerkForProductionInstance.redirectToSignUp({ redirectUrl: 'https://www.example.com/' });
+      it('redirects to signUpUrl for development instance', async () => {
         await clerkForDevelopmentInstance.redirectToSignUp({ redirectUrl: 'https://www.example.com/' });
+        expect(mockNavigate).toHaveBeenCalledWith(
+          '/sign-up#/?redirect_url=https%3A%2F%2Fwww.example.com%2F',
+          undefined,
+        );
+      });
 
-        expect(mockNavigate.mock.calls[0][0]).toBe('/sign-up#/?redirect_url=https%3A%2F%2Fwww.example.com%2F');
-        expect(mockNavigate.mock.calls[1][0]).toBe('/sign-up#/?redirect_url=https%3A%2F%2Fwww.example.com%2F');
+      it('redirects to signUpUrl for production instance', async () => {
+        await clerkForProductionInstance.redirectToSignUp({ redirectUrl: 'https://www.example.com/' });
+        expect(mockNavigate).toHaveBeenCalledWith(
+          '/sign-up#/?redirect_url=https%3A%2F%2Fwww.example.com%2F',
+          undefined,
+        );
       });
 
       it('redirects to userProfileUrl', async () => {
@@ -203,29 +219,34 @@ describe('Clerk singleton - Redirects', () => {
 
       const host = 'http://another-test.host';
 
-      it('redirects to signInUrl', async () => {
-        await clerkForProductionInstance.redirectToSignIn({ redirectUrl: 'https://www.example.com/' });
+      it('redirects to signInUrl for development instance', async () => {
         await clerkForDevelopmentInstance.redirectToSignIn({ redirectUrl: 'https://www.example.com/' });
-
-        expect(mockHref).toHaveBeenNthCalledWith(1, `${host}/sign-in#/?redirect_url=https%3A%2F%2Fwww.example.com%2F`);
-
-        expect(mockHref).toHaveBeenNthCalledWith(
-          2,
+        expect(mockHref).toHaveBeenCalledTimes(1);
+        expect(mockHref).toHaveBeenCalledWith(
           `${host}/sign-in?__clerk_db_jwt=deadbeef#/?redirect_url=https%3A%2F%2Fwww.example.com%2F`,
         );
       });
 
-      it('redirects to signUpUrl', async () => {
-        await clerkForProductionInstance.redirectToSignUp({ redirectUrl: 'https://www.example.com/' });
-        await clerkForDevelopmentInstance.redirectToSignUp({ redirectUrl: 'https://www.example.com/' });
+      it('redirects to signInUrl for production instance', async () => {
+        await clerkForProductionInstance.redirectToSignIn({ redirectUrl: 'https://www.example.com/' });
+        expect(mockHref).toHaveBeenCalledTimes(1);
+        expect(mockHref).toHaveBeenCalledWith(`${host}/sign-in#/?redirect_url=https%3A%2F%2Fwww.example.com%2F`);
+      });
 
-        expect(mockHref).toHaveBeenNthCalledWith(1, `${host}/sign-up#/?redirect_url=https%3A%2F%2Fwww.example.com%2F`);
-        expect(mockHref).toHaveBeenNthCalledWith(
-          2,
+      it('redirects to signUpUrl for development instance', async () => {
+        await clerkForDevelopmentInstance.redirectToSignUp({ redirectUrl: 'https://www.example.com/' });
+        expect(mockHref).toHaveBeenCalledTimes(1);
+        expect(mockHref).toHaveBeenCalledWith(
           `${host}/sign-up?__clerk_db_jwt=deadbeef#/?redirect_url=https%3A%2F%2Fwww.example.com%2F`,
         );
       });
 
+      it('redirects to signUpUrl for production instance', async () => {
+        await clerkForProductionInstance.redirectToSignUp({ redirectUrl: 'https://www.example.com/' });
+        expect(mockHref).toHaveBeenCalledTimes(1);
+        expect(mockHref).toHaveBeenCalledWith(`${host}/sign-up#/?redirect_url=https%3A%2F%2Fwww.example.com%2F`);
+      });
+
       it('redirects to userProfileUrl', async () => {
         await clerkForProductionInstance.redirectToUserProfile();
         await clerkForDevelopmentInstance.redirectToUserProfile();

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

@@ -981,7 +981,7 @@ describe('Clerk singleton', () => {
       });
     });
 
-    it('redirects the user to the afterSignInUrl if one was provided', async () => {
+    it('redirects the user to the signInForceRedirectUrl if one was provided', async () => {
       mockEnvironmentFetch.mockReturnValue(
         Promise.resolve({
           authConfig: {},
@@ -1028,15 +1028,15 @@ describe('Clerk singleton', () => {
       sut.setActive = mockSetActive as any;
 
       sut.handleRedirectCallback({
-        redirectUrl: '/custom-sign-in',
+        signInForceRedirectUrl: '/custom-sign-in',
       });
 
       await waitFor(() => {
         expect(mockNavigate.mock.calls[0][0]).toBe('/custom-sign-in');
       });
     });
 
-    it('gives priority to afterSignInUrl if afterSignInUrl and redirectUrl were provided ', async () => {
+    it('gives priority to signInForceRedirectUrl if signInForceRedirectUrl and signInFallbackRedirectUrl were provided ', async () => {
       mockEnvironmentFetch.mockReturnValue(
         Promise.resolve({
           authConfig: {},
@@ -1083,8 +1083,8 @@ describe('Clerk singleton', () => {
       sut.setActive = mockSetActive as any;
 
       sut.handleRedirectCallback({
-        afterSignInUrl: '/custom-sign-in',
-        redirectUrl: '/redirect-to',
+        signInForceRedirectUrl: '/custom-sign-in',
+        signInFallbackRedirectUrl: '/redirect-to',
       } as any);
 
       await waitFor(() => {

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

@@ -37,7 +37,6 @@ import type {
   OrganizationProfileProps,
   OrganizationResource,
   OrganizationSwitcherProps,
-  RedirectOptions,
   Resources,
   SDKMetadata,
   SetActiveParams,
@@ -59,7 +58,6 @@ import type {
 
 import type { MountComponentRenderer } from '../ui/Components';
 import {
-  appendAsQueryParams,
   buildURL,
   completeSignUpFlow,
   createAllowedRedirectOrigins,
@@ -77,17 +75,16 @@ import {
   isRedirectForFAPIInitiatedFlow,
   noOrganizationExists,
   noUserExists,
-  pickRedirectionProp,
   removeClerkQueryParam,
   requiresUserInput,
   sessionExistsAndSingleSessionModeEnabled,
   stripOrigin,
-  stripSameOrigin,
-  toURL,
   windowNavigate,
 } from '../utils';
+import { assertNoLegacyProp } from '../utils/assertNoLegacyProp';
 import { getClientUatCookie } from '../utils/cookies/clientUat';
 import { memoizeListenerCallback } from '../utils/memoizeStateListenerCallback';
+import { RedirectUrls } from '../utils/redirectUrls';
 import { CLERK_SATELLITE_URL, CLERK_SYNCED, ERROR_CODES } from './constants';
 import type { DevBrowser } from './devBrowser';
 import { createDevBrowser } from './devBrowser';
@@ -133,9 +130,11 @@ const defaultOptions: ClerkOptions = {
   isSatellite: false,
   signInUrl: undefined,
   signUpUrl: undefined,
-  afterSignInUrl: undefined,
-  afterSignUpUrl: undefined,
   afterSignOutUrl: undefined,
+  signInFallbackRedirectUrl: undefined,
+  signUpFallbackRedirectUrl: undefined,
+  signInForceRedirectUrl: undefined,
+  signUpForceRedirectUrl: undefined,
 };
 
 export class Clerk implements ClerkInterface {
@@ -276,6 +275,8 @@ export class Clerk implements ClerkInterface {
       ...options,
     };
 
+    assertNoLegacyProp(this.#options);
+
     if (this.#options.sdkMetadata) {
       Clerk.sdkMetadata = this.#options.sdkMetadata;
     }
@@ -827,11 +828,17 @@ export class Clerk implements ClerkInterface {
   }
 
   public buildSignInUrl(options?: SignInRedirectOptions): string {
-    return this.#buildUrl('signInUrl', options);
+    return this.#buildUrl('signInUrl', {
+      ...options?.initialValues,
+      redirect_url: options?.redirectUrl || window.location.href,
+    });
   }
 
   public buildSignUpUrl(options?: SignUpRedirectOptions): string {
-    return this.#buildUrl('signUpUrl', options);
+    return this.#buildUrl('signUpUrl', {
+      ...options?.initialValues,
+      redirect_url: options?.redirectUrl || window.location.href,
+    });
   }
 
   public buildUserProfileUrl(): string {
@@ -849,19 +856,11 @@ export class Clerk implements ClerkInterface {
   }
 
   public buildAfterSignInUrl(): string {
-    if (!this.#options.afterSignInUrl) {
-      return '/';
-    }
-
-    return this.buildUrlWithAuth(this.#options.afterSignInUrl);
+    return this.buildUrlWithAuth(new RedirectUrls(this.#options).getAfterSignInUrl());
   }
 
   public buildAfterSignUpUrl(): string {
-    if (!this.#options.afterSignUpUrl) {
-      return '/';
-    }
-
-    return this.buildUrlWithAuth(this.#options.afterSignUpUrl);
+    return this.buildUrlWithAuth(new RedirectUrls(this.#options).getAfterSignUpUrl());
   }
 
   public buildAfterSignOutUrl(): string {
@@ -1062,9 +1061,9 @@ export class Clerk implements ClerkInterface {
         buildURL({ base: displayConfig.signInUrl, hashPath: '/reset-password' }, { stringify: true }),
     );
 
-    const navigateAfterSignIn = makeNavigate(params.afterSignInUrl || params.redirectUrl || '/');
-
-    const navigateAfterSignUp = makeNavigate(params.afterSignUpUrl || params.redirectUrl || '/');
+    const redirectUrls = new RedirectUrls(this.#options, params);
+    const navigateAfterSignIn = makeNavigate(redirectUrls.getAfterSignInUrl());
+    const navigateAfterSignUp = makeNavigate(redirectUrls.getAfterSignUpUrl());
 
     const navigateToContinueSignUp = makeNavigate(
       params.continueSignUpUrl ||
@@ -1090,7 +1089,6 @@ export class Clerk implements ClerkInterface {
 
     const userExistsButNeedsToSignIn =
       su.externalAccountStatus === 'transferable' && su.externalAccountErrorCode === 'external_account_exists';
-
     if (userExistsButNeedsToSignIn) {
       const res = await signIn.create({ transfer: true });
       switch (res.status) {
@@ -1644,31 +1642,13 @@ export class Clerk implements ClerkInterface {
     });
   };
 
-  #buildUrl = (key: 'signInUrl' | 'signUpUrl', options?: SignInRedirectOptions | SignUpRedirectOptions): string => {
-    if (!this.loaded || !this.#environment || !this.#environment.displayConfig) {
+  #buildUrl = (key: 'signInUrl' | 'signUpUrl', params?: Record<string, string>): string => {
+    if (!key || !this.loaded || !this.#environment || !this.#environment.displayConfig) {
       return '';
     }
-
-    const signInOrUpUrl = pickRedirectionProp(
-      key,
-      { options: this.#options, displayConfig: this.#environment.displayConfig },
-      false,
-    );
-
-    const urls: RedirectOptions = {
-      afterSignInUrl: pickRedirectionProp('afterSignInUrl', { ctx: options, options: this.#options }, false),
-      afterSignUpUrl: pickRedirectionProp('afterSignUpUrl', { ctx: options, options: this.#options }, false),
-      redirectUrl: options?.redirectUrl || window.location.href,
-    };
-
-    (Object.keys(urls) as Array<keyof typeof urls>).forEach(function (key) {
-      const url = urls[key];
-      if (url) {
-        urls[key] = stripSameOrigin(toURL(url), toURL(signInOrUpUrl));
-      }
-    });
-
-    return this.buildUrlWithAuth(appendAsQueryParams(signInOrUpUrl, { ...urls, ...options?.initialValues }));
+    const signInOrUpUrl = this.#options[key] || this.#environment.displayConfig[key];
+    const redirectUrls = new RedirectUrls(this.#options, params);
+    return this.buildUrlWithAuth(redirectUrls.appendPreservedPropsToUrl(signInOrUpUrl, params));
   };
 
   assertComponentsReady(controls: unknown): asserts controls is ReturnType<MountComponentRenderer> {

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

@@ -1,4 +1,11 @@
-export const PRESERVED_QUERYSTRING_PARAMS = ['after_sign_in_url', 'after_sign_up_url', 'redirect_url'];
+// TODO: Do we still have a use for this or can we simply preserve all params?
+export const PRESERVED_QUERYSTRING_PARAMS = [
+  'redirect_url',
+  'sign_in_force_redirect_url',
+  'sign_in_fallback_redirect_url',
+  'sign_up_force_redirect_url',
+  'sign_up_fallback_redirect_url',
+];
 
 export const CLERK_MODAL_STATE = '__clerk_modal_state';
 export const CLERK_SYNCED = '__clerk_synced';

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

@@ -44,9 +44,8 @@ function SignInRoutes(): JSX.Element {
           <SignInSSOCallback
             signUpUrl={signInContext.signUpUrl}
             signInUrl={signInContext.signInUrl}
-            afterSignInUrl={signInContext.afterSignInUrl}
-            afterSignUpUrl={signInContext.afterSignUpUrl}
-            redirectUrl={signInContext.redirectUrl}
+            signInForceRedirectUrl={signInContext.afterSignInUrl}
+            signUpForceRedirectUrl={signInContext.afterSignUpUrl}
             continueSignUpUrl={signInContext.signUpContinueUrl}
             firstFactorUrl={'../factor-one'}
             secondFactorUrl={'../factor-two'}
@@ -58,7 +57,7 @@ function SignInRoutes(): JSX.Element {
         </Route>
         <Route path='verify'>
           <SignInEmailLinkFlowComplete
-            redirectUrlComplete={signInContext.afterSignInUrl || signInContext.redirectUrl || undefined}
+            redirectUrlComplete={signInContext.afterSignInUrl}
             redirectUrl='../factor-two'
           />
         </Route>

packages/clerk-js/src/ui/components/SignIn/__tests__/SignInStart.test.tsx

@@ -199,7 +199,7 @@ describe('SignInStart', () => {
       expect(fixtures.signIn.create).toHaveBeenCalled();
       expect(fixtures.signIn.authenticateWithRedirect).toHaveBeenCalledWith({
         strategy: 'saml',
-        redirectUrl: 'http://localhost/#/sso-callback?redirect_url=http%3A%2F%2Flocalhost%2F',
+        redirectUrl: 'http://localhost/#/sso-callback',
         redirectUrlComplete: '/',
       });
     });