# ClerkApp

> The Remix SDK is in maintenance mode and will only receive security updates. Please migrate to the [React Router SDK](https://clerk.com/docs/core-2/react-router/getting-started/quickstart.md) for continued development and new features.

Clerk provides a `ClerkApp` wrapper to provide the authentication state to your React tree. This helper works with Remix SSR out-of-the-box and follows the "higher-order component" paradigm.

## Usage

filename: app/root.tsx
```tsx
// The rest of your code

function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  )
}

// Wrap your app with `ClerkApp`
export default ClerkApp(App)
```

## Pass configuration options

To pass configuration [options](https://clerk.com/docs/core-2/reference/remix/clerk-app.md#clerk-app-options) to `ClerkApp`, you can pass an optional argument to the `ClerkApp` function.

filename: app/root.tsx
```tsx
// Wrap your app in ClerkApp(app)
export default ClerkApp(App, {
  publishableKey: import.meta.env.VITE_CLERK_PUBLISHABLE_KEY,
})
```

## `ClerkApp` options

| Name                              | Type                                                         | Description                                                                                                                                                                                                                                                                                                              |
| --------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| afterMultiSessionSingleSignOutUrl | string                                                       | The full URL or path to navigate to after a signing out from a currently active account in a multi-session app.                                                                                                                                                                                                          |
| afterSignOutUrl                   | string                                                       | The full URL or path to navigate to after a successful sign-out.                                                                                                                                                                                                                                                         |
| allowedRedirectOrigins            | Array<string | RegExp>                                     | An optional 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          | Array<string>                                               | An optional 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                        | Appearance | undefined                                      | Optional object to style your components. Will only affect Clerk components and not Account Portal pages.                                                                                                                                                                                                                |
| clerkJSUrl                        | string                                                       | Define the URL that @clerk/clerk-js should be hot-loaded from.                                                                                                                                                                                                                                                           |
| clerkJSVariant                    | 'headless' | ''                                             | If your web application only uses control components, you can set this value to headless and load a minimal ClerkJS bundle for optimal page performance.                                                                                                                                                                 |
| clerkJSVersion                    | string                                                       | Define the npm version for @clerk/clerk-js.                                                                                                                                                                                                                                                                              |
| domain                            | string | ((url: URL) => boolean)                            | Required if your application is a satellite application. Sets the domain of the satellite application.                                                                                                                                                                                                                   |
| dynamic                           | boolean                                                      | (For Next.js only) Indicates whether or not Clerk should make dynamic auth data available based on the current request. Defaults to false. Opts the application into dynamic rendering when true. For more information, see Next.js rendering modes and Clerk.                                                           |
| initialState                      | InitialState                                                 | 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.                                                                                                                                                                    |
| isSatellite                       | boolean | ((url: URL) => boolean)                           | Whether the application is a satellite application.                                                                                                                                                                                                                                                                      |
| localization                      | Localization | undefined                                    | Optional object to localize your components. Will only affect Clerk components and not Account Portal pages.                                                                                                                                                                                                             |
| nonce                             | string                                                       | This nonce value will be passed to the @clerk/clerk-js script tag. Use it to implement a strict-dynamic CSP. Requires the dynamic prop to also be set.                                                                                                                                                                   |
| publishableKey                    | string                                                       | The Clerk Publishable Key for your instance. This can be found on the API keys page in the Clerk Dashboard.                                                                                                                                                                                                              |
| proxyUrl                          | string | ((url: URL) => string)                             | The URL that Clerk will proxy requests to. Required for applications that run behind a reverse proxy. Can be either a relative path (/\_\_clerk) or a full URL (https://<your-domain>/__clerk).                                                                                                                      |
| routerPush                        | (to: string) => Promise<unknown> | void                    | A function which takes the destination path as an argument and performs a "push" navigation.                                                                                                                                                                                                                             |
| routerReplace                     | (to: string) => Promise<unknown> | void                    | A function which takes the destination path as an argument and performs a "replace" navigation.                                                                                                                                                                                                                          |
| sdkMetadata                       | { name: string; version: string; environment: 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.                                                                                                                                                                        |
| selectInitialSession              | (client: ClientResource) => ActiveSessionResource | null    | By default, the last active session is used during client initialization. This option allows you to override that behavior, e.g. by selecting a specific session.                                                                                                                                                        |
| signInFallbackRedirectUrl         | string                                                       | The fallback URL to redirect to after the user signs in, if there's no redirect\_url in the path already. Defaults to /. It's recommended to use the environment variable instead.                                                                                                                                       |
| signUpFallbackRedirectUrl         | string                                                       | The fallback URL to redirect to after the user signs up, if there's no redirect\_url in the path already. Defaults to /. It's recommended to use the environment variable instead.                                                                                                                                       |
| signInForceRedirectUrl            | string                                                       | If provided, this URL will always be redirected to after the user signs in. It's recommended to use the environment variable instead.                                                                                                                                                                                    |
| signUpForceRedirectUrl            | string                                                       | If provided, this URL will always be redirected to after the user signs up. It's recommended to use the environment variable 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 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 but must be set for a satellite application in a development instance. It's recommended to use the environment variable instead.           |
| standardBrowser                   | boolean                                                      | By default, 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                                                       | Optional support email for display in authentication screens. Will only affect Clerk components and not Account Portal pages.                                                                                                                                                                                            |
| syncHost                          | string                                                       | Chrome Extension only To enable, pass the URL of the web application that the extension will sync the authentication state from. See the dedicated guide for more information.                                                                                                                                           |
| taskUrls                          | Record<string, string>                                      | The URL paths users are redirected to after sign-up or sign-in when specific session tasks need to be completed. For example, { 'choose-organization': '/onboarding/choose-organization' } redirects users to /onboarding/choose-organization after sign-up if they need to choose an organization.                     |
| telemetry                         | false | { disabled: boolean; debug: boolean } | undefined | Controls whether or not Clerk will collect telemetry data. If set to debug, telemetry events are only logged to the console and not sent to Clerk.                                                                                                                                                                       |
| touchSession                      | boolean                                                      | By default, the Clerk Frontend API touch endpoint is called during page focus to keep the last active session alive. This option allows you to disable this behavior.                                                                                                                                                    |
| waitlistUrl                       | string                                                       | The full URL or path to the waitlist page. If undefined, will redirect to the Account Portal waitlist page.                                                                                                                                                                                                              |

[components-ref]: /docs/reference/components/overview

[ap-ref]: /docs/guides/account-portal/overview

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)
