1import { lazy, Suspense, type ReactNode } from "react";
2
3import { isElectron } from "../env";
4import { useCloudAuthentication } from "./activation";
5import { hasCloudPublicConfig, resolveCloudPublicConfig } from "./publicConfig";
6
7const ManagedAuthShell = lazy(() =>
8 isElectron
9 ? import("../components/clerk/ElectronManagedAuthShell")
10 : import("../components/clerk/BrowserManagedAuthShell"),
11);
12
13/** Only cloud fragments gain a provider, so activation preserves the surrounding app. */
14export function CloudAuthBoundary({
15 children,
16 fallback = null,
17}: {
18 readonly children: ReactNode;
19 readonly fallback?: ReactNode;
20}) {
21 const { enabled } = useCloudAuthentication();
22 const { clerkPublishableKey } = resolveCloudPublicConfig();
23 if (!enabled || !clerkPublishableKey || !hasCloudPublicConfig()) return fallback;
24 return (
25 <Suspense fallback={fallback}>
26 <ManagedAuthShell publishableKey={clerkPublishableKey}>{children}</ManagedAuthShell>
27 </Suspense>
28 );
29}