Skip to content

Commit 83a1677

Browse files
LauraBeatrisLauraBeatris
committed
Introduce onPendingSession and remove #componentNavigationContext 
1 parent 3996932 commit 83a1677

File tree

18 files changed

+126
-115
lines changed

18 files changed

+126
-115
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -474,6 +474,7 @@ describe('Clerk singleton', () => {
474474
});
475475
});
476476

477+
// TODO -> Refactor tests
477478
describe('with `pending` session status', () => {
478479
const mockSession = {
479480
id: '1',
@@ -525,6 +526,7 @@ describe('Clerk singleton', () => {
525526
});
526527
});
527528

529+
// TODO -> Refactor tests
528530
describe('with force organization selection enabled', () => {
529531
const mockSession = {
530532
id: '1',

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

Lines changed: 46 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import type {
1818
__experimental_CheckoutInstance,
1919
__experimental_CheckoutOptions,
2020
__internal_CheckoutProps,
21-
__internal_ComponentNavigationContext,
2221
__internal_OAuthConsentProps,
2322
__internal_PlanDetailsProps,
2423
__internal_SubscriptionDetailsProps,
@@ -50,6 +49,7 @@ import type {
5049
JoinWaitlistParams,
5150
ListenerCallback,
5251
NavigateOptions,
52+
OnPendingSessionFn,
5353
OrganizationListProps,
5454
OrganizationProfileProps,
5555
OrganizationResource,
@@ -232,7 +232,6 @@ export class Clerk implements ClerkInterface {
232232
#options: ClerkOptions = {};
233233
#pageLifecycle: ReturnType<typeof createPageLifecycle> | null = null;
234234
#touchThrottledUntil = 0;
235-
#componentNavigationContext: __internal_ComponentNavigationContext | null = null;
236235
#publicEventBus = createClerkEventBus();
237236

238237
public __internal_getCachedResources:
@@ -1200,7 +1199,13 @@ export class Clerk implements ClerkInterface {
12001199
/**
12011200
* `setActive` can be used to set the active session and/or organization.
12021201
*/
1203-
public setActive = async ({ session, organization, beforeEmit, redirectUrl }: SetActiveParams): Promise<void> => {
1202+
public setActive = async ({
1203+
session,
1204+
organization,
1205+
beforeEmit,
1206+
redirectUrl,
1207+
onPendingSession,
1208+
}: SetActiveParams): Promise<void> => {
12041209
this.__internal_setActiveInProgress = true;
12051210
try {
12061211
if (!this.client) {
@@ -1259,7 +1264,7 @@ export class Clerk implements ClerkInterface {
12591264
}
12601265

12611266
if (newSession?.status === 'pending') {
1262-
await this.#handlePendingSession(newSession);
1267+
await this.#handlePendingSession(newSession, onPendingSession);
12631268
return;
12641269
}
12651270

@@ -1329,41 +1334,18 @@ export class Clerk implements ClerkInterface {
13291334
}
13301335
};
13311336

1332-
#handlePendingSession = async (session: PendingSessionResource) => {
1333-
/**
1334-
* Do not revalidate server cache when `setActive` is called with a pending
1335-
* session within components, to avoid flash of content and unmount during
1336-
* internal navigation
1337-
*/
1338-
const shouldInvalidateCache = !this.#componentNavigationContext;
1339-
1340-
const onBeforeSetActive: SetActiveHook =
1341-
shouldInvalidateCache &&
1342-
typeof window !== 'undefined' &&
1343-
typeof window.__unstable__onBeforeSetActive === 'function'
1344-
? window.__unstable__onBeforeSetActive
1345-
: noop;
1346-
1347-
const onAfterSetActive: SetActiveHook =
1348-
shouldInvalidateCache &&
1349-
typeof window !== 'undefined' &&
1350-
typeof window.__unstable__onAfterSetActive === 'function'
1351-
? window.__unstable__onAfterSetActive
1352-
: noop;
1353-
1354-
await onBeforeSetActive();
1355-
1337+
#handlePendingSession = async (session: PendingSessionResource, onPendingSession?: OnPendingSessionFn) => {
13561338
if (!this.environment) {
13571339
return;
13581340
}
13591341

1360-
let newSession: SignedInSessionResource | null = session;
1342+
let currentSession: SignedInSessionResource | null = session;
13611343

1362-
// Handles multi-session scenario when switching between `pending` sessions
1363-
// and satisfying task requirements such as organization selection
13641344
if (inActiveBrowserTab() || !this.#options.standardBrowser) {
1345+
// Handles multi-session scenario when switching between `pending` sessions
1346+
// and satisfying task requirements such as organization selection
13651347
await this.#touchCurrentSession(session);
1366-
newSession = this.#getSessionFromClient(session.id) ?? session;
1348+
currentSession = this.#getSessionFromClient(session.id) ?? session;
13671349
}
13681350

13691351
// Syncs __session and __client_uat, in case the `pending` session
@@ -1373,19 +1355,26 @@ export class Clerk implements ClerkInterface {
13731355
eventBus.emit(events.TokenUpdate, { token: null });
13741356
}
13751357

1376-
if (newSession?.currentTask) {
1377-
await navigateToTask(session.currentTask.key, {
1378-
options: this.#options,
1379-
environment: this.environment,
1380-
globalNavigate: this.navigate,
1381-
componentNavigationContext: this.#componentNavigationContext,
1358+
if (currentSession.status === 'pending') {
1359+
const tracker = createBeforeUnloadTracker(this.#options.standardBrowser);
1360+
const onPendingSessionHook = this.__internal_getOption('onPendingSession') ?? onPendingSession;
1361+
const taskUrls = this.__internal_getOption('taskUrls');
1362+
1363+
await tracker.track(async () => {
1364+
if (onPendingSessionHook) {
1365+
await onPendingSessionHook({ session: currentSession });
1366+
} else if (taskUrls) {
1367+
await this.navigate(taskUrls[session.currentTask.key]);
1368+
}
13821369
});
1370+
1371+
if (tracker.isUnloading()) {
1372+
return;
1373+
}
13831374
}
13841375

1385-
this.#setAccessors(session);
1376+
this.#setAccessors(currentSession);
13861377
this.#emit();
1387-
1388-
await onAfterSetActive();
13891378
};
13901379

13911380
public addListener = (listener: ListenerCallback): UnsubscribeCallback => {
@@ -1422,12 +1411,6 @@ export class Clerk implements ClerkInterface {
14221411
return unsubscribe;
14231412
};
14241413

1425-
public __internal_setComponentNavigationContext = (context: __internal_ComponentNavigationContext) => {
1426-
this.#componentNavigationContext = context;
1427-
1428-
return () => (this.#componentNavigationContext = null);
1429-
};
1430-
14311414
public navigate = async (to: string | undefined, options?: NavigateOptions): Promise<unknown> => {
14321415
if (!to || !inBrowser()) {
14331416
return;
@@ -1857,10 +1840,18 @@ export class Clerk implements ClerkInterface {
18571840
});
18581841
};
18591842

1843+
const onPendingSession: OnPendingSessionFn = ({ session }) =>
1844+
navigateToTask(session, {
1845+
baseUrl: displayConfig.signInUrl,
1846+
navigate: this.navigate,
1847+
options: this.#options,
1848+
});
1849+
18601850
if (si.status === 'complete') {
18611851
return this.setActive({
18621852
session: si.sessionId,
18631853
redirectUrl: redirectUrls.getAfterSignInUrl(),
1854+
onPendingSession,
18641855
});
18651856
}
18661857

@@ -1874,6 +1865,7 @@ export class Clerk implements ClerkInterface {
18741865
return this.setActive({
18751866
session: res.createdSessionId,
18761867
redirectUrl: redirectUrls.getAfterSignInUrl(),
1868+
onPendingSession,
18771869
});
18781870
case 'needs_first_factor':
18791871
return navigateToFactorOne();
@@ -1923,6 +1915,7 @@ export class Clerk implements ClerkInterface {
19231915
return this.setActive({
19241916
session: res.createdSessionId,
19251917
redirectUrl: redirectUrls.getAfterSignUpUrl(),
1918+
onPendingSession,
19261919
});
19271920
case 'missing_requirements':
19281921
return navigateToNextStepSignUp({ missingFields: res.missingFields });
@@ -2148,6 +2141,12 @@ export class Clerk implements ClerkInterface {
21482141
await this.setActive({
21492142
session: signInOrSignUp.createdSessionId,
21502143
redirectUrl,
2144+
onPendingSession: ({ session }) =>
2145+
navigateToTask(session, {
2146+
baseUrl: displayConfig.signInUrl,
2147+
navigate: this.navigate,
2148+
options: this.#options,
2149+
}),
21512150
});
21522151
}
21532152
break;

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

Lines changed: 10 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
1-
import type {
2-
__internal_ComponentNavigationContext,
3-
ClerkOptions,
4-
EnvironmentResource,
5-
SessionTask,
6-
} from '@clerk/types';
1+
import type { ClerkOptions, PendingSessionResource, SessionTask } from '@clerk/types';
72

83
import { buildURL } from '../utils';
94

@@ -12,38 +7,23 @@ export const INTERNAL_SESSION_TASK_ROUTE_BY_KEY: Record<SessionTask['key'], stri
127
} as const;
138

149
interface NavigateToTaskOptions {
15-
componentNavigationContext: __internal_ComponentNavigationContext | null;
16-
globalNavigate: (to: string) => Promise<unknown>;
17-
options: ClerkOptions;
18-
environment: EnvironmentResource;
10+
navigate: (to: string) => Promise<unknown>;
11+
baseUrl: string;
12+
options?: ClerkOptions;
1913
}
2014

2115
/**
22-
* Handles navigation to the tasks URL based on the application context such
23-
* as internal component routing or custom flows.
2416
* @internal
2517
*/
26-
export function navigateToTask(
27-
routeKey: keyof typeof INTERNAL_SESSION_TASK_ROUTE_BY_KEY,
28-
{ componentNavigationContext, globalNavigate, options, environment }: NavigateToTaskOptions,
29-
) {
30-
const customTaskUrl = options?.taskUrls?.[routeKey];
31-
const internalTaskRoute = `/tasks/${INTERNAL_SESSION_TASK_ROUTE_BY_KEY[routeKey]}`;
18+
export function navigateToTask(session: PendingSessionResource, { options, navigate, baseUrl }: NavigateToTaskOptions) {
19+
const currentTaskKey = session.currentTask.key;
3220

33-
if (componentNavigationContext && !customTaskUrl) {
34-
return componentNavigationContext.navigate(componentNavigationContext.indexPath + internalTaskRoute);
35-
}
36-
37-
const signInUrl = options['signInUrl'] || environment.displayConfig.signInUrl;
38-
const signUpUrl = options['signUpUrl'] || environment.displayConfig.signUpUrl;
39-
const isReferrerSignUpUrl = window.location.href.startsWith(signUpUrl);
40-
41-
return globalNavigate(
42-
customTaskUrl ??
21+
return navigate(
22+
options?.taskUrls?.[currentTaskKey] ??
4323
buildURL(
4424
{
45-
base: isReferrerSignUpUrl ? signUpUrl : signInUrl,
46-
hashPath: internalTaskRoute,
25+
base: baseUrl,
26+
hashPath: `/tasks/${INTERNAL_SESSION_TASK_ROUTE_BY_KEY[currentTaskKey]}`,
4727
},
4828
{ stringify: true },
4929
),

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ export const ChooseOrganizationScreen = withCardStateProvider(
9797

9898
const MembershipPreview = withCardStateProvider((props: { organization: OrganizationResource }) => {
9999
const card = useCardState();
100+
100101
const { redirectUrlComplete } = useSessionTasksContext();
101102
const { isLoaded, setActive } = useOrganizationList();
102103

@@ -108,6 +109,7 @@ const MembershipPreview = withCardStateProvider((props: { organization: Organiza
108109
return card.runAsync(async () => {
109110
await setActive({
110111
organization,
112+
redirectUrl: redirectUrlComplete,
111113
});
112114
});
113115
};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const CreateOrganizationScreen = withCardStateProvider((props: CreateOrga
4545
try {
4646
const organization = await createOrganization({ name: nameField.value, slug: slugField.value });
4747

48-
await setActive({ organization });
48+
await setActive({ organization, redirectUrl: redirectUrlComplete });
4949
} catch (err) {
5050
handleError(err, [nameField, slugField], card.setError);
5151
}

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

Lines changed: 6 additions & 2 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 } = useSignInContext();
37+
const { afterSignInUrl, onPendingSession } = useSignInContext();
3838
const { setActive } = useClerk();
3939
const supportEmail = useSupportEmail();
4040
const clerk = useClerk();
@@ -65,7 +65,11 @@ export const SignInFactorOneAlternativeChannelCodeForm = (props: SignInFactorOne
6565

6666
switch (res.status) {
6767
case 'complete':
68-
return setActive({ session: res.createdSessionId, redirectUrl: afterSignInUrl });
68+
return setActive({
69+
session: res.createdSessionId,
70+
redirectUrl: afterSignInUrl,
71+
onPendingSession,
72+
});
6973
case 'needs_second_factor':
7074
return navigate('../factor-two');
7175
case 'needs_new_password':

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

Lines changed: 2 additions & 2 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 } = useSignInContext();
38+
const { afterSignInUrl, onPendingSession } = useSignInContext();
3939
const { setActive } = useClerk();
4040
const supportEmail = useSupportEmail();
4141
const clerk = useClerk();
@@ -104,7 +104,7 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
104104

105105
switch (res.status) {
106106
case 'complete':
107-
return setActive({ session: res.createdSessionId, redirectUrl: afterSignInUrl });
107+
return setActive({ session: res.createdSessionId, redirectUrl: afterSignInUrl, onPendingSession });
108108
case 'needs_second_factor':
109109
return navigate('../factor-two');
110110
case 'needs_new_password':

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

Lines changed: 2 additions & 2 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 } = useSignInContext();
58+
const { afterSignInUrl, onPendingSession } = useSignInContext();
5959
const supportEmail = useSupportEmail();
6060
const passwordControl = usePasswordControl(props);
6161
const { navigate } = useRouter();
@@ -74,7 +74,7 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
7474
.then(res => {
7575
switch (res.status) {
7676
case 'complete':
77-
return setActive({ session: res.createdSessionId, redirectUrl: afterSignInUrl });
77+
return setActive({ session: res.createdSessionId, redirectUrl: afterSignInUrl, onPendingSession });
7878
case 'needs_second_factor':
7979
return navigate('../factor-two');
8080
default:

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

Lines changed: 2 additions & 2 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 } = useSignInContext();
27+
const { afterSignInUrl, onPendingSession } = useSignInContext();
2828
const { setActive } = useClerk();
2929
const { navigate } = useRouter();
3030
const supportEmail = useSupportEmail();
@@ -52,7 +52,7 @@ export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCa
5252
queryParams.set('createdSessionId', res.createdSessionId);
5353
return navigate(`../reset-password-success?${queryParams.toString()}`);
5454
}
55-
return setActive({ session: res.createdSessionId, redirectUrl: afterSignInUrl });
55+
return setActive({ session: res.createdSessionId, redirectUrl: afterSignInUrl, onPendingSession });
5656
default:
5757
return console.error(clerkInvalidFAPIResponse(res.status, supportEmail));
5858
}

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

Lines changed: 2 additions & 2 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 } = useSignInContext();
36+
const { afterSignInUrl, onPendingSession } = useSignInContext();
3737
const { setActive } = useClerk();
3838
const { navigate } = useRouter();
3939
const supportEmail = useSupportEmail();
@@ -79,7 +79,7 @@ export const SignInFactorTwoCodeForm = (props: SignInFactorTwoCodeFormProps) =>
7979
queryParams.set('createdSessionId', res.createdSessionId);
8080
return navigate(`../reset-password-success?${queryParams.toString()}`);
8181
}
82-
return setActive({ session: res.createdSessionId, redirectUrl: afterSignInUrl });
82+
return setActive({ session: res.createdSessionId, redirectUrl: afterSignInUrl, onPendingSession });
8383
default:
8484
return console.error(clerkInvalidFAPIResponse(res.status, supportEmail));
8585
}

0 commit comments

Comments
 (0)