Skip to content

Commit 828fdf3

Browse files
LauraBeatrisLauraBeatris
committed
Fix navigation on active sessions
1 parent e1bd64c commit 828fdf3

17 files changed

+137
-69
lines changed

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

Lines changed: 35 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ import type {
6161
RedirectOptions,
6262
Resources,
6363
SDKMetadata,
64-
SetActiveNavigate,
64+
SessionResource,
6565
SetActiveParams,
6666
SignedInSessionResource,
6767
SignInProps,
@@ -1828,7 +1828,12 @@ export class Clerk implements ClerkInterface {
18281828
});
18291829
};
18301830

1831-
const setActiveNavigate: SetActiveNavigate = async ({ session }) => {
1831+
const setActiveNavigate = async ({ session, redirectUrl }: { session: SessionResource; redirectUrl: string }) => {
1832+
if (!session.currentTask) {
1833+
await this.navigate(redirectUrl);
1834+
return;
1835+
}
1836+
18321837
await navigateIfTaskExists(session, {
18331838
baseUrl: params.signInUrl ?? displayConfig.signInUrl,
18341839
navigate: this.navigate,
@@ -1838,8 +1843,9 @@ export class Clerk implements ClerkInterface {
18381843
if (si.status === 'complete') {
18391844
return this.setActive({
18401845
session: si.sessionId,
1841-
redirectUrl: redirectUrls.getAfterSignInUrl(),
1842-
navigate: setActiveNavigate,
1846+
navigate: async ({ session }) => {
1847+
await setActiveNavigate({ session, redirectUrl: redirectUrls.getAfterSignInUrl() });
1848+
},
18431849
});
18441850
}
18451851

@@ -1852,8 +1858,9 @@ export class Clerk implements ClerkInterface {
18521858
case 'complete':
18531859
return this.setActive({
18541860
session: res.createdSessionId,
1855-
redirectUrl: redirectUrls.getAfterSignInUrl(),
1856-
navigate: setActiveNavigate,
1861+
navigate: async ({ session }) => {
1862+
await setActiveNavigate({ session, redirectUrl: redirectUrls.getAfterSignInUrl() });
1863+
},
18571864
});
18581865
case 'needs_first_factor':
18591866
return navigateToFactorOne();
@@ -1902,8 +1909,9 @@ export class Clerk implements ClerkInterface {
19021909
case 'complete':
19031910
return this.setActive({
19041911
session: res.createdSessionId,
1905-
redirectUrl: redirectUrls.getAfterSignUpUrl(),
1906-
navigate: setActiveNavigate,
1912+
navigate: async ({ session }) => {
1913+
await setActiveNavigate({ session, redirectUrl: redirectUrls.getAfterSignUpUrl() });
1914+
},
19071915
});
19081916
case 'missing_requirements':
19091917
return navigateToNextStepSignUp({ missingFields: res.missingFields });
@@ -1915,8 +1923,9 @@ export class Clerk implements ClerkInterface {
19151923
if (su.status === 'complete') {
19161924
return this.setActive({
19171925
session: su.sessionId,
1918-
redirectUrl: redirectUrls.getAfterSignUpUrl(),
1919-
navigate: setActiveNavigate,
1926+
navigate: async ({ session }) => {
1927+
await setActiveNavigate({ session, redirectUrl: redirectUrls.getAfterSignUpUrl() });
1928+
},
19201929
});
19211930
}
19221931

@@ -1940,8 +1949,9 @@ export class Clerk implements ClerkInterface {
19401949
if (sessionId) {
19411950
return this.setActive({
19421951
session: sessionId,
1943-
redirectUrl: redirectUrls.getAfterSignInUrl(),
1944-
navigate: setActiveNavigate,
1952+
navigate: async ({ session }) => {
1953+
await setActiveNavigate({ session, redirectUrl: redirectUrls.getAfterSignInUrl() });
1954+
},
19451955
});
19461956
}
19471957
}
@@ -2122,6 +2132,18 @@ export class Clerk implements ClerkInterface {
21222132
}
21232133
}
21242134

2135+
const setActiveNavigate = async ({ session, redirectUrl }: { session: SessionResource; redirectUrl: string }) => {
2136+
if (!session.currentTask) {
2137+
await this.navigate(redirectUrl);
2138+
return;
2139+
}
2140+
2141+
await navigateIfTaskExists(session, {
2142+
baseUrl: displayConfig.signInUrl,
2143+
navigate: this.navigate,
2144+
});
2145+
};
2146+
21252147
switch (signInOrSignUp.status) {
21262148
case 'needs_second_factor':
21272149
await navigateToFactorTwo();
@@ -2130,12 +2152,8 @@ export class Clerk implements ClerkInterface {
21302152
if (signInOrSignUp.createdSessionId) {
21312153
await this.setActive({
21322154
session: signInOrSignUp.createdSessionId,
2133-
redirectUrl,
21342155
navigate: async ({ session }) => {
2135-
await navigateIfTaskExists(session, {
2136-
baseUrl: displayConfig.signInUrl,
2137-
navigate: this.navigate,
2138-
});
2156+
await setActiveNavigate({ session, redirectUrl: redirectUrl ?? this.buildAfterSignInUrl() });
21392157
},
21402158
});
21412159
}

‎packages/clerk-js/src/ui/components/SessionTasks/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useClerk } from '@clerk/shared/react';
22
import { eventComponentMounted } from '@clerk/shared/telemetry';
3-
import type { SetActiveNavigate } from '@clerk/types';
3+
import type { SessionResource } from '@clerk/types';
44
import { useContext, useEffect, useRef } from 'react';
55

66
import { Card } from '@/ui/elements/Card';
@@ -106,17 +106,17 @@ export const SessionTasks = withCardStateProvider(() => {
106106
);
107107
}
108108

109-
const onPendingSession: SetActiveNavigate = async ({ session }) => {
109+
const navigateOnSetActive = async ({ session }: { session: SessionResource }) => {
110110
const currentTaskKey = session.currentTask?.key;
111111
if (!currentTaskKey) {
112-
return;
112+
return navigate(redirectUrlComplete);
113113
}
114114

115115
return navigate(`./${INTERNAL_SESSION_TASK_ROUTE_BY_KEY[currentTaskKey]}`);
116116
};
117117

118118
return (
119-
<SessionTasksContext.Provider value={{ redirectUrlComplete, currentTaskContainer, onPendingSession }}>
119+
<SessionTasksContext.Provider value={{ redirectUrlComplete, currentTaskContainer, navigateOnSetActive }}>
120120
<SessionTasksRoutes />
121121
</SessionTasksContext.Provider>
122122
);

‎packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useClerk, useOrganizationList, useUser } from '@clerk/shared/react';
22
import type {
33
OrganizationResource,
44
OrganizationSuggestionResource,
5+
SetActiveParams,
56
UserOrganizationInvitationResource,
67
} from '@clerk/types';
78
import React, { useState } from 'react';
@@ -97,7 +98,7 @@ export const ChooseOrganizationScreen = withCardStateProvider(
9798

9899
const MembershipPreview = withCardStateProvider((props: { organization: OrganizationResource }) => {
99100
const card = useCardState();
100-
const { redirectUrlComplete, onPendingSession } = useSessionTasksContext();
101+
const { redirectUrlComplete, navigateOnSetActive } = useSessionTasksContext();
101102
const { isLoaded, setActive } = useOrganizationList();
102103

103104
if (!isLoaded) {
@@ -106,11 +107,19 @@ const MembershipPreview = withCardStateProvider((props: { organization: Organiza
106107

107108
const handleOrganizationClicked = (organization: OrganizationResource) => {
108109
return card.runAsync(async () => {
109-
await setActive({
110+
const setActiveParams: SetActiveParams = {
110111
organization,
111112
redirectUrl: redirectUrlComplete,
112-
navigate: onPendingSession,
113-
});
113+
};
114+
115+
// TODO - Add `onComplete` or `onNextTask` callbacks for `TaskChooseOrganization` standalone usage
116+
if (navigateOnSetActive) {
117+
setActiveParams.navigate = async ({ session }) => {
118+
await navigateOnSetActive({ session, redirectUrl: redirectUrlComplete });
119+
};
120+
}
121+
122+
await setActive(setActiveParams);
114123
});
115124
};
116125

‎packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useOrganizationList } from '@clerk/shared/react';
2+
import type { SetActiveParams } from '@clerk/types';
23

34
import { useSessionTasksContext } from '@/ui/contexts/components/SessionTasks';
45
import { localizationKeys } from '@/ui/customizables';
@@ -19,7 +20,7 @@ type CreateOrganizationScreenProps = {
1920

2021
export const CreateOrganizationScreen = withCardStateProvider((props: CreateOrganizationScreenProps) => {
2122
const card = useCardState();
22-
const { redirectUrlComplete, onPendingSession } = useSessionTasksContext();
23+
const { redirectUrlComplete, navigateOnSetActive } = useSessionTasksContext();
2324
const { createOrganization, isLoaded, setActive } = useOrganizationList({
2425
userMemberships: organizationListParams.userMemberships,
2526
});
@@ -45,7 +46,19 @@ export const CreateOrganizationScreen = withCardStateProvider((props: CreateOrga
4546
try {
4647
const organization = await createOrganization({ name: nameField.value, slug: slugField.value });
4748

48-
await setActive({ organization, redirectUrl: redirectUrlComplete, navigate: onPendingSession });
49+
const setActiveParams: SetActiveParams = {
50+
organization,
51+
redirectUrl: redirectUrlComplete,
52+
};
53+
54+
// TODO - Add `onComplete` or `onNextTask` callbacks for `TaskChooseOrganization` standalone usage
55+
if (navigateOnSetActive) {
56+
setActiveParams.navigate = async ({ session }) => {
57+
await navigateOnSetActive({ session, redirectUrl: redirectUrlComplete });
58+
};
59+
}
60+
61+
await setActive(setActiveParams);
4962
} catch (err) {
5063
handleError(err, [nameField, slugField], card.setError);
5164
}

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const SignInFactorOneAlternativeChannelCodeForm = (props: SignInFactorOne
3434
const signIn = useCoreSignIn();
3535
const card = useCardState();
3636
const { navigate } = useRouter();
37-
const { afterSignInUrl, onPendingSession } = useSignInContext();
37+
const { afterSignInUrl, navigateOnSetActive } = useSignInContext();
3838
const { setActive } = useClerk();
3939
const supportEmail = useSupportEmail();
4040
const clerk = useClerk();
@@ -67,8 +67,9 @@ export const SignInFactorOneAlternativeChannelCodeForm = (props: SignInFactorOne
6767
case 'complete':
6868
return setActive({
6969
session: res.createdSessionId,
70-
redirectUrl: afterSignInUrl,
71-
navigate: onPendingSession,
70+
navigate: async ({ session }) => {
71+
await navigateOnSetActive({ session, redirectUrl: afterSignInUrl });
72+
},
7273
});
7374
case 'needs_second_factor':
7475
return navigate('../factor-two');

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
3535
const signIn = useCoreSignIn();
3636
const card = useCardState();
3737
const { navigate } = useRouter();
38-
const { afterSignInUrl, onPendingSession } = useSignInContext();
38+
const { afterSignInUrl, navigateOnSetActive } = useSignInContext();
3939
const { setActive } = useClerk();
4040
const supportEmail = useSupportEmail();
4141
const clerk = useClerk();
@@ -106,8 +106,9 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
106106
case 'complete':
107107
return setActive({
108108
session: res.createdSessionId,
109-
redirectUrl: afterSignInUrl,
110-
navigate: onPendingSession,
109+
navigate: async ({ session }) => {
110+
await navigateOnSetActive({ session, redirectUrl: afterSignInUrl });
111+
},
111112
});
112113
case 'needs_second_factor':
113114
return navigate('../factor-two');

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
5555
const card = useCardState();
5656
const { setActive } = useClerk();
5757
const signIn = useCoreSignIn();
58-
const { afterSignInUrl, onPendingSession } = useSignInContext();
58+
const { afterSignInUrl, navigateOnSetActive } = useSignInContext();
5959
const supportEmail = useSupportEmail();
6060
const passwordControl = usePasswordControl(props);
6161
const { navigate } = useRouter();
@@ -76,8 +76,9 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
7676
case 'complete':
7777
return setActive({
7878
session: res.createdSessionId,
79-
redirectUrl: afterSignInUrl,
80-
navigate: onPendingSession,
79+
navigate: async ({ session }) => {
80+
await navigateOnSetActive({ session, redirectUrl: afterSignInUrl });
81+
},
8182
});
8283
case 'needs_second_factor':
8384
return navigate('../factor-two');

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ type SignInFactorTwoBackupCodeCardProps = {
2424
export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCardProps) => {
2525
const { onShowAlternativeMethodsClicked } = props;
2626
const signIn = useCoreSignIn();
27-
const { afterSignInUrl, onPendingSession } = useSignInContext();
27+
const { afterSignInUrl, navigateOnSetActive } = useSignInContext();
2828
const { setActive } = useClerk();
2929
const { navigate } = useRouter();
3030
const supportEmail = useSupportEmail();
@@ -54,8 +54,9 @@ export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCa
5454
}
5555
return setActive({
5656
session: res.createdSessionId,
57-
redirectUrl: afterSignInUrl,
58-
navigate: onPendingSession,
57+
navigate: async ({ session }) => {
58+
await navigateOnSetActive({ session, redirectUrl: afterSignInUrl });
59+
},
5960
});
6061
default:
6162
return console.error(clerkInvalidFAPIResponse(res.status, supportEmail));

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ type SignInFactorTwoCodeFormProps = SignInFactorTwoCodeCard & {
3333
export const SignInFactorTwoCodeForm = (props: SignInFactorTwoCodeFormProps) => {
3434
const signIn = useCoreSignIn();
3535
const card = useCardState();
36-
const { afterSignInUrl, onPendingSession } = useSignInContext();
36+
const { afterSignInUrl, navigateOnSetActive } = useSignInContext();
3737
const { setActive } = useClerk();
3838
const { navigate } = useRouter();
3939
const supportEmail = useSupportEmail();
@@ -81,8 +81,9 @@ export const SignInFactorTwoCodeForm = (props: SignInFactorTwoCodeFormProps) =>
8181
}
8282
return setActive({
8383
session: res.createdSessionId,
84-
redirectUrl: afterSignInUrl,
85-
navigate: onPendingSession,
84+
navigate: async ({ session }) => {
85+
await navigateOnSetActive({ session, redirectUrl: afterSignInUrl });
86+
},
8687
});
8788
default:
8889
return console.error(clerkInvalidFAPIResponse(res.status, supportEmail));

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ function SignInStartInternal(): JSX.Element {
8585
const signIn = useCoreSignIn();
8686
const { navigate } = useRouter();
8787
const ctx = useSignInContext();
88-
const { afterSignInUrl, signUpUrl, waitlistUrl, isCombinedFlow, onPendingSession } = ctx;
88+
const { afterSignInUrl, signUpUrl, waitlistUrl, isCombinedFlow, navigateOnSetActive } = ctx;
8989
const supportEmail = useSupportEmail();
9090
const identifierAttributes = useMemo<SignInStartIdentifier[]>(
9191
() => groupIdentifiers(userSettings.enabledFirstFactorIdentifiers),
@@ -236,8 +236,9 @@ function SignInStartInternal(): JSX.Element {
236236
removeClerkQueryParam('__clerk_ticket');
237237
return clerk.setActive({
238238
session: res.createdSessionId,
239-
redirectUrl: afterSignInUrl,
240-
navigate: onPendingSession,
239+
navigate: async ({ session }) => {
240+
await navigateOnSetActive({ session, redirectUrl: afterSignInUrl });
241+
},
241242
});
242243
default: {
243244
console.error(clerkInvalidFAPIResponse(res.status, supportEmail));
@@ -388,8 +389,9 @@ function SignInStartInternal(): JSX.Element {
388389
case 'complete':
389390
return clerk.setActive({
390391
session: res.createdSessionId,
391-
redirectUrl: afterSignInUrl,
392-
navigate: onPendingSession,
392+
navigate: async ({ session }) => {
393+
await navigateOnSetActive({ session, redirectUrl: afterSignInUrl });
394+
},
393395
});
394396
default: {
395397
console.error(clerkInvalidFAPIResponse(res.status, supportEmail));

0 commit comments

Comments
 (0)