diff --git a/.changeset/brave-pears-add.md b/.changeset/brave-pears-add.md
index 74870af7af9..ce2ecccbfc2 100644
--- a/.changeset/brave-pears-add.md
+++ b/.changeset/brave-pears-add.md
@@ -1,7 +1,6 @@
---
'@clerk/clerk-js': minor
'@clerk/types': minor
-'@clerk/clerk-react': minor
---
Navigate to tasks on after sign-in/sign-up
diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json
index d5015e80235..b5549943e43 100644
--- a/packages/clerk-js/bundlewatch.config.json
+++ b/packages/clerk-js/bundlewatch.config.json
@@ -1,10 +1,10 @@
{
"files": [
- { "path": "./dist/clerk.js", "maxSize": "572kB" },
- { "path": "./dist/clerk.browser.js", "maxSize": "78kB" },
+ { "path": "./dist/clerk.js", "maxSize": "560kB" },
+ { "path": "./dist/clerk.browser.js", "maxSize": "75kB" },
{ "path": "./dist/clerk.headless.js", "maxSize": "50KB" },
- { "path": "./dist/ui-common*.js", "maxSize": "92KB" },
- { "path": "./dist/vendors*.js", "maxSize": "26.5KB" },
+ { "path": "./dist/ui-common*.js", "maxSize": "89.2KB" },
+ { "path": "./dist/vendors*.js", "maxSize": "25.1KB" },
{ "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },
{ "path": "./dist/createorganization*.js", "maxSize": "5KB" },
{ "path": "./dist/impersonationfab*.js", "maxSize": "5KB" },
diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index 32f0fb7ece7..b02b208651d 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -44,6 +44,7 @@ import type {
OrganizationProfileProps,
OrganizationResource,
OrganizationSwitcherProps,
+ PendingSessionResource,
PublicKeyCredentialCreationOptionsWithoutExtensions,
PublicKeyCredentialRequestOptionsWithoutExtensions,
PublicKeyCredentialWithAuthenticatorAssertionResponse,
@@ -1009,6 +1010,11 @@ export class Clerk implements ClerkInterface {
newSession = this.#getSessionFromClient(newSession?.id);
}
+ if (newSession?.status === 'pending') {
+ await this.#handlePendingSession(newSession);
+ return;
+ }
+
// getToken syncs __session and __client_uat to cookies using events.TokenUpdate dispatched event.
const token = await newSession?.getToken();
if (!token) {
@@ -1058,7 +1064,7 @@ export class Clerk implements ClerkInterface {
await onAfterSetActive();
};
- #handlePendingSession = async (session: SignedInSessionResource) => {
+ #handlePendingSession = async (session: PendingSessionResource) => {
if (!this.environment) {
return;
}
@@ -1067,7 +1073,7 @@ export class Clerk implements ClerkInterface {
// to `pending`
if (inActiveBrowserTab() || !this.#options.standardBrowser) {
await this.#touchCurrentSession(session);
- session = this.#getSessionFromClient(session.id) ?? session;
+ session = (this.#getSessionFromClient(session.id) ?? session) as PendingSessionResource;
}
// Syncs __session and __client_uat, in case the `pending` session
diff --git a/packages/clerk-js/src/ui/common/withRedirect.tsx b/packages/clerk-js/src/ui/common/withRedirect.tsx
index 81336a63ec2..9e0f3b3deed 100644
--- a/packages/clerk-js/src/ui/common/withRedirect.tsx
+++ b/packages/clerk-js/src/ui/common/withRedirect.tsx
@@ -62,9 +62,7 @@ export const withRedirectToAfterSignIn =
(Com
Component,
sessionExistsAndSingleSessionModeEnabled,
({ clerk }) => signInCtx.sessionTaskUrl || signInCtx.afterSignInUrl || clerk.buildAfterSignInUrl(),
- signInCtx.sessionTaskUrl
- ? warnings.cannotRenderSignInComponentWhenTaskExists
- : warnings.cannotRenderSignInComponentWhenSessionExists,
+ warnings.cannotRenderSignInComponentWhenSessionExists,
)(props);
};
@@ -83,9 +81,7 @@ export const withRedirectToAfterSignUp =
(Com
Component,
sessionExistsAndSingleSessionModeEnabled,
({ clerk }) => signUpCtx.sessionTaskUrl || signUpCtx.afterSignUpUrl || clerk.buildAfterSignUpUrl(),
- signUpCtx.sessionTaskUrl
- ? warnings.cannotRenderSignUpComponentWhenTaskExists
- : warnings.cannotRenderSignUpComponentWhenSessionExists,
+ warnings.cannotRenderSignUpComponentWhenSessionExists,
)(props);
};
diff --git a/packages/clerk-js/src/ui/components/SessionTask/SessionTask.tsx b/packages/clerk-js/src/ui/components/SessionTask/SessionTask.tsx
index b869d62265e..27b4a121e38 100644
--- a/packages/clerk-js/src/ui/components/SessionTask/SessionTask.tsx
+++ b/packages/clerk-js/src/ui/components/SessionTask/SessionTask.tsx
@@ -5,10 +5,25 @@ import type { SessionTask } from '@clerk/types';
import { OrganizationListContext } from '../../contexts';
import { OrganizationList } from '../OrganizationList';
-const ContentRegistry: Record = {
- org: () => (
+interface SessionTaskProps {
+ task: SessionTask['key'];
+ redirectUrlComplete: string;
+}
+
+const ContentRegistry: Record<
+ SessionTask['key'],
+ React.ComponentType>
+> = {
+ org: ({ redirectUrlComplete }) => (
// TODO - Hide personal workspace within organization list context based on environment
-
+
),
@@ -17,12 +32,12 @@ const ContentRegistry: Record = {
/**
* @internal
*/
-export function SessionTask({ task }: { task: SessionTask['key'] }): React.ReactNode {
+export function SessionTask({ task, redirectUrlComplete }: SessionTaskProps): React.ReactNode {
const clerk = useClerk();
clerk.telemetry?.record(eventComponentMounted('SessionTask', { task }));
const Content = ContentRegistry[task];
- return ;
+ return ;
}
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx b/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx
index 2a5895836f0..a54391f70ef 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx
@@ -1,6 +1,7 @@
import { useClerk } from '@clerk/shared/react';
import type { SignInModalProps, SignInProps } from '@clerk/types';
import React from 'react';
+import { preloadComponent, SessionTask } from 'ui/lazyModules/components';
import { SESSION_TASK_ROUTE_BY_KEY } from '../../../core/sessionTasks';
import { normalizeRoutingOptions } from '../../../utils/normalizeRoutingOptions';
@@ -10,6 +11,8 @@ import {
SignInContext,
SignUpContext,
useSignInContext,
+ useSignInContext,
+ useSignInContext,
useSignUpContext,
withCoreSessionSwitchGuard,
} from '../../contexts';
@@ -132,7 +135,10 @@ function SignInRoutes(): JSX.Element {
{signInContext.withSessionTasks && (
-
+
)}
@@ -146,7 +152,10 @@ function SignInRoutes(): JSX.Element {
)}
{signInContext.withSessionTasks && (
-
+
)}
@@ -192,7 +201,7 @@ function SignInRoot() {
React.useEffect(() => {
return __internal_setComponentNavigationContext?.({ basePath, navigate });
- }, [basePath, navigate]);
+ }, []);
return (
diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx
index 9e42f7efac8..825db66f3f9 100644
--- a/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx
@@ -1,13 +1,13 @@
import { useClerk } from '@clerk/shared/react';
import type { SignUpModalProps, SignUpProps } from '@clerk/types';
import React from 'react';
+import { useFetch } from 'ui/hooks';
+import { preloadSessionTask, SessionTask } from 'ui/lazyModules/components';
import { SESSION_TASK_ROUTE_BY_KEY } from '../../../core/sessionTasks';
import { SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
import { SignUpContext, useSignUpContext, withCoreSessionSwitchGuard } from '../../contexts';
import { Flow } from '../../customizables';
-import { useFetch } from '../../hooks';
-import { preloadSessionTask, SessionTask } from '../../lazyModules/components';
import { Route, Switch, useRouter, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
import { SignUpContinue } from './SignUpContinue';
import { SignUpSSOCallback } from './SignUpSSOCallback';
@@ -15,6 +15,9 @@ import { SignUpStart } from './SignUpStart';
import { SignUpVerifyEmail } from './SignUpVerifyEmail';
import { SignUpVerifyPhone } from './SignUpVerifyPhone';
+const usePreloadSessionTask = (enabled = false) =>
+ useFetch(enabled ? preloadSessionTask : undefined, 'preloadComponent', { staleTime: Infinity });
+
const usePreloadSessionTask = (enabled = false) =>
useFetch(enabled ? preloadSessionTask : undefined, 'preloadComponent', { staleTime: Infinity });
@@ -36,7 +39,7 @@ function SignUpRoutes(): JSX.Element {
React.useEffect(() => {
return __internal_setComponentNavigationContext?.({ basePath, navigate });
- }, [basePath, navigate]);
+ }, []);
return (
@@ -91,7 +94,10 @@ function SignUpRoutes(): JSX.Element {
{signUpContext.withSessionTasks && (
-
+
)}
diff --git a/packages/clerk-js/src/ui/lazyModules/components.ts b/packages/clerk-js/src/ui/lazyModules/components.ts
index 6182576c716..50c34f78b30 100644
--- a/packages/clerk-js/src/ui/lazyModules/components.ts
+++ b/packages/clerk-js/src/ui/lazyModules/components.ts
@@ -17,8 +17,6 @@ const componentImportPaths = {
UserVerification: () => import(/* webpackChunkName: "userverification" */ './../components/UserVerification'),
Waitlist: () => import(/* webpackChunkName: "waitlist" */ './../components/Waitlist'),
KeylessPrompt: () => import(/* webpackChunkName: "keylessPrompt" */ '../components/KeylessPrompt'),
- PricingTable: () => import(/* webpackChunkName: "pricingTable" */ '../components/PricingTable'),
- Checkout: () => import(/* webpackChunkName: "checkout" */ '../components/Checkout'),
SessionTask: () => import(/* webpackChunkName: "sessionTask" */ '../components/SessionTask'),
} as const;
@@ -91,10 +89,6 @@ export const KeylessPrompt = lazy(() =>
componentImportPaths.KeylessPrompt().then(module => ({ default: module.KeylessPrompt })),
);
-export const PricingTable = lazy(() =>
- componentImportPaths.PricingTable().then(module => ({ default: module.__experimental_PricingTable })),
-);
-
export const preloadSessionTask = () => import(/* webpackChunkName: "sessionTask" */ '../components/SessionTask');
export const SessionTask = lazy(() =>
componentImportPaths.SessionTask().then(module => ({ default: module.SessionTask })),
diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts
index c2b85093152..8634e8a0ce9 100644
--- a/packages/react/src/isomorphicClerk.ts
+++ b/packages/react/src/isomorphicClerk.ts
@@ -92,7 +92,6 @@ type IsomorphicLoadedClerk = Without<
| '__internal_addNavigationListener'
| '__internal_getCachedResources'
| '__internal_reloadInitialResources'
- | '__experimental_commerce'
| '__internal_setComponentNavigationContext'
> & {
client: ClientResource | undefined;
diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts
index e1366319454..def3aab30f8 100644
--- a/packages/types/src/clerk.ts
+++ b/packages/types/src/clerk.ts
@@ -817,7 +817,6 @@ export type ClerkOptions = ClerkOptionsNavigation &
* Clerk will rethrow network errors that occur while the user is offline.
*/
rethrowOfflineNetworkErrors: boolean;
- commerce: boolean;
// `experimental.withSessionTasks` will be removed soon in favor of checking via environment response
withSessionTasks: boolean;
},