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; },