White-label the AuthenSee UI to match your brand with colors, fonts, logos, and copy overrides.

Theming

AuthenSee's built-in UI components are fully white-labelable. Customize colors, fonts, logos, button styles, and copy to match your brand so users never feel jarred by a third-party flow.

The default theme uses the AuthenSee brand — warm orange primary on a near-black surface — so you get a polished UI out of the box. Override any subset of fields and the rest fall back to the defaults.

The co-brand model

On the hosted flow (hosted-page redirects and the popup drop-in), AuthenSee owns the frame and you contribute a small, consistent identity. A provider supplies:

A logo (URL) — with a graceful fallback chain: logo → displayName → the AuthenSee wordmark
A display name — co-branded into the frame
One brand color — drives both the primary action and the accent
One copy line — a tagline
A light or dark surface

The frame stays constant (a provider mark in the nav, a fixed "Secured by AuthenSee" footer), so the experience reads as AuthenSee-secured while still feeling like your brand. You configure this on the Brand identity page of the admin dashboard; AuthenSee projects it onto an AuthenSeeTheme and delivers it to the hosted pages on the session.

For your own SDK integration you still have the full theme below — the co-brand fields (displayName, accent, mode) are part of AuthenSeeTheme and work everywhere.

The AuthenSeeTheme type

type AuthenSeeTheme = {
  colors: {
    primary: string;            // Primary action color (buttons, links)
    primaryForeground: string;  // Text on primary color backgrounds
    background: string;         // Page/modal background
    foreground: string;         // Primary text color
    muted: string;              // Subtle backgrounds (input fields, cards)
    mutedForeground: string;    // Secondary/helper text
    error: string;              // Error states
    success: string;            // Success states
    border: string;             // Borders and dividers
  };
  logo?: string;                // URL or base64 of your logo
  displayName?: string;         // Co-branded into the frame; wordmark/initials fallback (≤ 50 chars)
  accent?: string;              // Single brand accent (highlights, focus rings, "secured by" mark)
  mode?: 'light' | 'dark' | 'auto'; // Frame surface; 'auto' follows prefers-color-scheme. Default: 'dark'
  fonts?: {
    heading: string;            // Font family for headings
    body: string;               // Font family for body text
    mono: string;               // Font family for code/technical text
  };
  buttonStyles?: {
    borderRadius: number;       // Corner radius in pixels
    paddingHorizontal: number;  // Horizontal padding in pixels
    paddingVertical: number;    // Vertical padding in pixels
  };
  copyOverrides?: {
    enrollTitle?: string;       // e.g., "Set up your identity"
    authTitle?: string;         // e.g., "Verify it's you"
    [key: string]: string | undefined;
  };
};

Default theme

// AuthenSee brand defaults — applied automatically when fields are omitted.
const DEFAULT_THEME = {
  colors: {
    primary: '#FF7B1A',           // brand orange
    primaryForeground: '#0A0A0A', // dark text on orange (AA contrast)
    background: '#0B0B0C',        // near-black surface
    foreground: '#FAFAFA',        // off-white text
    muted: '#17171A',             // elevated surface
    mutedForeground: '#A1A1AA',   // secondary copy
    error: '#F87171',
    success: '#34D399',
    border: '#27272A',
  },
  fonts: {
    heading: '"Inter", system-ui, sans-serif',
    body: '"Inter", system-ui, sans-serif',
    mono: '"JetBrains Mono", ui-monospace, monospace',
  },
  buttonStyles: { borderRadius: 10, paddingHorizontal: 18, paddingVertical: 10 },
};

Two ways to set the theme

Web (React) — use <AuthenSeeProvider>:

import { AuthenSeeProvider, EnrollmentFlow } from '@rebellion-systems/authensee-ui';
 
<AuthenSeeProvider
  sessionToken="sess_abc123def456"
  serverUrl="https://api.authensee.com"
  theme={{
    colors: { primary: '#0a2540', primaryForeground: '#ffffff' },
    logo: 'https://myapp.com/logo.png',
  }}
>
  <EnrollmentFlow questions={...} externalUserId="user_123" onComplete={...} />
</AuthenSeeProvider>

The provider forwards the theme to both the SDK config and the underlying AuthenSeeThemeProvider, so all built-in components pick it up.

Headless / native — pass it to AuthenSee.init():

await AuthenSee.init({
  sessionToken: 'sess_abc123def456',
  serverUrl: 'https://api.authensee.com',
  theme: {
    colors: { primary: '#0a2540', primaryForeground: '#ffffff' },
    logo: 'https://myapp.com/logo.png',
  },
});

CSS variable mapping

The theme colors map to CSS custom properties on the SDK's UI components:

Theme property	CSS variable
`colors.primary`	`--authensee-primary`
`colors.primaryForeground`	`--authensee-primary-foreground`
`accent`	`--authensee-accent`
`colors.background`	`--authensee-background`
`colors.foreground`	`--authensee-foreground`
`colors.muted`	`--authensee-muted`
`colors.mutedForeground`	`--authensee-muted-foreground`
`colors.error`	`--authensee-error`
`colors.success`	`--authensee-success`
`colors.border`	`--authensee-border`

When you don't set accent, --authensee-accent falls back to colors.primary, so customizing just your brand color carries through to the accent automatically.

Co-brand fields

These three fields drive the co-brand model and are also valid anywhere AuthenSeeTheme is accepted.

`displayName`

Your provider name, co-branded into the AuthenSee frame. It also serves as the wordmark/initials fallback when no logo is set. Keep it short (≤ 50 chars).

theme: {
  displayName: 'Aurora',
}

`accent`

A single accent color your brand contributes to the co-branded surface (highlights, focus rings, the "secured by" mark). It is distinct from colors.primary, which drives the primary action button. Defaults to colors.primary when omitted.

theme: {
  colors: { primary: '#0a2540', primaryForeground: '#ffffff' },
  accent: '#7c5cff',
}

`mode`

The light/dark surface for the AuthenSee frame.

theme: {
  mode: 'light', // 'light' | 'dark' | 'auto' — default 'dark'
}

'dark' — AuthenSee's native dark surface (default).
'light' — a light surface (white background, near-black text).
'auto' — follows the visitor's prefers-color-scheme.

The theme provider stamps data-authensee-mode on its wrapper so light/dark token sets switch accordingly.

On the admin dashboard's Brand identity page, only Light and Dark are offered for hosted pages; 'auto' is available when you set the theme yourself via the SDK.

Font customization

theme: {
  fonts: {
    heading: 'Inter, system-ui, sans-serif',
    body: 'Inter, system-ui, sans-serif',
    mono: 'JetBrains Mono, monospace',
  },
}

Fonts must be loaded by your application. The SDK applies the font family names via CSS but does not load font files.

Button styles

theme: {
  buttonStyles: {
    borderRadius: 8,        // rounded corners
    paddingHorizontal: 24,
    paddingVertical: 12,
  },
}

Copy overrides

Replace default UI text to match your product language:

theme: {
  copyOverrides: {
    enrollTitle: 'Set up your security profile',
    authTitle: 'Confirm your identity',
  },
}

Provider examples

Fintech / banking app

await AuthenSee.init({
  sessionToken: 'sess_abc123def456',
  serverUrl: 'https://api.authensee.com',
  theme: {
    colors: {
      primary: '#0a2540',
      primaryForeground: '#ffffff',
      background: '#ffffff',
      foreground: '#0a2540',
      muted: '#f6f9fc',
      mutedForeground: '#425466',
      error: '#cd3d64',
      success: '#0d9488',
      border: '#e3e8ee',
    },
    logo: 'https://bank.example.com/logo.svg',
    fonts: {
      heading: 'Söhne, system-ui, sans-serif',
      body: 'Söhne, system-ui, sans-serif',
      mono: 'Söhne Mono, monospace',
    },
    buttonStyles: {
      borderRadius: 6,
      paddingHorizontal: 20,
      paddingVertical: 10,
    },
    copyOverrides: {
      enrollTitle: 'Secure your account',
      authTitle: 'Verify your identity',
    },
  },
});

Consumer app with rounded style

await AuthenSee.init({
  sessionToken: 'sess_abc123def456',
  serverUrl: 'https://api.authensee.com',
  theme: {
    colors: {
      primary: '#7c3aed',
      primaryForeground: '#ffffff',
      background: '#faf5ff',
      foreground: '#1e1b4b',
      muted: '#ede9fe',
      mutedForeground: '#6b7280',
      error: '#ef4444',
      success: '#22c55e',
      border: '#e5e7eb',
    },
    logo: 'https://app.example.com/icon.png',
    buttonStyles: {
      borderRadius: 24,
      paddingHorizontal: 28,
      paddingVertical: 14,
    },
  },
});

Dark mode

The SDK supports light and dark mode. Pass appropriate color values for each mode based on your app's current theme:

const isDark = useColorScheme() === 'dark';
 
await AuthenSee.init({
  sessionToken: 'sess_abc123def456',
  serverUrl: 'https://api.authensee.com',
  theme: {
    colors: {
      primary: '#6366f1',
      primaryForeground: '#ffffff',
      background: isDark ? '#0f172a' : '#ffffff',
      foreground: isDark ? '#f1f5f9' : '#0f172a',
      muted: isDark ? '#1e293b' : '#f1f5f9',
      mutedForeground: isDark ? '#94a3b8' : '#64748b',
      error: '#ef4444',
      success: '#22c55e',
      border: isDark ? '#334155' : '#e2e8f0',
    },
  },
});

Headless mode

If the built-in UI does not meet your needs, set headless: true to disable it entirely and build your own:

await AuthenSee.init({
  sessionToken: 'sess_abc123def456',
  serverUrl: 'https://api.authensee.com',
  headless: true,
});
 
// Now use SDK methods directly without any built-in UI
// You are responsible for collecting user input and displaying states

When using headless mode, subscribe to events to track the authentication lifecycle and update your custom UI accordingly.

Theming

On this page