`<DeploymentProvider/>` component

<DeploymentProvider /> is the shared root for the frontend adapters. Under the hood the adapter-specific provider just creates the right router adapter and forwards publicKey and uiOverwrites into the shared JSX provider.

Usage

The following example shows a basic usage of <DeploymentProvider />.

import { DeploymentProvider } from '@wacht/nextjs';export default function DeploymentProviderUsage() {  return (    <>      <DeploymentProvider publicKey={PUBLIC_KEY}>        {children}      </DeploymentProvider>    </>  );}

Properties

All properties are optional unless otherwise noted.

›

publicKey: string;

The publishable key for the deployment. The provider decodes this key to discover the backend host and load deployment state.

›

uiOverwrites?: Partial<DeploymentUISettings> | undefined;

Optional UI overrides applied on top of the loaded deployment UI settings. This is useful when you want hosted defaults but need in-app auth routes or redirect URLs to point somewhere else.

›

deployment_id?: number | undefined;

Override the deployment UI settings record identifier.

›

app_name?: string | undefined;

Override the product or application name shown in shared auth UI.

›

privacy_policy_url?: string | undefined;

Override the privacy policy URL shown in auth surfaces.

›

tos_page_url?: string | undefined;

Override the terms of service URL shown in auth surfaces.

›

sign_in_page_url?: string | undefined;

Override the sign-in route used by shared navigation helpers and hosted auth redirects.

›

sign_up_page_url?: string | undefined;

Override the sign-up route used by shared navigation helpers and sign-up entry points.

›

waitlist_page_url?: string | undefined;

Override the waitlist page URL used by waitlist flows.

›

support_page_url?: string | undefined;

Override the support page URL linked from auth and recovery flows.

›

after_logo_click_url?: string | undefined;

Override the URL used when a user clicks the logo in shared auth UI.

›

user_profile_url?: string | undefined;

Override the user profile page URL used by account navigation.

›

organization_profile_url?: string | undefined;

Override the organization profile page URL used by organization management flows.

›

create_organization_url?: string | undefined;

Override the create-organization page URL used by organization creation flows.

›

after_sign_out_one_page_url?: string | undefined;

Override the redirect target after signing out only the active sign-in.

›

after_sign_out_all_page_url?: string | undefined;

Override the redirect target after signing out the whole session.

›

after_signup_redirect_url?: string | undefined;

Override the default redirect target after sign-up completes.

›

after_signin_redirect_url?: string | undefined;

Override the default redirect target after sign-in completes.

›

after_create_organization_redirect_url?: string | undefined;

Override the redirect target after creating an organization.

›

favicon_image_url?: string | undefined;

Override the favicon image URL used by shared auth pages.

›

default_user_profile_image_url?: string | undefined;

Override the default user profile image URL.

›

default_organization_profile_image_url?: string | undefined;

Override the default organization profile image URL.

›

default_workspace_profile_image_url?: string | undefined;

Override the default workspace profile image URL.

›

use_initials_for_user_profile_image?: boolean | undefined;

Whether shared UI should use initials when a user profile image is missing.

›

use_initials_for_organization_profile_image?: boolean | undefined;

Whether shared UI should use initials when an organization profile image is missing.

›

logo_image_url?: string | undefined;

Override the logo image URL used in shared auth UI.

›

signup_terms_statement?: string | undefined;

Override the sign-up terms statement shown during registration.

›

signup_terms_statement_shown?: boolean | undefined;

Whether the sign-up terms statement should be shown.

›

light_mode_settings?: LightModeSettings | undefined;

Override the light mode theme settings used by the embedded UI.

›

primary_color?: string | undefined;

Override the light mode primary color.

›

background_color?: string | undefined;

Override the light mode background color.

›

text_color?: string | undefined;

Override the light mode text color.

›

token_overrides?: UITokenOverrides | undefined;

Fine-grained light mode token overrides for the embedded UI theme.

›

space_unit?: string | undefined;

Override the base spacing unit used by the shared UI theme.

›

card?: string | undefined;

Override the card background color.

›

card_foreground?: string | undefined;

Override the card foreground color.

›

popover?: string | undefined;

Override the popover background color.

›

popover_foreground?: string | undefined;

Override the popover foreground color.

›

primary_foreground?: string | undefined;

Override the foreground color used on primary surfaces.

›

secondary?: string | undefined;

Override the secondary surface color.

›

secondary_foreground?: string | undefined;

Override the foreground color used on secondary surfaces.

›

accent?: string | undefined;

Override the accent surface color.

›

accent_foreground?: string | undefined;

Override the foreground color used on accent surfaces.

›

ring?: string | undefined;

Override the focus ring color.

›

foreground?: string | undefined;

Override the main foreground color.

›

foreground_inverse?: string | undefined;

Override the inverse foreground color.

›

secondary_text?: string | undefined;

Override the secondary text color.

›

muted?: string | undefined;

Override the muted text or surface color.

›

border?: string | undefined;

Override the default border color.

›

border_hover?: string | undefined;

Override the border color used on hover states.

›

divider?: string | undefined;

Override the divider color.

›

input_background?: string | undefined;

Override the input background color.

›

input_border?: string | undefined;

Override the input border color.

›

input_focus_border?: string | undefined;

Override the input border color used on focus.

›

background_subtle?: string | undefined;

Override the subtle background color.

›

background_hover?: string | undefined;

Override the background color used on hover states.

›

primary_hover?: string | undefined;

Override the hover color for primary actions.

›

error?: string | undefined;

Override the error text or accent color.

›

error_background?: string | undefined;

Override the error background color.

›

error_border?: string | undefined;

Override the error border color.

›

warning?: string | undefined;

Override the warning text or accent color.

›

warning_background?: string | undefined;

Override the warning background color.

›

warning_border?: string | undefined;

Override the warning border color.

›

warning_text?: string | undefined;

Override the warning text color.

›

success?: string | undefined;

Override the success text or accent color.

›

success_background?: string | undefined;

Override the success background color.

›

success_border?: string | undefined;

Override the success border color.

›

info?: string | undefined;

Override the info text or accent color.

›

info_background?: string | undefined;

Override the info background color.

›

radius_md?: string | undefined;

Override the medium radius token.

›

radius_lg?: string | undefined;

Override the large radius token.

›

radius_xl?: string | undefined;

Override the extra-large radius token.

›

radius_2xl?: string | undefined;

Override the 2xl radius token.

›

radius_2xs?: string | undefined;

Override the 2xs radius token.

›

radius_xs?: string | undefined;

Override the extra-small radius token.

›

radius_full?: string | undefined;

Override the fully rounded radius token.

›

border_width_thin?: string | undefined;

Override the thin border width token.

›

border_width_regular?: string | undefined;

Override the regular border width token.

›

scrollbar_track?: string | undefined;

Override the scrollbar track color.

›

scrollbar_thumb?: string | undefined;

Override the scrollbar thumb color.

›

scrollbar_thumb_hover?: string | undefined;

Override the scrollbar thumb hover color.

›

shadow_color?: string | undefined;

Override the base shadow color.

›

shadow_light_color?: string | undefined;

Override the light shadow color.

›

shadow_medium_color?: string | undefined;

Override the medium shadow color.

›

success_shadow?: string | undefined;

Override the success shadow color.

›

success_background_light?: string | undefined;

Override the light success background color.

›

button_ripple?: string | undefined;

Override the button ripple color.

›

dialog_backdrop?: string | undefined;

Override the dialog backdrop color.

›

space_0u?: string | undefined;

Override the 0u spacing token.

›

space_1u?: string | undefined;

Override the 1u spacing token.

›

space_2u?: string | undefined;

Override the 2u spacing token.

›

space_3u?: string | undefined;

Override the 3u spacing token.

›

space_4u?: string | undefined;

Override the 4u spacing token.

›

space_5u?: string | undefined;

Override the 5u spacing token.

›

space_6u?: string | undefined;

Override the 6u spacing token.

›

space_7u?: string | undefined;

Override the 7u spacing token.

›

space_8u?: string | undefined;

Override the 8u spacing token.

›

space_10u?: string | undefined;

Override the 10u spacing token.

›

space_12u?: string | undefined;

Override the 12u spacing token.

›

space_14u?: string | undefined;

Override the 14u spacing token.

›

space_16u?: string | undefined;

Override the 16u spacing token.

›

space_24u?: string | undefined;

Override the 24u spacing token.

›

font_size_2xs?: string | undefined;

Override the 2xs font size token.

›

font_size_xs?: string | undefined;

Override the xs font size token.

›

font_size_sm?: string | undefined;

Override the sm font size token.

›

font_size_md?: string | undefined;

Override the md font size token.

›

font_size_lg?: string | undefined;

Override the lg font size token.

›

font_size_xl?: string | undefined;

Override the xl font size token.

›

font_size_2xl?: string | undefined;

Override the 2xl font size token.

›

font_size_3xl?: string | undefined;

Override the 3xl font size token.

›

size_8u?: string | undefined;

Override the 8u size token.

›

size_10u?: string | undefined;

Override the 10u size token.

›

size_12u?: string | undefined;

Override the 12u size token.

›

size_18u?: string | undefined;

Override the 18u size token.

›

size_20u?: string | undefined;

Override the 20u size token.

›

size_24u?: string | undefined;

Override the 24u size token.

›

size_32u?: string | undefined;

Override the 32u size token.

›

size_36u?: string | undefined;

Override the 36u size token.

›

size_40u?: string | undefined;

Override the 40u size token.

›

size_45u?: string | undefined;

Override the 45u size token.

›

size_50u?: string | undefined;

Override the 50u size token.

›

shadow_sm?: string | undefined;

Override the small shadow token.

›

shadow_md?: string | undefined;

Override the medium shadow token.

›

shadow_lg?: string | undefined;

Override the large shadow token.

›

shadow_xl?: string | undefined;

Override the xl shadow token.

›

shadow_success?: string | undefined;

Override the success shadow token.

›

ring_primary?: string | undefined;

Override the primary ring color token.

›

letter_spacing_tight?: string | undefined;

Override the tight letter spacing token.

›

dark_mode_settings?: DarkModeSettings | undefined;

Override the dark mode theme settings used by the embedded UI.

›

primary_color?: string | undefined;

Override the dark mode primary color.

›

background_color?: string | undefined;

Override the dark mode background color.

›

text_color?: string | undefined;

Override the dark mode text color.

›

token_overrides?: UITokenOverrides | undefined;

Fine-grained dark mode token overrides for the embedded UI theme.

›

space_unit?: string | undefined;

Override the base spacing unit used by the shared UI theme.

›

card?: string | undefined;

Override the card background color.

›

card_foreground?: string | undefined;

Override the card foreground color.

›

popover?: string | undefined;

Override the popover background color.

›

popover_foreground?: string | undefined;

Override the popover foreground color.

›

primary_foreground?: string | undefined;

Override the foreground color used on primary surfaces.

›

secondary?: string | undefined;

Override the secondary surface color.

›

secondary_foreground?: string | undefined;

Override the foreground color used on secondary surfaces.

›

accent?: string | undefined;

Override the accent surface color.

›

accent_foreground?: string | undefined;

Override the foreground color used on accent surfaces.

›

ring?: string | undefined;

Override the focus ring color.

›

foreground?: string | undefined;

Override the main foreground color.

›

foreground_inverse?: string | undefined;

Override the inverse foreground color.

›

secondary_text?: string | undefined;

Override the secondary text color.

›

muted?: string | undefined;

Override the muted text or surface color.

›

border?: string | undefined;

Override the default border color.

›

border_hover?: string | undefined;

Override the border color used on hover states.

›

divider?: string | undefined;

Override the divider color.

›

input_background?: string | undefined;

Override the input background color.

›

input_border?: string | undefined;

Override the input border color.

›

input_focus_border?: string | undefined;

Override the input border color used on focus.

›

background_subtle?: string | undefined;

Override the subtle background color.

›

background_hover?: string | undefined;

Override the background color used on hover states.

›

primary_hover?: string | undefined;

Override the hover color for primary actions.

›

error?: string | undefined;

Override the error text or accent color.

›

error_background?: string | undefined;

Override the error background color.

›

error_border?: string | undefined;

Override the error border color.

›

warning?: string | undefined;

Override the warning text or accent color.

›

warning_background?: string | undefined;

Override the warning background color.

›

warning_border?: string | undefined;

Override the warning border color.

›

warning_text?: string | undefined;

Override the warning text color.

›

success?: string | undefined;

Override the success text or accent color.

›

success_background?: string | undefined;

Override the success background color.

›

success_border?: string | undefined;

Override the success border color.

›

info?: string | undefined;

Override the info text or accent color.

›

info_background?: string | undefined;

Override the info background color.

›

radius_md?: string | undefined;

Override the medium radius token.

›

radius_lg?: string | undefined;

Override the large radius token.

›

radius_xl?: string | undefined;

Override the extra-large radius token.

›

radius_2xl?: string | undefined;

Override the 2xl radius token.

›

radius_2xs?: string | undefined;

Override the 2xs radius token.

›

radius_xs?: string | undefined;

Override the extra-small radius token.

›

radius_full?: string | undefined;

Override the fully rounded radius token.

›

border_width_thin?: string | undefined;

Override the thin border width token.

›

border_width_regular?: string | undefined;

Override the regular border width token.

›

scrollbar_track?: string | undefined;

Override the scrollbar track color.

›

scrollbar_thumb?: string | undefined;

Override the scrollbar thumb color.

›

scrollbar_thumb_hover?: string | undefined;

Override the scrollbar thumb hover color.

›

shadow_color?: string | undefined;

Override the base shadow color.

›

shadow_light_color?: string | undefined;

Override the light shadow color.

›

shadow_medium_color?: string | undefined;

Override the medium shadow color.

›

success_shadow?: string | undefined;

Override the success shadow color.

›

success_background_light?: string | undefined;

Override the light success background color.

›

button_ripple?: string | undefined;

Override the button ripple color.

›

dialog_backdrop?: string | undefined;

Override the dialog backdrop color.

›

space_0u?: string | undefined;

Override the 0u spacing token.

›

space_1u?: string | undefined;

Override the 1u spacing token.

›

space_2u?: string | undefined;

Override the 2u spacing token.

›

space_3u?: string | undefined;

Override the 3u spacing token.

›

space_4u?: string | undefined;

Override the 4u spacing token.

›

space_5u?: string | undefined;

Override the 5u spacing token.

›

space_6u?: string | undefined;

Override the 6u spacing token.

›

space_7u?: string | undefined;

Override the 7u spacing token.

›

space_8u?: string | undefined;

Override the 8u spacing token.

›

space_10u?: string | undefined;

Override the 10u spacing token.

›

space_12u?: string | undefined;

Override the 12u spacing token.

›

space_14u?: string | undefined;

Override the 14u spacing token.

›

space_16u?: string | undefined;

Override the 16u spacing token.

›

space_24u?: string | undefined;

Override the 24u spacing token.

›

font_size_2xs?: string | undefined;

Override the 2xs font size token.

›

font_size_xs?: string | undefined;

Override the xs font size token.

›

font_size_sm?: string | undefined;

Override the sm font size token.

›

font_size_md?: string | undefined;

Override the md font size token.

›

font_size_lg?: string | undefined;

Override the lg font size token.

›

font_size_xl?: string | undefined;

Override the xl font size token.

›

font_size_2xl?: string | undefined;

Override the 2xl font size token.

›

font_size_3xl?: string | undefined;

Override the 3xl font size token.

›

size_8u?: string | undefined;

Override the 8u size token.

›

size_10u?: string | undefined;

Override the 10u size token.

›

size_12u?: string | undefined;

Override the 12u size token.

›

size_18u?: string | undefined;

Override the 18u size token.

›

size_20u?: string | undefined;

Override the 20u size token.

›

size_24u?: string | undefined;

Override the 24u size token.

›

size_32u?: string | undefined;

Override the 32u size token.

›

size_36u?: string | undefined;

Override the 36u size token.

›

size_40u?: string | undefined;

Override the 40u size token.

›

size_45u?: string | undefined;

Override the 45u size token.

›

size_50u?: string | undefined;

Override the 50u size token.

›

shadow_sm?: string | undefined;

Override the small shadow token.

›

shadow_md?: string | undefined;

Override the medium shadow token.

›

shadow_lg?: string | undefined;

Override the large shadow token.

›

shadow_xl?: string | undefined;

Override the xl shadow token.

›

shadow_success?: string | undefined;

Override the success shadow token.

›

ring_primary?: string | undefined;

Override the primary ring color token.

›

letter_spacing_tight?: string | undefined;

Override the tight letter spacing token.

›

children: React.ReactNode;

The application subtree that should receive deployment, auth, and navigation context.

Behavior

The provider decodes the backend base URL from the public key, requests /deployment, and stores the result in context.

In staging mode it also manages the __dev_session__ handshake and persists the development session locally.

If uiOverwrites is passed, the shared provider shallow-merges it into deployment.ui_settings after the deployment loads.

Notes

Mount it once near the root of the app.
Everything else in the shared client layer assumes this context already exists.
This is also the place where uiOverwrites belongs when you are embedding auth screens inside your own app.

Examples

Root layout

export default function RootLayout({ children }) {  return (    <DeploymentProvider publicKey={process.env.NEXT_PUBLIC_WACHT_PUBLISHABLE_KEY!}>      <DeploymentInitialized>{children}</DeploymentInitialized>    </DeploymentProvider>  );}

Embedded auth with UI overrides

import { DeploymentProvider, SignInForm } from '@wacht/nextjs';export default function DeploymentProviderEmbeddedAuthWithUIOverrides() {  return (    <>      <DeploymentProvider        publicKey={PUBLIC_KEY}        uiOverwrites={{          sign_in_page_url: '/sign-in',          sign_up_page_url: '/sign-up',        }}      >        <SignInForm />      </DeploymentProvider>    </>  );}

<DeploymentProvider/> component

Usage

Properties

Behavior

Notes

Examples

Root layout

Embedded auth with UI overrides

On this page

`<DeploymentProvider/>` component