Skip to content

Commit d30ea1f

Browse files
octoperoctoper
authored
feat(clerk-js): Change the default behaviour of afterSignOutUrl, afterSignIn and afterSignUp (#2020)
* feat(clerk-js): Change the default path of afterSignOutUrl * feat(clerk-js,shared): Use default options if nothing passed when loading Clerk client * chore(repo): Update NextJS playground * chore(clerk-js): Fix typo * chore(repo): Added Changeset * chore(shared): Fixed types for getNonUndefinedValues and added tests * fix(remix): Utility function getEnvVariable return undefined instead of empty string * fix(clerk-js): Give empty object when options are undefined * test(shared): Fixed test for getNonUndefinedValues utility function * fix(clerk-js): Apply changes to ui.retheme * fix(clerk-js): Add missing import * fix(clerk-js): Add missing import * test(clerk-js): Update Clerk redirect tests * chore(repo): Update Changeset * chore(remix): Update return type comment * fix(clerk-js): Use the defaults for afterSignInUrl and afterSignUpUrl as fallbacks * chore(remix): Update return type of getEnvVariable utility function * test(clerk-js): Update test for SignInStart component * test(clerk-js): Update test for SignInStart component in ui.retheme * feat(clerk-js): Removed display config values * chore(repo): Apply Prettier formating * chore(shared): Remove unused import from tests
1 parent 6a33709 commit d30ea1f

19 files changed

+96
-48
lines changed

‎.changeset/spotty-boxes-do.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@clerk/clerk-js': major
3+
'@clerk/shared': patch
4+
---
5+
6+
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

+2-6
Original file line numberDiff line numberDiff line change
@@ -915,13 +915,9 @@ export class Clerk implements ClerkInterface {
915915
buildURL({ base: displayConfig.signInUrl, hashPath: '/reset-password' }, { stringify: true }),
916916
);
917917

918-
const navigateAfterSignIn = makeNavigate(
919-
params.afterSignInUrl || params.redirectUrl || displayConfig.afterSignInUrl,
920-
);
918+
const navigateAfterSignIn = makeNavigate(params.afterSignInUrl || params.redirectUrl || '/');
921919

922-
const navigateAfterSignUp = makeNavigate(
923-
params.afterSignUpUrl || params.redirectUrl || displayConfig.afterSignUpUrl,
924-
);
920+
const navigateAfterSignUp = makeNavigate(params.afterSignUpUrl || params.redirectUrl || '/');
925921

926922
const navigateToContinueSignUp = makeNavigate(
927923
params.continueSignUpUrl ||

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const SignInSocialButtons = React.memo((props: SocialButtonsProps) => {
1818
const ctx = useSignInContext();
1919
const signIn = useCoreSignIn();
2020
const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signInUrl);
21-
const redirectUrlComplete = ctx.afterSignInUrl || displayConfig.afterSignInUrl;
21+
const redirectUrlComplete = ctx.afterSignInUrl || '/';
2222

2323
return (
2424
<SocialButtons

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,7 @@ export function _SignInStart(): JSX.Element {
236236

237237
const authenticateWithSaml = async () => {
238238
const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signInUrl);
239-
const redirectUrlComplete = ctx.afterSignInUrl || displayConfig.afterSignInUrl;
239+
const redirectUrlComplete = ctx.afterSignInUrl || '/';
240240

241241
return signIn.authenticateWithRedirect({
242242
strategy: 'saml',

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -139,8 +139,8 @@ describe('SignInStart', () => {
139139
expect(fixtures.signIn.create).toHaveBeenCalled();
140140
expect(fixtures.signIn.authenticateWithRedirect).toHaveBeenCalledWith({
141141
strategy: 'saml',
142-
redirectUrl: 'http://localhost/#/sso-callback',
143-
redirectUrlComplete: 'https://dashboard.clerk.com',
142+
redirectUrl: 'http://localhost/#/sso-callback?redirect_url=http%3A%2F%2Flocalhost%2F',
143+
redirectUrlComplete: '/',
144144
});
145145
});
146146
});

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const SignUpSocialButtons = React.memo((props: SignUpSocialButtonsProps)
2121
const ctx = useSignUpContext();
2222
const signUp = useCoreSignUp();
2323
const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signUpUrl);
24-
const redirectUrlComplete = ctx.afterSignUpUrl || displayConfig.afterSignUpUrl;
24+
const redirectUrlComplete = ctx.afterSignUpUrl || '/';
2525
const { continueSignUp = false, ...rest } = props;
2626

2727
return (

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ function _SignUpStart(): JSX.Element {
211211
card.setError(undefined);
212212

213213
const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signUpUrl);
214-
const redirectUrlComplete = ctx.afterSignUpUrl || displayConfig.afterSignUpUrl;
214+
const redirectUrlComplete = ctx.afterSignUpUrl || '/';
215215

216216
return signUp
217217
.create(buildRequest(fieldsToSubmit))

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

+5-9
Original file line numberDiff line numberDiff line change
@@ -69,17 +69,15 @@ export const useSignUpContext = (): SignUpContextType => {
6969
queryParams,
7070
ctx,
7171
options,
72-
displayConfig,
73-
}),
72+
}) || '/',
7473
);
7574

7675
const afterSignInUrl = clerk.buildUrlWithAuth(
7776
pickRedirectionProp('afterSignInUrl', {
7877
queryParams,
7978
ctx,
8079
options,
81-
displayConfig,
82-
}),
80+
}) || '/',
8381
);
8482

8583
const navigateAfterSignUp = () => navigate(afterSignUpUrl);
@@ -145,17 +143,15 @@ export const useSignInContext = (): SignInContextType => {
145143
queryParams,
146144
ctx,
147145
options,
148-
displayConfig,
149-
}),
146+
}) || '/',
150147
);
151148

152149
const afterSignInUrl = clerk.buildUrlWithAuth(
153150
pickRedirectionProp('afterSignInUrl', {
154151
queryParams,
155152
ctx,
156153
options,
157-
displayConfig,
158-
}),
154+
}) || '/',
159155
);
160156

161157
const navigateAfterSignIn = () => navigate(afterSignInUrl);
@@ -236,7 +232,7 @@ export const useUserButtonContext = () => {
236232
const afterMultiSessionSingleSignOutUrl = ctx.afterMultiSessionSingleSignOutUrl || displayConfig.afterSignOutOneUrl;
237233
const navigateAfterMultiSessionSingleSignOut = () => clerk.redirectWithAuth(afterMultiSessionSingleSignOutUrl);
238234

239-
const afterSignOutUrl = ctx.afterSignOutUrl || displayConfig.afterSignOutAllUrl;
235+
const afterSignOutUrl = ctx.afterSignOutUrl || '/';
240236
const navigateAfterSignOut = () => navigate(afterSignOutUrl);
241237

242238
const afterSwitchSessionUrl = ctx.afterSwitchSessionUrl || displayConfig.afterSwitchSessionUrl;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const SignInSocialButtons = React.memo((props: SocialButtonsProps) => {
1818
const ctx = useSignInContext();
1919
const signIn = useCoreSignIn();
2020
const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signInUrl);
21-
const redirectUrlComplete = ctx.afterSignInUrl || displayConfig.afterSignInUrl;
21+
const redirectUrlComplete = ctx.afterSignInUrl || '/';
2222

2323
return (
2424
<SocialButtons

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,7 @@ export function _SignInStart(): JSX.Element {
236236

237237
const authenticateWithSaml = async () => {
238238
const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signInUrl);
239-
const redirectUrlComplete = ctx.afterSignInUrl || displayConfig.afterSignInUrl;
239+
const redirectUrlComplete = ctx.afterSignInUrl || '/';
240240

241241
return signIn.authenticateWithRedirect({
242242
strategy: 'saml',

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,8 @@ describe('SignInStart', () => {
138138
expect(fixtures.signIn.create).toHaveBeenCalled();
139139
expect(fixtures.signIn.authenticateWithRedirect).toHaveBeenCalledWith({
140140
strategy: 'saml',
141-
redirectUrl: 'http://localhost/#/sso-callback',
142-
redirectUrlComplete: 'https://dashboard.clerk.com',
141+
redirectUrl: 'http://localhost/#/sso-callback?redirect_url=http%3A%2F%2Flocalhost%2F',
142+
redirectUrlComplete: '/',
143143
});
144144
});
145145
});

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const SignUpSocialButtons = React.memo((props: SignUpSocialButtonsProps)
2121
const ctx = useSignUpContext();
2222
const signUp = useCoreSignUp();
2323
const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signUpUrl);
24-
const redirectUrlComplete = ctx.afterSignUpUrl || displayConfig.afterSignUpUrl;
24+
const redirectUrlComplete = ctx.afterSignUpUrl || '/';
2525
const { continueSignUp = false, ...rest } = props;
2626

2727
return (

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ function _SignUpStart(): JSX.Element {
211211
card.setError(undefined);
212212

213213
const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signUpUrl);
214-
const redirectUrlComplete = ctx.afterSignUpUrl || displayConfig.afterSignUpUrl;
214+
const redirectUrlComplete = ctx.afterSignUpUrl || '/';
215215

216216
return signUp
217217
.create(buildRequest(fieldsToSubmit))

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

+5-9
Original file line numberDiff line numberDiff line change
@@ -69,17 +69,15 @@ export const useSignUpContext = (): SignUpContextType => {
6969
queryParams,
7070
ctx,
7171
options,
72-
displayConfig,
73-
}),
72+
}) || '/',
7473
);
7574

7675
const afterSignInUrl = clerk.buildUrlWithAuth(
7776
pickRedirectionProp('afterSignInUrl', {
7877
queryParams,
7978
ctx,
8079
options,
81-
displayConfig,
82-
}),
80+
}) || '/',
8381
);
8482

8583
const navigateAfterSignUp = () => navigate(afterSignUpUrl);
@@ -145,17 +143,15 @@ export const useSignInContext = (): SignInContextType => {
145143
queryParams,
146144
ctx,
147145
options,
148-
displayConfig,
149-
}),
146+
}) || '/',
150147
);
151148

152149
const afterSignInUrl = clerk.buildUrlWithAuth(
153150
pickRedirectionProp('afterSignInUrl', {
154151
queryParams,
155152
ctx,
156153
options,
157-
displayConfig,
158-
}),
154+
}) || '/',
159155
);
160156

161157
const navigateAfterSignIn = () => navigate(afterSignInUrl);
@@ -236,7 +232,7 @@ export const useUserButtonContext = () => {
236232
const afterMultiSessionSingleSignOutUrl = ctx.afterMultiSessionSingleSignOutUrl || displayConfig.afterSignOutOneUrl;
237233
const navigateAfterMultiSessionSingleSignOut = () => clerk.redirectWithAuth(afterMultiSessionSingleSignOutUrl);
238234

239-
const afterSignOutUrl = ctx.afterSignOutUrl || displayConfig.afterSignOutAllUrl;
235+
const afterSignOutUrl = ctx.afterSignOutUrl || '/';
240236
const navigateAfterSignOut = () => navigate(afterSignOutUrl);
241237

242238
const afterSwitchSessionUrl = ctx.afterSwitchSessionUrl || displayConfig.afterSwitchSessionUrl;

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

+1-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
1+
import { getNonUndefinedValues } from '@clerk/shared';
12
import type { ClerkPaginationParams, ClerkPaginationRequest } from '@clerk/types';
23

3-
function getNonUndefinedValues<T>(obj: Record<string, T>): Record<string, T> {
4-
return Object.keys(obj).reduce((result, key) => {
5-
if (obj[key] !== undefined) {
6-
result[key] = obj[key];
7-
}
8-
return result;
9-
}, {} as Record<string, T>);
10-
}
114
export function convertPageToOffset<T extends ClerkPaginationParams | undefined>(
125
pageParams: T,
136
): ClerkPaginationRequest {

‎packages/remix/src/utils.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export function assertValidClerkState(val: any): asserts val is ClerkState | und
2929
* Utility function to get env variables across Node and Edge runtimes.
3030
*
3131
* @param name
32-
* @returns
32+
* @returns string
3333
*/
3434
export const getEnvVariable = (name: string, context: AppLoadContext | undefined): string => {
3535
// Node envs

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

+53-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { deepCamelToSnake, deepSnakeToCamel, isIPV4Address, isTruthy, titleize, toSentence } from '../underscore';
1+
import {
2+
deepCamelToSnake,
3+
deepSnakeToCamel,
4+
getNonUndefinedValues,
5+
isIPV4Address,
6+
isTruthy,
7+
titleize,
8+
toSentence,
9+
} from '../underscore';
210

311
describe('toSentence', () => {
412
it('returns a single item as-is', () => {
@@ -204,3 +212,47 @@ describe(`isTruthy`, () => {
204212
expect(isTruthy(`foobar`)).toBe(false);
205213
});
206214
});
215+
216+
describe('getNonUndefinedValues', () => {
217+
it(`removes all the undefined values from the object`, () => {
218+
const obj = {
219+
a: 1,
220+
b: undefined,
221+
c: null,
222+
};
223+
expect(getNonUndefinedValues(obj)).toStrictEqual({
224+
a: 1,
225+
c: null,
226+
});
227+
});
228+
229+
it(`returns the same object if no undefined value exists`, () => {
230+
const obj = {
231+
a: 1,
232+
b: 'foo',
233+
c: null,
234+
};
235+
expect(getNonUndefinedValues(obj)).toStrictEqual(obj);
236+
expect(getNonUndefinedValues({})).toStrictEqual({});
237+
});
238+
239+
it(`removes only the undefined values from the top level`, () => {
240+
const obj = {
241+
a: 1,
242+
b: undefined,
243+
c: null,
244+
e: {
245+
f: undefined,
246+
g: 1,
247+
},
248+
};
249+
expect(getNonUndefinedValues(obj)).toStrictEqual({
250+
a: 1,
251+
c: null,
252+
e: {
253+
f: undefined,
254+
g: 1,
255+
},
256+
});
257+
});
258+
});

‎packages/shared/src/underscore.ts

+9
Original file line numberDiff line numberDiff line change
@@ -108,3 +108,12 @@ export function isTruthy(value: unknown): boolean {
108108
// Default to false
109109
return false;
110110
}
111+
112+
export function getNonUndefinedValues<T extends object>(obj: T): Partial<T> {
113+
return Object.entries(obj).reduce((acc, [key, value]) => {
114+
if (value !== undefined) {
115+
acc[key as keyof T] = value;
116+
}
117+
return acc;
118+
}, {} as Partial<T>);
119+
}

‎playground/nextjs/pages/_app.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import '../styles/globals.css';
21
import type { AppProps } from 'next/app';
2+
import '../styles/globals.css';
33

44
import {
55
ClerkProvider,
@@ -91,7 +91,7 @@ const AppBar = (props: AppBarProps) => {
9191
<option value='shadesOfPurple'>shadesOfPurple</option>
9292
</select>
9393
<button onClick={props.onToggleDark}>toggle dark mode</button>
94-
<UserButton afterSignOutUrl='/' />
94+
<UserButton />
9595

9696
<SignedIn>
9797
<SignOutButton />

0 commit comments

Comments
 (0)