feat(clerk-js): Change the default behaviour of afterSignOutUrl, afterSignIn and afterSignUp

.changeset/spotty-boxes-do.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': major
+'@clerk/shared': patch
+---
+
+Change the default behavior of `afterSignOutUrl`, `afterSignIn` and `afterSignUp` props to be redirected to `/` instead of the Account Portal defined URL.

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

@@ -915,13 +915,9 @@ export class Clerk implements ClerkInterface {
         buildURL({ base: displayConfig.signInUrl, hashPath: '/reset-password' }, { stringify: true }),
     );
 
-    const navigateAfterSignIn = makeNavigate(
-      params.afterSignInUrl || params.redirectUrl || displayConfig.afterSignInUrl,
-    );
+    const navigateAfterSignIn = makeNavigate(params.afterSignInUrl || params.redirectUrl || '/');
 
-    const navigateAfterSignUp = makeNavigate(
-      params.afterSignUpUrl || params.redirectUrl || displayConfig.afterSignUpUrl,
-    );
+    const navigateAfterSignUp = makeNavigate(params.afterSignUpUrl || params.redirectUrl || '/');
 
     const navigateToContinueSignUp = makeNavigate(
       params.continueSignUpUrl ||

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

@@ -18,7 +18,7 @@ export const SignInSocialButtons = React.memo((props: SocialButtonsProps) => {
   const ctx = useSignInContext();
   const signIn = useCoreSignIn();
   const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signInUrl);
-  const redirectUrlComplete = ctx.afterSignInUrl || displayConfig.afterSignInUrl;
+  const redirectUrlComplete = ctx.afterSignInUrl || '/';
 
   return (
     <SocialButtons

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

@@ -236,7 +236,7 @@ export function _SignInStart(): JSX.Element {
 
   const authenticateWithSaml = async () => {
     const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signInUrl);
-    const redirectUrlComplete = ctx.afterSignInUrl || displayConfig.afterSignInUrl;
+    const redirectUrlComplete = ctx.afterSignInUrl || '/';
 
     return signIn.authenticateWithRedirect({
       strategy: 'saml',

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

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

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

@@ -21,7 +21,7 @@ export const SignUpSocialButtons = React.memo((props: SignUpSocialButtonsProps)
   const ctx = useSignUpContext();
   const signUp = useCoreSignUp();
   const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signUpUrl);
-  const redirectUrlComplete = ctx.afterSignUpUrl || displayConfig.afterSignUpUrl;
+  const redirectUrlComplete = ctx.afterSignUpUrl || '/';
   const { continueSignUp = false, ...rest } = props;
 
   return (

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

@@ -211,7 +211,7 @@ function _SignUpStart(): JSX.Element {
     card.setError(undefined);
 
     const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signUpUrl);
-    const redirectUrlComplete = ctx.afterSignUpUrl || displayConfig.afterSignUpUrl;
+    const redirectUrlComplete = ctx.afterSignUpUrl || '/';
 
     return signUp
       .create(buildRequest(fieldsToSubmit))

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

@@ -69,17 +69,15 @@ export const useSignUpContext = (): SignUpContextType => {
       queryParams,
       ctx,
       options,
-      displayConfig,
-    }),
+    }) || '/',
   );
 
   const afterSignInUrl = clerk.buildUrlWithAuth(
     pickRedirectionProp('afterSignInUrl', {
       queryParams,
       ctx,
       options,
-      displayConfig,
-    }),
+    }) || '/',
   );
 
   const navigateAfterSignUp = () => navigate(afterSignUpUrl);
@@ -145,17 +143,15 @@ export const useSignInContext = (): SignInContextType => {
       queryParams,
       ctx,
       options,
-      displayConfig,
-    }),
+    }) || '/',
   );
 
   const afterSignInUrl = clerk.buildUrlWithAuth(
     pickRedirectionProp('afterSignInUrl', {
       queryParams,
       ctx,
       options,
-      displayConfig,
-    }),
+    }) || '/',
   );
 
   const navigateAfterSignIn = () => navigate(afterSignInUrl);
@@ -236,7 +232,7 @@ export const useUserButtonContext = () => {
   const afterMultiSessionSingleSignOutUrl = ctx.afterMultiSessionSingleSignOutUrl || displayConfig.afterSignOutOneUrl;
   const navigateAfterMultiSessionSingleSignOut = () => clerk.redirectWithAuth(afterMultiSessionSingleSignOutUrl);
 
-  const afterSignOutUrl = ctx.afterSignOutUrl || displayConfig.afterSignOutAllUrl;
+  const afterSignOutUrl = ctx.afterSignOutUrl || '/';
   const navigateAfterSignOut = () => navigate(afterSignOutUrl);
 
   const afterSwitchSessionUrl = ctx.afterSwitchSessionUrl || displayConfig.afterSwitchSessionUrl;

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

@@ -18,7 +18,7 @@ export const SignInSocialButtons = React.memo((props: SocialButtonsProps) => {
   const ctx = useSignInContext();
   const signIn = useCoreSignIn();
   const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signInUrl);
-  const redirectUrlComplete = ctx.afterSignInUrl || displayConfig.afterSignInUrl;
+  const redirectUrlComplete = ctx.afterSignInUrl || '/';
 
   return (
     <SocialButtons

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

@@ -236,7 +236,7 @@ export function _SignInStart(): JSX.Element {
 
   const authenticateWithSaml = async () => {
     const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signInUrl);
-    const redirectUrlComplete = ctx.afterSignInUrl || displayConfig.afterSignInUrl;
+    const redirectUrlComplete = ctx.afterSignInUrl || '/';
 
     return signIn.authenticateWithRedirect({
       strategy: 'saml',

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

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

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

@@ -21,7 +21,7 @@ export const SignUpSocialButtons = React.memo((props: SignUpSocialButtonsProps)
   const ctx = useSignUpContext();
   const signUp = useCoreSignUp();
   const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signUpUrl);
-  const redirectUrlComplete = ctx.afterSignUpUrl || displayConfig.afterSignUpUrl;
+  const redirectUrlComplete = ctx.afterSignUpUrl || '/';
   const { continueSignUp = false, ...rest } = props;
 
   return (

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

@@ -211,7 +211,7 @@ function _SignUpStart(): JSX.Element {
     card.setError(undefined);
 
     const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signUpUrl);
-    const redirectUrlComplete = ctx.afterSignUpUrl || displayConfig.afterSignUpUrl;
+    const redirectUrlComplete = ctx.afterSignUpUrl || '/';
 
     return signUp
       .create(buildRequest(fieldsToSubmit))

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

@@ -69,17 +69,15 @@ export const useSignUpContext = (): SignUpContextType => {
       queryParams,
       ctx,
       options,
-      displayConfig,
-    }),
+    }) || '/',
   );
 
   const afterSignInUrl = clerk.buildUrlWithAuth(
     pickRedirectionProp('afterSignInUrl', {
       queryParams,
       ctx,
       options,
-      displayConfig,
-    }),
+    }) || '/',
   );
 
   const navigateAfterSignUp = () => navigate(afterSignUpUrl);
@@ -145,17 +143,15 @@ export const useSignInContext = (): SignInContextType => {
       queryParams,
       ctx,
       options,
-      displayConfig,
-    }),
+    }) || '/',
   );
 
   const afterSignInUrl = clerk.buildUrlWithAuth(
     pickRedirectionProp('afterSignInUrl', {
       queryParams,
       ctx,
       options,
-      displayConfig,
-    }),
+    }) || '/',
   );
 
   const navigateAfterSignIn = () => navigate(afterSignInUrl);
@@ -236,7 +232,7 @@ export const useUserButtonContext = () => {
   const afterMultiSessionSingleSignOutUrl = ctx.afterMultiSessionSingleSignOutUrl || displayConfig.afterSignOutOneUrl;
   const navigateAfterMultiSessionSingleSignOut = () => clerk.redirectWithAuth(afterMultiSessionSingleSignOutUrl);
 
-  const afterSignOutUrl = ctx.afterSignOutUrl || displayConfig.afterSignOutAllUrl;
+  const afterSignOutUrl = ctx.afterSignOutUrl || '/';
   const navigateAfterSignOut = () => navigate(afterSignOutUrl);
 
   const afterSwitchSessionUrl = ctx.afterSwitchSessionUrl || displayConfig.afterSwitchSessionUrl;

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

@@ -1,13 +1,6 @@
+import { getNonUndefinedValues } from '@clerk/shared';
 import type { ClerkPaginationParams, ClerkPaginationRequest } from '@clerk/types';
 
-function getNonUndefinedValues<T>(obj: Record<string, T>): Record<string, T> {
-  return Object.keys(obj).reduce((result, key) => {
-    if (obj[key] !== undefined) {
-      result[key] = obj[key];
-    }
-    return result;
-  }, {} as Record<string, T>);
-}
 export function convertPageToOffset<T extends ClerkPaginationParams | undefined>(
   pageParams: T,
 ): ClerkPaginationRequest {

packages/remix/src/utils.ts

@@ -29,7 +29,7 @@ export function assertValidClerkState(val: any): asserts val is ClerkState | und
  * Utility function to get env variables across Node and Edge runtimes.
  *
  * @param name
- * @returns
+ * @returns string
  */
 export const getEnvVariable = (name: string, context: AppLoadContext | undefined): string => {
   // Node envs

packages/shared/src/__tests__/underscore.test.ts

@@ -1,4 +1,12 @@
-import { deepCamelToSnake, deepSnakeToCamel, isIPV4Address, isTruthy, titleize, toSentence } from '../underscore';
+import {
+  deepCamelToSnake,
+  deepSnakeToCamel,
+  getNonUndefinedValues,
+  isIPV4Address,
+  isTruthy,
+  titleize,
+  toSentence,
+} from '../underscore';
 
 describe('toSentence', () => {
   it('returns a single item as-is', () => {
@@ -204,3 +212,47 @@ describe(`isTruthy`, () => {
     expect(isTruthy(`foobar`)).toBe(false);
   });
 });
+
+describe('getNonUndefinedValues', () => {
+  it(`removes all the undefined values from the object`, () => {
+    const obj = {
+      a: 1,
+      b: undefined,
+      c: null,
+    };
+    expect(getNonUndefinedValues(obj)).toStrictEqual({
+      a: 1,
+      c: null,
+    });
+  });
+
+  it(`returns the same object if no undefined value exists`, () => {
+    const obj = {
+      a: 1,
+      b: 'foo',
+      c: null,
+    };
+    expect(getNonUndefinedValues(obj)).toStrictEqual(obj);
+    expect(getNonUndefinedValues({})).toStrictEqual({});
+  });
+
+  it(`removes only the undefined values from the top level`, () => {
+    const obj = {
+      a: 1,
+      b: undefined,
+      c: null,
+      e: {
+        f: undefined,
+        g: 1,
+      },
+    };
+    expect(getNonUndefinedValues(obj)).toStrictEqual({
+      a: 1,
+      c: null,
+      e: {
+        f: undefined,
+        g: 1,
+      },
+    });
+  });
+});

packages/shared/src/underscore.ts

@@ -108,3 +108,12 @@ export function isTruthy(value: unknown): boolean {
   // Default to false
   return false;
 }
+
+export function getNonUndefinedValues<T extends object>(obj: T): Partial<T> {
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    if (value !== undefined) {
+      acc[key as keyof T] = value;
+    }
+    return acc;
+  }, {} as Partial<T>);
+}

playground/nextjs/pages/_app.tsx

@@ -1,5 +1,5 @@
-import '../styles/globals.css';
 import type { AppProps } from 'next/app';
+import '../styles/globals.css';
 
 import {
   ClerkProvider,
@@ -91,7 +91,7 @@ const AppBar = (props: AppBarProps) => {
         <option value='shadesOfPurple'>shadesOfPurple</option>
       </select>
       <button onClick={props.onToggleDark}>toggle dark mode</button>
-      <UserButton afterSignOutUrl='/' />
+      <UserButton />
 
       <SignedIn>
         <SignOutButton />