Skip to content

Commit 3996932

Browse files
committed
Remove __internal_navigateToTaskIfAvailable
This is main issue with the current after-auth implementation. Navigation should happen within `setActive` due to the session state changes that could could re-render ofpages.
1 parent 4abbf4d commit 3996932

File tree

10 files changed

+13
-114
lines changed

10 files changed

+13
-114
lines changed

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2471,7 +2471,6 @@ describe('Clerk singleton', () => {
24712471
await sut.load(mockedLoadOptions);
24722472

24732473
await sut.setActive({ session: mockResource as any as PendingSessionResource });
2474-
await sut.__internal_navigateToTaskIfAvailable();
24752474

24762475
expect(mockNavigate.mock.calls[0][0]).toBe('/sign-in#/tasks/choose-organization');
24772476
});
@@ -2486,7 +2485,6 @@ describe('Clerk singleton', () => {
24862485
});
24872486

24882487
await sut.setActive({ session: mockResource as any as PendingSessionResource });
2489-
await sut.__internal_navigateToTaskIfAvailable();
24902488

24912489
expect(mockNavigate.mock.calls[0][0]).toBe('/onboarding/choose-organization');
24922490
});
@@ -2535,7 +2533,6 @@ describe('Clerk singleton', () => {
25352533
await sut.setActive({ session: mockSession as any as ActiveSessionResource });
25362534

25372535
const redirectUrlComplete = '/welcome-to-app';
2538-
await sut.__internal_navigateToTaskIfAvailable({ redirectUrlComplete });
25392536

25402537
console.log(mockNavigate.mock.calls);
25412538

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

Lines changed: 6 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import type {
1919
__experimental_CheckoutOptions,
2020
__internal_CheckoutProps,
2121
__internal_ComponentNavigationContext,
22-
__internal_NavigateToTaskIfAvailableParams,
2322
__internal_OAuthConsentProps,
2423
__internal_PlanDetailsProps,
2524
__internal_SubscriptionDetailsProps,
@@ -30,9 +29,9 @@ import type {
3029
AuthenticateWithGoogleOneTapParams,
3130
AuthenticateWithMetamaskParams,
3231
AuthenticateWithOKXWalletParams,
33-
Clerk as ClerkInterface,
3432
ClerkAPIError,
3533
ClerkAuthenticateWithWeb3Params,
34+
Clerk as ClerkInterface,
3635
ClerkOptions,
3736
ClientJSONSnapshot,
3837
ClientResource,
@@ -1374,9 +1373,7 @@ export class Clerk implements ClerkInterface {
13741373
eventBus.emit(events.TokenUpdate, { token: null });
13751374
}
13761375

1377-
// Only triggers navigation for internal AIO components routing or custom URLs
1378-
const shouldNavigateOnSetActive = this.#componentNavigationContext;
1379-
if (newSession?.currentTask && shouldNavigateOnSetActive) {
1376+
if (newSession?.currentTask) {
13801377
await navigateToTask(session.currentTask.key, {
13811378
options: this.#options,
13821379
environment: this.environment,
@@ -1391,60 +1388,6 @@ export class Clerk implements ClerkInterface {
13911388
await onAfterSetActive();
13921389
};
13931390

1394-
public __internal_navigateToTaskIfAvailable = async ({
1395-
redirectUrlComplete,
1396-
}: __internal_NavigateToTaskIfAvailableParams = {}): Promise<void> => {
1397-
const onBeforeSetActive: SetActiveHook =
1398-
typeof window !== 'undefined' && typeof window.__unstable__onBeforeSetActive === 'function'
1399-
? window.__unstable__onBeforeSetActive
1400-
: noop;
1401-
1402-
const onAfterSetActive: SetActiveHook =
1403-
typeof window !== 'undefined' && typeof window.__unstable__onAfterSetActive === 'function'
1404-
? window.__unstable__onAfterSetActive
1405-
: noop;
1406-
1407-
const session = this.session;
1408-
if (!session || !this.environment) {
1409-
return;
1410-
}
1411-
1412-
if (session.status === 'pending') {
1413-
await navigateToTask(session.currentTask.key, {
1414-
options: this.#options,
1415-
environment: this.environment,
1416-
globalNavigate: this.navigate,
1417-
componentNavigationContext: this.#componentNavigationContext,
1418-
});
1419-
return;
1420-
}
1421-
1422-
await onBeforeSetActive();
1423-
1424-
if (redirectUrlComplete) {
1425-
const tracker = createBeforeUnloadTracker(this.#options.standardBrowser);
1426-
1427-
await tracker.track(async () => {
1428-
if (!this.client) {
1429-
return;
1430-
}
1431-
1432-
if (this.client.isEligibleForTouch()) {
1433-
const absoluteRedirectUrl = new URL(redirectUrlComplete, window.location.href);
1434-
await this.navigate(this.buildUrlWithAuth(this.client.buildTouchUrl({ redirectUrl: absoluteRedirectUrl })));
1435-
} else {
1436-
await this.navigate(redirectUrlComplete);
1437-
}
1438-
});
1439-
1440-
if (tracker.isUnloading()) {
1441-
return;
1442-
}
1443-
}
1444-
1445-
await onAfterSetActive();
1446-
};
1447-
14481391
public addListener = (listener: ListenerCallback): UnsubscribeCallback => {
14491392
listener = memoizeListenerCallback(listener);
14501393
this.#listeners.push(listener);
@@ -1915,11 +1858,10 @@ export class Clerk implements ClerkInterface {
19151858
};
19161859

19171860
if (si.status === 'complete') {
1918-
await this.setActive({
1861+
return this.setActive({
19191862
session: si.sessionId,
19201863
redirectUrl: redirectUrls.getAfterSignInUrl(),
19211864
});
1922-
return this.__internal_navigateToTaskIfAvailable();
19231865
}
19241866

19251867
const userExistsButNeedsToSignIn =
@@ -1929,11 +1871,10 @@ export class Clerk implements ClerkInterface {
19291871
const res = await signIn.create({ transfer: true });
19301872
switch (res.status) {
19311873
case 'complete':
1932-
await this.setActive({
1874+
return this.setActive({
19331875
session: res.createdSessionId,
19341876
redirectUrl: redirectUrls.getAfterSignInUrl(),
19351877
});
1936-
return this.__internal_navigateToTaskIfAvailable();
19371878
case 'needs_first_factor':
19381879
return navigateToFactorOne();
19391880
case 'needs_second_factor':
@@ -1979,11 +1920,10 @@ export class Clerk implements ClerkInterface {
19791920
const res = await signUp.create({ transfer: true });
19801921
switch (res.status) {
19811922
case 'complete':
1982-
await this.setActive({
1923+
return this.setActive({
19831924
session: res.createdSessionId,
19841925
redirectUrl: redirectUrls.getAfterSignUpUrl(),
19851926
});
1986-
return this.__internal_navigateToTaskIfAvailable();
19871927
case 'missing_requirements':
19881928
return navigateToNextStepSignUp({ missingFields: res.missingFields });
19891929
default:
@@ -1992,11 +1932,10 @@ export class Clerk implements ClerkInterface {
19921932
}
19931933

19941934
if (su.status === 'complete') {
1995-
await this.setActive({
1935+
return this.setActive({
19961936
session: su.sessionId,
19971937
redirectUrl: redirectUrls.getAfterSignUpUrl(),
19981938
});
1999-
return this.__internal_navigateToTaskIfAvailable();
20001939
}
20011940

20021941
if (si.status === 'needs_second_factor') {
@@ -2032,10 +1971,6 @@ export class Clerk implements ClerkInterface {
20321971
return navigateToNextStepSignUp({ missingFields: signUp.missingFields });
20331972
}
20341973

2035-
if (this.__internal_hasAfterAuthFlows) {
2036-
return this.__internal_navigateToTaskIfAvailable({ redirectUrlComplete: redirectUrls.getAfterSignInUrl() });
2037-
}
2038-
20391974
return navigateToSignIn();
20401975
};
20411976

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const SessionTasksStart = () => {
2424
useEffect(() => {
2525
// Simulates additional latency to avoid a abrupt UI transition when navigating to the next task
2626
const timeoutId = setTimeout(() => {
27-
void clerk.__internal_navigateToTaskIfAvailable({ redirectUrlComplete });
27+
// TODO - call setActive?
2828
}, 500);
2929
return () => clearTimeout(timeoutId);
3030
}, [navigate, clerk, redirectUrlComplete]);

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,6 @@ export const ChooseOrganizationScreen = withCardStateProvider(
9898
const MembershipPreview = withCardStateProvider((props: { organization: OrganizationResource }) => {
9999
const card = useCardState();
100100
const { redirectUrlComplete } = useSessionTasksContext();
101-
const { __internal_navigateToTaskIfAvailable } = useClerk();
102101
const { isLoaded, setActive } = useOrganizationList();
103102

104103
if (!isLoaded) {
@@ -110,8 +109,6 @@ const MembershipPreview = withCardStateProvider((props: { organization: Organiza
110109
await setActive({
111110
organization,
112111
});
113-
114-
await __internal_navigateToTaskIfAvailable({ redirectUrlComplete });
115112
});
116113
};
117114

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

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

33
import { useSessionTasksContext } from '@/ui/contexts/components/SessionTasks';
44
import { localizationKeys } from '@/ui/customizables';
@@ -19,7 +19,6 @@ type CreateOrganizationScreenProps = {
1919

2020
export const CreateOrganizationScreen = withCardStateProvider((props: CreateOrganizationScreenProps) => {
2121
const card = useCardState();
22-
const { __internal_navigateToTaskIfAvailable } = useClerk();
2322
const { redirectUrlComplete } = useSessionTasksContext();
2423
const { createOrganization, isLoaded, setActive } = useOrganizationList({
2524
userMemberships: organizationListParams.userMemberships,
@@ -47,8 +46,6 @@ export const CreateOrganizationScreen = withCardStateProvider((props: CreateOrga
4746
const organization = await createOrganization({ name: nameField.value, slug: slugField.value });
4847

4948
await setActive({ organization });
50-
51-
await __internal_navigateToTaskIfAvailable({ redirectUrlComplete });
5249
} catch (err) {
5350
handleError(err, [nameField, slugField], card.setError);
5451
}

packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ type UseMultisessionActionsParams = {
1919
} & Pick<UserButtonProps, 'userProfileMode' | 'appearance' | 'userProfileProps'>;
2020

2121
export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
22-
const { setActive, signOut, openUserProfile, __internal_navigateToTaskIfAvailable } = useClerk();
22+
const { setActive, signOut, openUserProfile } = useClerk();
2323
const card = useCardState();
2424
const { signedInSessions, otherSessions } = useMultipleSessions({ user: opts.user });
2525
const { navigate } = useRouter();
@@ -70,12 +70,10 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
7070
const handleSessionClicked = (session: SignedInSessionResource) => async () => {
7171
card.setLoading();
7272

73-
return setActive({ session, redirectUrl: opts.afterSwitchSessionUrl })
74-
.then(() => __internal_navigateToTaskIfAvailable())
75-
.finally(() => {
76-
card.setIdle();
77-
opts.actionCompleteCallback?.();
78-
});
73+
return setActive({ session, redirectUrl: opts.afterSwitchSessionUrl }).finally(() => {
74+
card.setIdle();
75+
opts.actionCompleteCallback?.();
76+
});
7977
};
8078

8179
const handleAddAccountClicked = () => {

packages/nextjs/src/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ export {
1212
RedirectToOrganizationProfile,
1313
RedirectToSignIn,
1414
RedirectToSignUp,
15-
RedirectToTask,
1615
RedirectToUserProfile,
1716
} from './client-boundary/controlComponents';
1817

packages/react/src/components/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ export {
2525
RedirectToOrganizationProfile,
2626
RedirectToSignIn,
2727
RedirectToSignUp,
28-
RedirectToTask,
2928
RedirectToUserProfile,
3029
SignedIn,
3130
SignedOut,

packages/react/src/isomorphicClerk.ts

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { loadClerkJsScript } from '@clerk/shared/loadClerkJsScript';
44
import { handleValueOrFn } from '@clerk/shared/utils';
55
import type {
66
__internal_CheckoutProps,
7-
__internal_NavigateToTaskIfAvailableParams,
87
__internal_OAuthConsentProps,
98
__internal_PlanDetailsProps,
109
__internal_SubscriptionDetailsProps,
@@ -743,14 +742,6 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
743742
}
744743
};
745744

746-
__internal_navigateToTaskIfAvailable = async (params?: __internal_NavigateToTaskIfAvailableParams): Promise<void> => {
747-
if (this.clerkjs) {
748-
return this.clerkjs.__internal_navigateToTaskIfAvailable(params);
749-
} else {
750-
return Promise.reject();
751-
}
752-
};
753-
754745
/**
755746
* `setActive` can be used to set the active session and/or organization.
756747
*/

packages/types/src/clerk.ts

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -839,12 +839,6 @@ export interface Clerk {
839839

840840
joinWaitlist: (params: JoinWaitlistParams) => Promise<WaitlistResource>;
841841

842-
/**
843-
* Navigates to the current task or redirects to `redirectUrlComplete` once the session is `active`.
844-
* @internal
845-
*/
846-
__internal_navigateToTaskIfAvailable: (params?: __internal_NavigateToTaskIfAvailableParams) => Promise<void>;
847-
848842
/**
849843
* This is an optional function.
850844
* This function is used to load cached Client and Environment resources if Clerk fails to load them from the Frontend API.
@@ -2155,14 +2149,6 @@ export interface AuthenticateWithGoogleOneTapParams {
21552149
legalAccepted?: boolean;
21562150
}
21572151

2158-
export interface __internal_NavigateToTaskIfAvailableParams {
2159-
/**
2160-
* Full URL or path to navigate to after successfully resolving all tasks
2161-
* @default undefined
2162-
*/
2163-
redirectUrlComplete?: string;
2164-
}
2165-
21662152
export interface LoadedClerk extends Clerk {
21672153
client: ClientResource;
21682154
}

0 commit comments

Comments
 (0)