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 />

.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 />

.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 />

.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 />

.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 />

.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 />

.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 />

.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 />