Skip to content

Commit f5fb63c

Browse files
dimkldimkl
authored
chore(clerk-js,clerk-react): Consolidate afterSignOut*Url and avoid using DisplayConfig settings (clerk#2414)
1 parent 2e4a430 commit f5fb63c

5 files changed

Lines changed: 32 additions & 25 deletions

File tree

‎.changeset/silly-zebras-dream.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@clerk/clerk-js': major
3+
'@clerk/clerk-react': major
4+
---
5+
6+
Consolidate `afterSignOutOneUrl` & `afterSignOutAllUrl` to `afterSignOutUrl` and drop usage of Dashboard settings in ClerkJS components. The Dashboard settings should only apply to the Account Portal application.

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
import { withRedirectToAfterSignIn } from '../../common';
2-
import { useEnvironment, useSignInContext } from '../../contexts';
2+
import { useEnvironment, useSignInContext, useSignOutContext } from '../../contexts';
33
import { Col, descriptors, Flow, Icon } from '../../customizables';
44
import { Card, Header, PreviewButton, UserPreview, withCardStateProvider } from '../../elements';
55
import { ArrowBlockButton } from '../../elements/ArrowBlockButton';
66
import { useCardState } from '../../elements/contexts';
77
import { Plus, SignOutDouble } from '../../icons';
8-
import { useRouter } from '../../router';
98
import { useMultisessionActions } from '../UserButton/useMultisessionActions';
109

1110
const _SignInAccountSwitcher = () => {
1211
const card = useCardState();
13-
const { navigate } = useRouter();
14-
const { applicationName, userProfileUrl, signInUrl, afterSignOutAllUrl } = useEnvironment().displayConfig;
12+
const { applicationName, userProfileUrl, signInUrl } = useEnvironment().displayConfig;
1513
const { navigateAfterSignIn } = useSignInContext();
14+
const { navigateAfterSignOut } = useSignOutContext();
1615
const { handleSignOutAllClicked, handleSessionClicked, activeSessions, handleAddAccountClicked } =
1716
useMultisessionActions({
18-
navigateAfterSignOut: () => navigate(afterSignOutAllUrl),
17+
navigateAfterSignOut,
1918
navigateAfterSwitchSession: navigateAfterSignIn,
2019
userProfileUrl,
2120
signInUrl,

‎packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,18 @@
1-
import { useClerk, useUser } from '@clerk/shared/react';
1+
import { useUser } from '@clerk/shared/react';
22

3-
import { useEnvironment } from '../../contexts';
3+
import { useSignOutContext } from '../../contexts';
44
import { Col, localizationKeys, Text } from '../../customizables';
55
import type { FormProps } from '../../elements';
66
import { Form, FormButtons, FormContent, useCardState, withCardStateProvider } from '../../elements';
7-
import { useRouter } from '../../router';
87
import { handleError, useFormControl } from '../../utils';
98
import { UserProfileBreadcrumbs } from './UserProfileNavbar';
109

1110
type DeleteUserFormProps = FormProps;
1211
export const DeleteUserForm = withCardStateProvider((props: DeleteUserFormProps) => {
1312
const { onReset } = props;
1413
const card = useCardState();
15-
const environment = useEnvironment();
16-
const router = useRouter();
14+
const { navigateAfterSignOut } = useSignOutContext();
1715
const { user } = useUser();
18-
const clerk = useClerk();
1916

2017
const deleteUser = async () => {
2118
try {
@@ -24,11 +21,7 @@ export const DeleteUserForm = withCardStateProvider((props: DeleteUserFormProps)
2421
}
2522

2623
await user.delete();
27-
if (clerk.client.activeSessions.length > 0) {
28-
await router.navigate(environment.displayConfig.afterSignOutOneUrl);
29-
} else {
30-
await router.navigate(environment.displayConfig.afterSignOutAllUrl);
31-
}
24+
await navigateAfterSignOut();
3225
} catch (e) {
3326
handleError(e, [], card.setError);
3427
}

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

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,19 @@ export const useSignInContext = (): SignInContextType => {
184184
};
185185
};
186186

187+
export type SignOutContextType = {
188+
navigateAfterSignOut: () => any;
189+
};
190+
191+
export const useSignOutContext = (): SignOutContextType => {
192+
const { navigate } = useRouter();
193+
const clerk = useClerk();
194+
195+
const navigateAfterSignOut = () => navigate(clerk.buildAfterSignOutUrl());
196+
197+
return { navigateAfterSignOut };
198+
};
199+
187200
type PagesType = {
188201
routes: NavbarRoute[];
189202
contents: CustomPageContent[];
@@ -229,12 +242,12 @@ export const useUserButtonContext = () => {
229242
const signInUrl = pickRedirectionProp('signInUrl', { ctx, options, displayConfig }, false);
230243
const userProfileUrl = ctx.userProfileUrl || displayConfig.userProfileUrl;
231244

232-
const afterMultiSessionSingleSignOutUrl = ctx.afterMultiSessionSingleSignOutUrl || displayConfig.afterSignOutOneUrl;
233-
const navigateAfterMultiSessionSingleSignOut = () => clerk.redirectWithAuth(afterMultiSessionSingleSignOutUrl);
234-
235245
const afterSignOutUrl = ctx.afterSignOutUrl || clerk.buildAfterSignOutUrl();
236246
const navigateAfterSignOut = () => navigate(afterSignOutUrl);
237247

248+
const afterMultiSessionSingleSignOutUrl = ctx.afterMultiSessionSingleSignOutUrl || afterSignOutUrl;
249+
const navigateAfterMultiSessionSingleSignOut = () => clerk.redirectWithAuth(afterMultiSessionSingleSignOutUrl);
250+
238251
const afterSwitchSessionUrl = ctx.afterSwitchSessionUrl || displayConfig.afterSwitchSessionUrl;
239252
const navigateAfterSwitchSession = () => navigate(afterSwitchSessionUrl);
240253

‎packages/react/src/components/controlComponents.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -143,15 +143,11 @@ export const Protect = ({ children, fallback, ...restAuthorizedParams }: Protect
143143

144144
export const RedirectToSignIn = withClerk(({ clerk, ...props }: WithClerkProp<RedirectToSignInProps>) => {
145145
const { client, session } = clerk;
146-
// TODO: Remove temp use of __unstable__environment
147-
const { __unstable__environment } = clerk as any;
148-
149146
const hasActiveSessions = client.activeSessions && client.activeSessions.length > 0;
150147

151148
React.useEffect(() => {
152-
if (session === null && hasActiveSessions && __unstable__environment) {
153-
const { afterSignOutOneUrl } = __unstable__environment.displayConfig;
154-
void clerk.navigate(afterSignOutOneUrl);
149+
if (session === null && hasActiveSessions) {
150+
void clerk.redirectToAfterSignOut();
155151
} else {
156152
void clerk.redirectToSignIn(props);
157153
}

0 commit comments

Comments
 (0)