diff --git a/.changeset/lazy-impalas-clean.md b/.changeset/lazy-impalas-clean.md new file mode 100644 index 00000000000..9aab34ce785 --- /dev/null +++ b/.changeset/lazy-impalas-clean.md @@ -0,0 +1,6 @@ +--- +'@clerk/clerk-js': patch +'@clerk/types': patch +--- + +Load tasks based on environment settings diff --git a/integration/templates/next-app-router/src/app/layout.tsx b/integration/templates/next-app-router/src/app/layout.tsx index e598334db29..2e56184f39d 100644 --- a/integration/templates/next-app-router/src/app/layout.tsx +++ b/integration/templates/next-app-router/src/app/layout.tsx @@ -24,8 +24,6 @@ export default function RootLayout({ children }: { children: React.ReactNode }) persistClient: process.env.NEXT_PUBLIC_EXPERIMENTAL_PERSIST_CLIENT ? process.env.NEXT_PUBLIC_EXPERIMENTAL_PERSIST_CLIENT === 'true' : undefined, - // `experimental.withSessionTasks` will be removed soon in favor of checking via environment response - withSessionTasks: true, }} > diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json index 659c6c18e7e..f747ecd60b7 100644 --- a/packages/clerk-js/bundlewatch.config.json +++ b/packages/clerk-js/bundlewatch.config.json @@ -1,9 +1,9 @@ { "files": [ - { "path": "./dist/clerk.js", "maxSize": "580.5kB" }, + { "path": "./dist/clerk.js", "maxSize": "580.7kB" }, { "path": "./dist/clerk.browser.js", "maxSize": "79.25kB" }, { "path": "./dist/clerk.headless.js", "maxSize": "55KB" }, - { "path": "./dist/ui-common*.js", "maxSize": "94KB" }, + { "path": "./dist/ui-common*.js", "maxSize": "96KB" }, { "path": "./dist/vendors*.js", "maxSize": "30KB" }, { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" }, { "path": "./dist/createorganization*.js", "maxSize": "5KB" }, @@ -21,6 +21,7 @@ { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" }, { "path": "./dist/pricingTable*.js", "maxSize": "5KB" }, { "path": "./dist/checkout*.js", "maxSize": "9KB" }, - { "path": "./dist/up-billing-page*.js", "maxSize": "1KB" } + { "path": "./dist/up-billing-page*.js", "maxSize": "1KB" }, + { "path": "./dist/sessionTasks*.js", "maxSize": "1KB" } ] } diff --git a/packages/clerk-js/src/core/__tests__/clerk.test.ts b/packages/clerk-js/src/core/__tests__/clerk.test.ts index 50c34e563d3..c2f550c3db1 100644 --- a/packages/clerk-js/src/core/__tests__/clerk.test.ts +++ b/packages/clerk-js/src/core/__tests__/clerk.test.ts @@ -486,14 +486,14 @@ describe('Clerk singleton', () => { getToken: jest.fn(), lastActiveToken: { getRawString: () => 'mocked-token' }, tasks: [{ key: 'org' }], - currentTask: { key: 'org', __internal_getUrl: () => 'https://foocorp.com/add-organization' }, + currentTask: { key: 'org', __internal_getUrl: () => 'https://sut/tasks/add-organization' }, reload: jest.fn(() => Promise.resolve({ id: '1', status: 'pending', user: {}, tasks: [{ key: 'org' }], - currentTask: { key: 'org', __internal_getUrl: () => 'https://foocorp.com/add-organization' }, + currentTask: { key: 'org', __internal_getUrl: () => 'https://sut/tasks/add-organization' }, }), ), }; @@ -2287,7 +2287,7 @@ describe('Clerk singleton', () => { status: 'pending', user: {}, tasks: [{ key: 'org' }], - currentTask: { key: 'org', __internal_getUrl: () => 'https://foocorp.com/add-organization' }, + currentTask: { key: 'org', __internal_getUrl: () => 'https://sut/tasks/add-organization' }, lastActiveToken: { getRawString: () => 'mocked-token' }, }; @@ -2316,7 +2316,7 @@ describe('Clerk singleton', () => { await sut.setActive({ session: mockResource as any as PendingSessionResource }); await sut.__experimental_nextTask(); - expect(mockNavigate.mock.calls[0][0]).toBe('/sign-in#/add-organization'); + expect(mockNavigate.mock.calls[0][0]).toBe('/sign-in#/tasks/add-organization'); }); }); diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index 65cd4c2e923..b1c129f43e4 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -1086,7 +1086,7 @@ export class Clerk implements ClerkInterface { } if (newSession?.currentTask) { - await navigateToTask(session.currentTask, { + await navigateToTask(session.currentTask.key, { globalNavigate: this.navigate, componentNavigationContext: this.#componentNavigationContext, options: this.#options, @@ -1109,7 +1109,7 @@ export class Clerk implements ClerkInterface { } if (session.status === 'pending') { - await navigateToTask(session.currentTask, { + await navigateToTask(session.currentTask.key, { options: this.#options, environment: this.environment, globalNavigate: this.navigate, diff --git a/packages/clerk-js/src/core/sessionTasks.ts b/packages/clerk-js/src/core/sessionTasks.ts index aeef4fc5b85..1971d68e870 100644 --- a/packages/clerk-js/src/core/sessionTasks.ts +++ b/packages/clerk-js/src/core/sessionTasks.ts @@ -24,10 +24,10 @@ interface NavigateToTaskOptions { * @internal */ export function navigateToTask( - task: SessionTask, + routeKey: keyof typeof SESSION_TASK_ROUTE_BY_KEY, { componentNavigationContext, globalNavigate, options, environment }: NavigateToTaskOptions, ) { - const taskRoute = `/${SESSION_TASK_ROUTE_BY_KEY[task.key]}`; + const taskRoute = `/tasks/${SESSION_TASK_ROUTE_BY_KEY[routeKey]}`; if (componentNavigationContext) { return componentNavigationContext.navigate(componentNavigationContext.indexPath + taskRoute); diff --git a/packages/clerk-js/src/ui/common/redirects.ts b/packages/clerk-js/src/ui/common/redirects.ts index 6b785c9d694..088a02a0231 100644 --- a/packages/clerk-js/src/ui/common/redirects.ts +++ b/packages/clerk-js/src/ui/common/redirects.ts @@ -45,7 +45,7 @@ export function buildSessionTaskRedirectUrl({ routing, baseUrl, path, - endpoint: `/${SESSION_TASK_ROUTE_BY_KEY[task.key]}`, + endpoint: `/tasks/${SESSION_TASK_ROUTE_BY_KEY[task.key]}`, authQueryString: null, }); } diff --git a/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx b/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx index d932090e524..d8d2404dbcb 100644 --- a/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx @@ -2,7 +2,7 @@ import { useOrganizationList, useUser } from '@clerk/shared/react'; import { useContext, useState } from 'react'; import { useEnvironment, useOrganizationListContext } from '../../contexts'; -import { SessionTaskContext } from '../../contexts/components/SessionTask'; +import { SessionTasksContext } from '../../contexts/components/SessionTasks'; import { Box, Col, descriptors, Flex, localizationKeys, Spinner } from '../../customizables'; import { Action, Actions, Card, Header, useCardState, withCardStateProvider } from '../../elements'; import { useInView } from '../../hooks'; @@ -112,7 +112,7 @@ export const OrganizationListPage = withCardStateProvider(() => { const OrganizationListFlows = ({ showListInitially }: { showListInitially: boolean }) => { const { navigateAfterCreateOrganization, skipInvitationScreen, hideSlug } = useOrganizationListContext(); const [isCreateOrganizationFlow, setCreateOrganizationFlow] = useState(!showListInitially); - const sessionTaskContext = useContext(SessionTaskContext); + const sessionTasksContext = useContext(SessionTasksContext); return ( <> {!isCreateOrganizationFlow && ( @@ -127,7 +127,7 @@ const OrganizationListFlows = ({ showListInitially }: { showListInitially: boole > diff --git a/packages/clerk-js/src/ui/components/OrganizationList/UserMembershipList.tsx b/packages/clerk-js/src/ui/components/OrganizationList/UserMembershipList.tsx index fa4e36e73dc..f2861af17aa 100644 --- a/packages/clerk-js/src/ui/components/OrganizationList/UserMembershipList.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationList/UserMembershipList.tsx @@ -3,7 +3,7 @@ import type { OrganizationResource } from '@clerk/types'; import { useContext } from 'react'; import { useOrganizationListContext } from '../../contexts'; -import { SessionTaskContext } from '../../contexts/components/SessionTask'; +import { SessionTasksContext } from '../../contexts/components/SessionTasks'; import { OrganizationPreview, PersonalWorkspacePreview, useCardState, withCardStateProvider } from '../../elements'; import { localizationKeys } from '../../localization'; import { OrganizationListPreviewButton, sharedMainIdentifierSx } from './shared'; @@ -12,7 +12,7 @@ export const MembershipPreview = withCardStateProvider((props: { organization: O const card = useCardState(); const { navigateAfterSelectOrganization } = useOrganizationListContext(); const { isLoaded, setActive } = useOrganizationList(); - const sessionTaskContext = useContext(SessionTaskContext); + const sessionTasksContext = useContext(SessionTasksContext); if (!isLoaded) { return null; @@ -23,8 +23,8 @@ export const MembershipPreview = withCardStateProvider((props: { organization: O organization, }); - if (sessionTaskContext?.nextTask) { - return sessionTaskContext?.nextTask(); + if (sessionTasksContext?.nextTask) { + return sessionTasksContext?.nextTask(); } await navigateAfterSelectOrganization(organization); diff --git a/packages/clerk-js/src/ui/components/SessionTask/SessionTask.tsx b/packages/clerk-js/src/ui/components/SessionTask/SessionTask.tsx deleted file mode 100644 index 03710860edd..00000000000 --- a/packages/clerk-js/src/ui/components/SessionTask/SessionTask.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { useClerk } from '@clerk/shared/react'; -import { eventComponentMounted } from '@clerk/shared/telemetry'; -import type { SessionTask } from '@clerk/types'; -import { useCallback, useEffect } from 'react'; - -import { OrganizationListContext } from '../../contexts'; -import { SessionTaskContext as SessionTaskContext } from '../../contexts/components/SessionTask'; -import { useRouter } from '../../router'; -import { OrganizationList } from '../OrganizationList'; - -interface SessionTaskProps { - task: SessionTask['key']; - redirectUrlComplete: string; -} - -const ContentRegistry: Record = { - org: () => ( - - - - ), -}; - -/** - * @internal - */ -export function SessionTask({ task, redirectUrlComplete }: SessionTaskProps): React.ReactNode { - const { session, telemetry, __experimental_nextTask } = useClerk(); - const { navigate } = useRouter(); - - useEffect(() => { - if (session?.currentTask) { - return; - } - - void navigate(redirectUrlComplete); - }, [session?.currentTask, navigate, redirectUrlComplete]); - - telemetry?.record(eventComponentMounted('SessionTask', { task })); - - const nextTask = useCallback( - () => __experimental_nextTask({ redirectUrlComplete }), - [__experimental_nextTask, redirectUrlComplete], - ); - - const Content = ContentRegistry[task]; - - return ( - - - - ); -} diff --git a/packages/clerk-js/src/ui/components/SessionTask/index.ts b/packages/clerk-js/src/ui/components/SessionTask/index.ts deleted file mode 100644 index ddae613a6e2..00000000000 --- a/packages/clerk-js/src/ui/components/SessionTask/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './SessionTask'; diff --git a/packages/clerk-js/src/ui/components/SessionTasks/index.tsx b/packages/clerk-js/src/ui/components/SessionTasks/index.tsx new file mode 100644 index 00000000000..dc97a5cb0f5 --- /dev/null +++ b/packages/clerk-js/src/ui/components/SessionTasks/index.tsx @@ -0,0 +1,92 @@ +import { useClerk } from '@clerk/shared/react'; +import { eventComponentMounted } from '@clerk/shared/telemetry'; +import type { SessionTask } from '@clerk/types'; +import { useCallback, useContext, useEffect } from 'react'; + +import { SESSION_TASK_ROUTE_BY_KEY } from '../../../core/sessionTasks'; +import { OrganizationListContext, SignInContext, SignUpContext } from '../../../ui/contexts'; +import { Card, LoadingCardContainer, withCardStateProvider } from '../../../ui/elements'; +import { + SessionTasksContext as SessionTasksContext, + useSessionTasksContext, +} from '../../contexts/components/SessionTasks'; +import { Route, Switch, useRouter } from '../../router'; +import { OrganizationList } from '../OrganizationList'; + +const SessionTasksStart = withCardStateProvider(() => { + const clerk = useClerk(); + const { navigate } = useRouter(); + const { redirectUrlComplete } = useSessionTasksContext(); + + useEffect(() => { + // Simulates additional latency to avoid a abrupt UI transition when navigating to the next task + const timeoutId = setTimeout(() => { + void clerk.__experimental_nextTask({ redirectUrlComplete }); + }, 500); + return () => clearTimeout(timeoutId); + }, [navigate, clerk, redirectUrlComplete]); + + return ( + + + + + + + ); +}); + +function SessionTaskRoutes(): JSX.Element { + return ( + + + + + + + + + + + ); +} + +/** + * @internal + */ +export function SessionTask(): JSX.Element { + const clerk = useClerk(); + const { navigate } = useRouter(); + const signInContext = useContext(SignInContext); + const signUpContext = useContext(SignUpContext); + + const redirectUrlComplete = + signInContext?.afterSignInUrl ?? signUpContext?.afterSignUpUrl ?? clerk?.buildAfterSignInUrl(); + + useEffect(() => { + const task = clerk.session?.currentTask; + + if (!task) { + void navigate(redirectUrlComplete); + return; + } + + clerk.telemetry?.record(eventComponentMounted('SessionTask', { task: task.key })); + }, [clerk, navigate, redirectUrlComplete]); + + const nextTask = useCallback( + () => clerk.__experimental_nextTask({ redirectUrlComplete }), + [clerk, redirectUrlComplete], + ); + + return ( + + + + ); +} diff --git a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx b/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx index 08416ec915b..7bb9a3316a8 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx +++ b/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx @@ -2,7 +2,7 @@ import { useClerk } from '@clerk/shared/react'; import type { SignInModalProps, SignInProps } from '@clerk/types'; import React from 'react'; -import { SESSION_TASK_ROUTE_BY_KEY } from '../../../core/sessionTasks'; +import { SessionTasks as LazySessionTasks } from '../../../ui/lazyModules/components'; import { normalizeRoutingOptions } from '../../../utils/normalizeRoutingOptions'; import { SignInEmailLinkFlowComplete, SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard'; import type { SignUpContextType } from '../../contexts'; @@ -15,7 +15,7 @@ import { } from '../../contexts'; import { Flow } from '../../customizables'; import { useFetch } from '../../hooks'; -import { preloadSessionTask, SessionTask } from '../../lazyModules/components'; +import { usePreloadTasks } from '../../hooks/usePreloadTasks'; import { Route, Switch, useRouter, VIRTUAL_ROUTER_BASE_PATH } from '../../router'; import { LazySignUpContinue, @@ -130,14 +130,9 @@ function SignInRoutes(): JSX.Element { > - {signInContext.withSessionTasks && ( - - - - )} + + + @@ -147,14 +142,9 @@ function SignInRoutes(): JSX.Element { )} - {signInContext.withSessionTasks && ( - - - - )} + + + @@ -169,9 +159,6 @@ function SignInRoutes(): JSX.Element { const usePreloadSignUp = (enabled = false) => useFetch(enabled ? preloadSignUp : undefined, 'preloadComponent', { staleTime: Infinity }); -const usePreloadSessionTask = (enabled = false) => - useFetch(enabled ? preloadSessionTask : undefined, 'preloadComponent', { staleTime: Infinity }); - function SignInRoot() { const { __internal_setComponentNavigationContext } = useClerk(); const { navigate, indexPath } = useRouter(); @@ -193,8 +180,7 @@ function SignInRoot() { */ usePreloadSignUp(signInContext.isCombinedFlow); - // `experimental.withSessionTasks` will be removed soon in favor of checking via environment response - usePreloadSessionTask(signInContext.withSessionTasks); + usePreloadTasks(); React.useEffect(() => { return __internal_setComponentNavigationContext?.({ indexPath, navigate }); diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx index b8833867273..8668ee07dc9 100644 --- a/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx +++ b/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx @@ -2,12 +2,11 @@ import { useClerk } from '@clerk/shared/react'; import type { SignUpModalProps, SignUpProps } from '@clerk/types'; import React from 'react'; -import { SESSION_TASK_ROUTE_BY_KEY } from '../../../core/sessionTasks'; +import { SessionTasks as LazySessionTasks } from '../../../ui/lazyModules/components'; 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 { usePreloadTasks } from '../../hooks/usePreloadTasks'; import { Route, Switch, useRouter, VIRTUAL_ROUTER_BASE_PATH } from '../../router'; import { SignUpContinue } from './SignUpContinue'; import { SignUpSSOCallback } from './SignUpSSOCallback'; @@ -15,9 +14,6 @@ import { SignUpStart } from './SignUpStart'; import { SignUpVerifyEmail } from './SignUpVerifyEmail'; import { SignUpVerifyPhone } from './SignUpVerifyPhone'; -const usePreloadSessionTask = (enabled = false) => - useFetch(enabled ? preloadSessionTask : undefined, 'preloadComponent', { staleTime: Infinity }); - function RedirectToSignUp() { const clerk = useClerk(); React.useEffect(() => { @@ -27,13 +23,12 @@ function RedirectToSignUp() { } function SignUpRoutes(): JSX.Element { + usePreloadTasks(); + const { __internal_setComponentNavigationContext } = useClerk(); const { navigate, indexPath } = useRouter(); const signUpContext = useSignUpContext(); - // `experimental.withSessionTasks` will be removed soon in favor of checking via environment response - usePreloadSessionTask(signUpContext.withSessionTasks); - React.useEffect(() => { return __internal_setComponentNavigationContext?.({ indexPath, navigate }); }, [indexPath, navigate]); @@ -89,14 +84,9 @@ function SignUpRoutes(): JSX.Element { - {signUpContext.withSessionTasks && ( - - - - )} + + + diff --git a/packages/clerk-js/src/ui/contexts/components/SessionTask.ts b/packages/clerk-js/src/ui/contexts/components/SessionTask.ts deleted file mode 100644 index c2b0afa4f2a..00000000000 --- a/packages/clerk-js/src/ui/contexts/components/SessionTask.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { createContext } from 'react'; - -import type { SessionTaskCtx } from '../../types'; - -export const SessionTaskContext = createContext(null); diff --git a/packages/clerk-js/src/ui/contexts/components/SessionTasks.ts b/packages/clerk-js/src/ui/contexts/components/SessionTasks.ts new file mode 100644 index 00000000000..1c9e0be6c5c --- /dev/null +++ b/packages/clerk-js/src/ui/contexts/components/SessionTasks.ts @@ -0,0 +1,15 @@ +import { createContext, useContext } from 'react'; + +import type { SessionTasksCtx } from '../../types'; + +export const SessionTasksContext = createContext(null); + +export const useSessionTasksContext = () => { + const context = useContext(SessionTasksContext); + + if (context === null) { + throw new Error('Clerk: useSessionTasksContext called outside of the mounted SessionTasks component.'); + } + + return context; +}; diff --git a/packages/clerk-js/src/ui/contexts/components/SignIn.ts b/packages/clerk-js/src/ui/contexts/components/SignIn.ts index 3d5e77f50d7..aa6603ce78b 100644 --- a/packages/clerk-js/src/ui/contexts/components/SignIn.ts +++ b/packages/clerk-js/src/ui/contexts/components/SignIn.ts @@ -32,7 +32,6 @@ export type SignInContextType = SignInCtx & { emailLinkRedirectUrl: string; ssoCallbackUrl: string; isCombinedFlow: boolean; - withSessionTasks: boolean; }; export const SignInContext = createContext(null); @@ -145,6 +144,5 @@ export const useSignInContext = (): SignInContextType => { initialValues: { ...ctx.initialValues, ...initialValuesFromQueryParams }, authQueryString, isCombinedFlow, - withSessionTasks: !!options.experimental?.withSessionTasks, }; }; diff --git a/packages/clerk-js/src/ui/contexts/components/SignUp.ts b/packages/clerk-js/src/ui/contexts/components/SignUp.ts index 7d1d58f6f88..5f9be1727af 100644 --- a/packages/clerk-js/src/ui/contexts/components/SignUp.ts +++ b/packages/clerk-js/src/ui/contexts/components/SignUp.ts @@ -31,7 +31,6 @@ export type SignUpContextType = SignUpCtx & { isCombinedFlow: boolean; emailLinkRedirectUrl: string; ssoCallbackUrl: string; - withSessionTasks: boolean; }; export const SignUpContext = createContext(null); @@ -139,6 +138,5 @@ export const useSignUpContext = (): SignUpContextType => { initialValues: { ...ctx.initialValues, ...initialValuesFromQueryParams }, authQueryString, isCombinedFlow, - withSessionTasks: !!options.experimental?.withSessionTasks, }; }; diff --git a/packages/clerk-js/src/ui/hooks/usePreloadTasks.ts b/packages/clerk-js/src/ui/hooks/usePreloadTasks.ts new file mode 100644 index 00000000000..d43a98eded5 --- /dev/null +++ b/packages/clerk-js/src/ui/hooks/usePreloadTasks.ts @@ -0,0 +1,20 @@ +import { useEnvironment } from '../contexts'; +import { useFetch } from '.'; + +/** + * Preloads tasks based on the environment settings + * @internal + */ +export function usePreloadTasks() { + const { organizationSettings } = useEnvironment(); + + const hasTasks = organizationSettings.forceOrganizationSelection; + + void useFetch( + hasTasks ? () => import(/* webpackChunkName: "sessionTasks" */ '../components/SessionTasks') : undefined, + 'preloadComponent', + { + staleTime: Infinity, + }, + ); +} diff --git a/packages/clerk-js/src/ui/lazyModules/components.ts b/packages/clerk-js/src/ui/lazyModules/components.ts index 6182576c716..4ce33dc78c6 100644 --- a/packages/clerk-js/src/ui/lazyModules/components.ts +++ b/packages/clerk-js/src/ui/lazyModules/components.ts @@ -19,7 +19,7 @@ const componentImportPaths = { KeylessPrompt: () => import(/* webpackChunkName: "keylessPrompt" */ '../components/KeylessPrompt'), PricingTable: () => import(/* webpackChunkName: "pricingTable" */ '../components/PricingTable'), Checkout: () => import(/* webpackChunkName: "checkout" */ '../components/Checkout'), - SessionTask: () => import(/* webpackChunkName: "sessionTask" */ '../components/SessionTask'), + SessionTasks: () => import(/* webpackChunkName: "sessionTasks" */ '../components/SessionTasks'), } as const; export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn }))); @@ -95,9 +95,8 @@ 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 })), +export const SessionTasks = lazy(() => + componentImportPaths.SessionTasks().then(module => ({ default: module.SessionTask })), ); export const preloadComponent = async (component: unknown) => { diff --git a/packages/clerk-js/src/ui/types.ts b/packages/clerk-js/src/ui/types.ts index 338b9d0ed8a..feac0ee05f2 100644 --- a/packages/clerk-js/src/ui/types.ts +++ b/packages/clerk-js/src/ui/types.ts @@ -112,8 +112,9 @@ export type __experimental_CheckoutCtx = __experimental_CheckoutProps & { setIsOpen?: (open: boolean) => void; }; -export type SessionTaskCtx = { - nextTask: () => void; +export type SessionTasksCtx = { + nextTask: () => Promise; + redirectUrlComplete?: string; }; export type AvailableComponentCtx = diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts index ff19882dd30..844fac07949 100644 --- a/packages/types/src/clerk.ts +++ b/packages/types/src/clerk.ts @@ -644,7 +644,7 @@ export interface Clerk { * If all tasks are complete, it navigates to the provided completion URL. * @experimental */ - __experimental_nextTask: (params: NextTaskParams) => Promise; + __experimental_nextTask: (params?: NextTaskParams) => Promise; /** * This is an optional function. @@ -821,8 +821,6 @@ export type ClerkOptions = ClerkOptionsNavigation & */ rethrowOfflineNetworkErrors: boolean; commerce: boolean; - // `experimental.withSessionTasks` will be removed soon in favor of checking via environment response - withSessionTasks: boolean; }, Record >;