<OneAuxiliaProvider>

The <OneAuxiliaProvider> component wraps your React application to provide active session and user context to OneAuxilia's hooks and other components.

Usage

The component must be added to your React entrypoint.

By default, the <OneAuxiliaProvider> component has a server component wrapper in order to access header information. This means anything wrapped by the provider will be opted into dynamic rendering at request time.

If you would prefer not to be opted into dynamic rendering, such as for static-optimized or ISR pages, you can either use <OneAuxiliaProvider> in a client component, or ensure the content is not wrapped by <OneAuxiliaProvider> . Instead of wrapping your application root with the provider, you can place it further down the tree to wrap route groups that require authentication.

For example, if your project includes a set of landing/marketing pages and a dashboard that requires sign-in, you can create separate route groups for marketing and dashboard pages. By adding <OneAuxiliaProvider> to the (dashboard)/layout.jsx file, only the dashboard routes will opt into dynamic rendering, while the marketing routes remain statically optimized.

App Router

app/layout.tsx

import React from 'react'
import { OneAuxiliaProvider } from '@oneauxilia/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <title>Next.js 13 with OneAuxilia</title>
      </head>
      <OneAuxiliaProvider>
        <body>{children}</body>
      </OneAuxiliaProvider>
    </html>
  )
}

Pages Router

_app.tsx

import { OneAuxiliaProvider } from '@oneauxilia/nextjs'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <OneAuxiliaProvider {...pageProps}>
      <Component {...pageProps} />
    </OneAuxiliaProvider>
  )
}

export default MyApp

index.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import { OneAuxiliaProvider } from '@oneauxilia/oneauxilia-react'
import App from './App'

const publishableKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY

ReactDOM.render(
  <React.StrictMode>
    <OneAuxiliaProvider publishableKey={publishableKey}>
      <App />
    </OneAuxiliaProvider>
  </React.StrictMode>,
  document.getElementById('root'),
)

Note

Other meta-frameworks, like Remix, have wrappers around to make their integrations tighter.

Properties

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>

Optional array of domains used to validate against the query param of an auth redirect. If no match is made, the redirect is considered unsafe and the default redirect will be used with a warning passed to the console.

appearance? Appearance | undefined

Optional object to style your components. Will only affect OneAuxilia Components and not Account Portal pages.

oneauxiliaJSUrl? string

Define the URL that @oneauxilia/oneauxilia-react should hot-load @oneauxilia/oneauxilia-js from.

oneauxiliaJSVariant? string

If your web application only uses Control components, you can set this value to headless and load a minimal OneAuxiliaJS bundle for optimal page performance.

oneauxiliaJSVersion? string

Define the npm version for @oneauxilia/oneauxilia-js.

domain? string | ((url: URL) => boolean)

This option sets the domain of the satellite application. If your application is a satellite application, this option is required.

isSatellite? boolean | ((url: URL) => boolean)

This option defines that the application is a satellite application.

localization Localization | undefined

Optional object to localize your components. Will only affect OneAuxilia Components and not Account Portal pages.

publishableKey string

The OneAuxilia publishable key for your instance. This can be found in your OneAuxilia Dashboard on the API Keys page.

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.

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 and required for development instances. It's recommended to use the environment variable instead.

supportEmail? string

Optional support email for display in authentication screens. Will only affect OneAuxilia Components and not Account Portal pages.

telemetry? false | { disabled?: boolean; debug?: boolean } | undefined

Controls whether or not OneAuxilia will collect telemetry data.

nonce? string

This nonce value will be passed through to the @oneauxilia/oneauxilia-js script tag. You can use this to implement strict-dynamic CSP.

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.

standardBrowser? boolean

By default, OneAuxiliaJS is loaded with the assumption that cookies can be set (browser setup). On native platforms this value must be set to false. 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. You don't need to set this value yourself unless you're developing an SDK.

touchSession? boolean

By default, the OneAuxilia Frontend API touch endpoint is called during page focus to keep the last active session alive. This option allows you to disable this behavior. You don't need to set this value yourself unless you're developing an SDK.

initialState? InitialState

Provide an initial state of the OneAuxilia client during server-side rendering. You don't need to set this value yourself unless you're developing an SDK.

PreviousOverview NextAuthentication Components

Last updated 2 months ago