# component The `` component is required to integrate Clerk into your React application, providing session and user context to Clerk's hooks and components. The recommended approach is to wrap your entire app with `` at the entry point to make authentication globally accessible. If you only need authentication for specific routes or pieces of your application, render `` deeper in the component tree. This allows you to implement Clerk's functionality precisely where required without impacting the rest of your app. ## Example filename: src/renderer.tsx ```tsx import { passkeys } from '@clerk/electron/passkeys' import { ClerkProvider } from '@clerk/electron/react' import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import App from './App' const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY if (!PUBLISHABLE_KEY) { throw new Error('Add your Clerk Publishable Key to the .env file') } createRoot(document.getElementById('root')!).render( , ) ``` ## Properties | Property | Type | Description | | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `afterMultiSessionSingleSignOutUrl?` | `null | string` | The full URL or path to navigate to after signing out the current user is complete. This option applies to [multi-session applications](https://clerk.com/docs/guides/secure/session-options.md?sdk=electron#multi-session-applications). | | `afterSignOutUrl?` | `null | string` | The full URL or path to navigate to after successful sign out. | | `allowedRedirectOrigins?` | `(string | RegExp)[]` | An array of domains to validate user-provided redirect URLs against. If no match is made, the redirect is considered unsafe and the default redirect will be used with a warning logged in the console. | | `allowedRedirectProtocols?` | `string[]` | An array of protocols to validate user-provided redirect URLs against. If no match is made, the redirect is considered unsafe and the default redirect will be used with a warning logged in the console. | | `appearance?` | `ExtractAppearanceType`<`TUi`, `Appearance`> | An object to style your components. Will only affect [Clerk Components](https://clerk.com/docs/electron/reference/components/overview.md) and not [Account Portal](https://clerk.com/docs/guides/account-portal/overview.md?sdk=electron) pages. | | `domain?` | `string | (url: URL) => string` | **Required if your application is a satellite application**. Sets the domain of the satellite application. | | `experimental?` | `Autocomplete`<`{ commerce: boolean; persistClient: boolean; rethrowOfflineNetworkErrors: boolean; runtimeEnvironment: "headless"; }`, `Record`<`string`, `any`>> | Enable experimental flags to gain access to new features. These flags are not guaranteed to be stable and may change drastically in between patch or minor versions. | | `initialState?` | `Serializable`<{ actor: undefined | { [x: string]: unknown; sub: string; type?: "agent"; }; factorVerificationAge: [number, number]; organization: undefined | OrganizationResource; orgId: undefined | string; orgPermissions: undefined | string[]; orgRole: undefined | string; orgSlug: undefined | string; session: undefined | SessionResource; sessionClaims: JwtPayload; sessionId: undefined | string; sessionStatus: SessionStatusClaim; user: undefined | UserResource; userId: undefined | string; }> | Provide an initial state of the Clerk client during server-side rendering. You don't need to set this value yourself unless you're [developing an SDK](https://clerk.com/docs/guides/development/sdk-development/overview.md?sdk=electron). | | `isSatellite?` | `boolean | (url: URL) => boolean` | Indicates whether the application is a satellite application. | | `localization?` | [`LocalizationResource`](https://clerk.com/docs/guides/customizing-clerk/localization.md?sdk=electron) | An object to localize your components. Will only affect [Clerk Components](https://clerk.com/docs/electron/reference/components/overview.md) and not [Account Portal](https://clerk.com/docs/guides/account-portal/overview.md?sdk=electron) pages. | | `newSubscriptionRedirectUrl?` | `null | string` | The full URL or path to navigate to after the user completes the checkout and clicks the "Continue" button. | | `nonce?` | `string` | This nonce value will be passed through to the `@clerk/clerk-js` script tag. Use it to implement a [strict-dynamic CSP](https://clerk.com/docs/guides/secure/best-practices/csp-headers.md?sdk=electron#implementing-a-strict-dynamic-csp). Requires the `dynamic` prop to also be set. | | `polling?` | `boolean` | Indicates whether Clerk should poll against Clerk's backend every 5 minutes. Defaults to `true`. | | `prefetchUI?` | `boolean` | Controls prefetching of the `@clerk/ui` script. - `false` - Skip prefetching the UI (for custom UIs using Control Components) - `undefined` (default) - Prefetch UI normally | | `protectAssertion?` | string | () => undefined | string | Promise | A Clerk Protect assertion — a short-lived, signed token you mint from your own backend with the Clerk Backend API — carrying key/value pairs your Protect rules can read. Clerk attaches it to sign-in and sign-up requests. Pass a string if you already have one, or a function to have it re-read for each request. Prefer the function when a page can outlive the token: assertions are short-lived by design, and a string captured here stops applying once it expires. Can also be set later with `Clerk.setProtectAssertion()`. | | `proxyUrl?` | `string | (url: URL) => string | (url: URL) => string` | **Required for applications that run behind a reverse proxy**. The URL that Clerk will proxy requests to. Can be either a relative path (`/__clerk`) or a full URL (`https:///__clerk`). | | `publishableKey?` | `string` | The Clerk Publishable Key for your instance. When omitted, `@clerk/react` reads the key from `VITE_CLERK_PUBLISHABLE_KEY` or `CLERK_PUBLISHABLE_KEY`. Required by `@clerk/electron/react`, which creates the Clerk instance for you. | | `routerDebug?` | `boolean` | If `true`, the router will log debug information to the console. | | `routerPush?` | `(to: string, metadata?: { windowNavigate: (to: string | URL) => void; }) => unknown` | A function which takes the destination path as an argument and performs a "push" navigation. | | `routerReplace?` | `(to: string, metadata?: { windowNavigate: (to: string | URL) => void; }) => unknown` | A function which takes the destination path as an argument and performs a "replace" navigation. | | `satelliteAutoSync?` | `boolean` | Controls whether satellite apps automatically sync with the primary domain on initial page load. When `false` (default), satellite apps will skip the automatic handshake if no session cookies exist, and only trigger the handshake after an explicit sign-in action. This provides the best performance by showing the satellite app immediately without attempting to sync state first. When `true`, satellite apps will automatically trigger a handshake redirect to sync authentication state with the primary domain on first load, even if no session cookies exist. Use this if you want users who are already signed in on the primary domain to be automatically recognized on the satellite. Defaults to `false`. | | `sdkMetadata?` | `{ environment?: string; name: string; version: string; }` | Contains information about the SDK that the host application is using. You don't need to set this value yourself unless you're [developing an SDK](https://clerk.com/docs/guides/development/sdk-development/overview.md?sdk=electron). | | `sdkMetadata.environment?` | `string` | Typically this will be the `NODE_ENV` that the SDK is currently running in. | | `sdkMetadata.name` | `string` | The npm package name of the SDK. | | `sdkMetadata.version` | `string` | The npm package version of the SDK. | | `selectInitialSession?` | (client: ClientResource) => null | SignedInSessionResource | By default, the last signed-in session is used during client initialization. This option allows you to override that behavior, e.g., by selecting a specific session. | | `signInFallbackRedirectUrl?` | `null | string` | The fallback URL to redirect to after the user signs in, if there's no `redirect_url` in the path already. It's recommended to use the [environment variable](https://clerk.com/docs/guides/development/clerk-environment-variables.md?sdk=electron#sign-in-and-sign-up-redirects) instead. Defaults to `'/'`. | | `signInForceRedirectUrl?` | `null | string` | If provided, this URL will always be redirected to after the user signs in. It's recommended to use the [environment variable](https://clerk.com/docs/guides/development/clerk-environment-variables.md?sdk=electron#sign-in-and-sign-up-redirects) instead. | | `signInUrl?` | `string` | This URL will be used for any redirects that might happen and needs to point to your primary application on the client-side. This option is optional for production instances. **It is required to be set for a satellite application in a development instance**. It's recommended to use [the environment variable](https://clerk.com/docs/guides/development/clerk-environment-variables.md?sdk=electron#sign-in-and-sign-up-redirects) instead. | | `signUpFallbackRedirectUrl?` | `null | string` | The fallback URL to redirect to after the user signs up, if there's no `redirect_url` in the path already. It's recommended to use the [environment variable](https://clerk.com/docs/guides/development/clerk-environment-variables.md?sdk=electron#sign-in-and-sign-up-redirects) instead. Defaults to `'/'`. | | `signUpForceRedirectUrl?` | `null | string` | If provided, this URL will always be redirected to after the user signs up. It's recommended to use the [environment variable](https://clerk.com/docs/guides/development/clerk-environment-variables.md?sdk=electron#sign-in-and-sign-up-redirects) instead. | | `signUpUrl?` | `string` | This URL will be used for any redirects that might happen and needs to point to your primary application on the client-side. This option is optional for production instances. **It is required to be set for a satellite application in a development instance**. It's recommended to use [the environment variable](https://clerk.com/docs/guides/development/clerk-environment-variables.md?sdk=electron#sign-in-and-sign-up-redirects) instead. | | `standardBrowser?` | `boolean` | Indicates whether ClerkJS is loaded with the assumption that cookies can be set (browser setup). On native platforms this value must be set to `false`. | | `supportEmail?` | `string` | The support email address for display in authentication screens. Will only affect [Clerk Components](https://clerk.com/docs/electron/reference/components/overview.md) and not [Account Portal](https://clerk.com/docs/guides/account-portal/overview.md?sdk=electron) pages. | | `taskUrls?` | `Partial`<`Record`<`"choose-organization" | "reset-password" | "setup-mfa"`, `string`>> | Customize the URL paths users are redirected to after sign-in or sign-up when specific session tasks need to be completed. When `undefined`, it uses Clerk's default task flow URLs. Defaults to `undefined`. | | `telemetry?` | `false | { debug?: boolean; disabled?: boolean; perEventSampling?: boolean; }` | Controls whether or not Clerk will collect [telemetry data](https://clerk.com/docs/guides/how-clerk-works/security/clerk-telemetry.md?sdk=electron). If set to `debug`, telemetry events are only logged to the console and not sent to Clerk. | | `telemetry?.debug?` | `boolean` | Whether telemetry events are only logged to the console and not sent to Clerk. | | `telemetry?.disabled?` | `boolean` | Whether telemetry will be collected. | | `telemetry?.perEventSampling?` | `boolean` | Whether the sampling rates provided per telemetry event will be ignored and all events will be sent. Defaults to `true`. | | `touchSession?` | `boolean` | By default, the [Clerk Frontend API `touch` endpoint](https://clerk.com/docs/reference/frontend-api/tag/sessions/POST/v1/client/sessions/%7Bsession_id%7D/touch) is called during page focus to keep the last active session alive. This option allows you to disable this behavior. | | `ui?` | { ClerkUI?: ClerkUIConstructor | Promise; } & `TUi` | **Only required if you're bundling Clerk's UI (`@clerk/ui`) instead of loading it from the Clerk CDN**. Provide the UI module to embed Clerk's prebuilt authentication components directly in your application. | | `unsafe_disableDevelopmentModeConsoleWarning?` | `boolean` | Disables the `Clerk has been loaded with development keys` console warning that is logged when Clerk is initialized with development keys. The warning is emitted by `clerk-js` to the browser console; in dev servers that mirror browser logs to the terminal (e.g. Next.js with `experimental.browserDebugInfoInTerminal`), setting this option also stops it from showing up there. Each framework integration also exposes an env-var shortcut so you don't need to thread the option through `` manually: - Next.js: `NEXT_PUBLIC_CLERK_UNSAFE_DISABLE_DEVELOPMENT_MODE_CONSOLE_WARNING` - Astro: `PUBLIC_CLERK_UNSAFE_DISABLE_DEVELOPMENT_MODE_CONSOLE_WARNING` - TanStack Start / React Router: `VITE_CLERK_UNSAFE_DISABLE_DEVELOPMENT_MODE_CONSOLE_WARNING` - Nuxt: `NUXT_PUBLIC_CLERK_UNSAFE_DISABLE_DEVELOPMENT_MODE_CONSOLE_WARNING` [WARNING] The development mode warning is intended to ensure that you don't go to production with a non-production Clerk instance. If you're disabling it, please make sure you don't ship with a non-production Clerk instance! More information: /docs/guides/development/deployment/production | | `waitlistUrl?` | `string` | The full URL or path to the waitlist page. If `undefined`, will redirect to the [Account Portal waitlist page](https://clerk.com/docs/guides/account-portal/overview.md?sdk=electron#waitlist). | | Name | Type | Description | | --------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | passkeys? | PasskeySupport | Enables passkey support. Pass the passkeys export from @clerk/electron/passkeys; when omitted, no passkey code is bundled or initialized. See Configure passkeys for Electron. | The Electron `` sets `standardBrowser`, the `ui` configuration, and the router handlers for you, so it doesn't accept the `Clerk` or `ui` props. Without `routerPush` and `routerReplace`, Clerk ignores its internal virtual-router navigations (so modal flows never reload the renderer). It performs real redirects such as `afterSignOutUrl` with `window.location`, which reloads the renderer on your own origin. Pass `routerPush` and `routerReplace` from your client-side router to keep those navigations in-app. > ``, ``, and the other redirect components navigate to `signInUrl` and `signUpUrl`, which default to the Account Portal, and the Account Portal can't return to an Electron window. Set those props to routes inside your renderer that render `` and ``, and pass `routerPush`. In a single-window app, use `` instead. --- ## Sitemap [Overview of all docs pages](https://clerk.com/docs/llms.txt)