diff --git a/packages/elements/src/internals/machines/sign-in/router.machine.ts b/packages/elements/src/internals/machines/sign-in/router.machine.ts index c427b8b3e5..3085f82636 100644 --- a/packages/elements/src/internals/machines/sign-in/router.machine.ts +++ b/packages/elements/src/internals/machines/sign-in/router.machine.ts @@ -165,7 +165,6 @@ export const SignInRouterMachine = setup({ resendable: false, resendableAfter: RESENDABLE_COUNTDOWN_DEFAULT, }), - setActive: ({ context, event }) => { if (context.exampleMode) { return; diff --git a/packages/elements/src/react/sign-in/root.tsx b/packages/elements/src/react/sign-in/root.tsx index 683ccea107..aa8bd03bab 100644 --- a/packages/elements/src/react/sign-in/root.tsx +++ b/packages/elements/src/react/sign-in/root.tsx @@ -24,38 +24,17 @@ type SignInFlowProviderProps = { */ fallback?: React.ReactNode; isRootPath: boolean; - - /** - * The base path for your sign-in route. - * Will be automatically inferred in Next.js. - * @example `/sign-in` - */ - path?: string; - /** - * If you want to render Clerk Elements in e.g. a modal, use the `virtual` routing mode. - */ - routing?: ROUTING; }; const actor = createActor(SignInRouterMachine, { inspect }); actor.start(); -function SignInFlowProvider({ children, exampleMode, fallback, isRootPath, path, routing }: SignInFlowProviderProps) { +function SignInFlowProvider({ children, exampleMode, fallback, isRootPath }: SignInFlowProviderProps) { const clerk = useClerk(); const router = useClerkRouter(); const formRef = useFormStore(); - const isReady = useSelector(actor, state => state.value !== 'Idle'); - clerk.telemetry?.record( - eventComponentMounted('Elements_SignInRoot', { - exampleMode: exampleMode || false, - fallback: Boolean(fallback), - path: path || false, - routing: routing || false, - }), - ); - useEffect(() => { if (!clerk || !router) { return; @@ -104,7 +83,18 @@ function SignInFlowProvider({ children, exampleMode, fallback, isRootPath, path, ); } -export type SignInRootProps = Omit; +export type SignInRootProps = Omit & { + /** + * The base path for your sign-in route. + * Will be automatically inferred in Next.js. + * @example `/sign-in` + */ + path?: string; + /** + * If you want to render Clerk Elements in e.g. a modal, use the `virtual` routing mode. + */ + routing?: ROUTING; +}; /** * Root component for the sign-in flow. It sets up providers and state management for its children. @@ -129,8 +119,19 @@ export function SignInRoot({ path: pathProp, routing = ROUTING.path, }: SignInRootProps): JSX.Element | null { + const clerk = useClerk(); const inferredPath = usePathnameWithoutCatchAll(); const path = pathProp || inferredPath || SIGN_IN_DEFAULT_BASE_PATH; + + clerk.telemetry?.record( + eventComponentMounted('Elements_SignInRoot', { + exampleMode, + fallback: Boolean(fallback), + path, + routing, + }), + ); + const router = (routing === ROUTING.virtual ? useVirtualRouter : useClerkHostRouter)(); const isRootPath = path === router.pathname(); @@ -144,8 +145,6 @@ export function SignInRoot({ exampleMode={exampleMode} fallback={fallback} isRootPath={isRootPath} - path={path} - routing={routing} > {children}