Labels & i18n

Every SDK component accepts a labels prop (partial) that overrides the built-in copy. Hardcoded strings are never used; every piece of text flows through the label system so translations drop in cleanly.

Passing labels

import { SignIn } from '@torii-js/torii-react';

<SignIn
  labels={{
    title: 'Welcome back',
    loginButton: 'Let me in',
  }}
/>

Props are partial: anything you don’t override falls back to the currently-active locale.

Defaults & types

import { defaultLabels, defaultSignupLabels } from '@torii-js/torii-react';
import type { ToriiLoginLabels, ToriiSignupLabels } from '@torii-js/torii-react';

const myLabels: Partial<ToriiSignupLabels> = {
  ...defaultSignupLabels,
  title: 'Welcome to MyApp',
};

• ToriiLoginLabels: sign-in surface keys
• ToriiSignupLabels: full label set for sign-in, sign-up, forgot-password, and profile

Both are exported from @torii-js/torii-react (re-exported from @torii-js/core).

ToriiSignupLabels is large, over 200 keys spanning every surface (sign-up, email verification, security, sessions, connected accounts, organizations, GDPR data requests, …). Rather than reproduce the list here, read the type for the authoritative, always-current set; your editor autocompletes every key.

Constrained labels

Two strings are special and can’t be freely reworded:

• continueWithMitID is legally constrained. The MitID button must use one of the wordings mandated by the Danish Agency for Digitalisation (Digitaliseringsstyrelsen): “Continue with MitID” / “Sign in with MitID” / “Approve with MitID” in English, or “Log ind med MitID” / “Godkend med MitID” in Danish. Other wordings violate the MitID UX requirements.
• The “Torii.so” brand token is not translatable. The poweredBy label is the leading verb only (“Powered by”, “Drevet af”, …); the SDK appends the literal brand name “Torii.so”, which stays the same in every locale.

Language auto-detection

The SDK auto-detects the user’s browser locale and exposes a selector via useAuth().setLanguage. It defaults to ['da', 'en']; pass a languages array to <ToriiProvider> to change the set or order:

import { ToriiProvider } from '@torii-js/torii-react';

<ToriiProvider publishableKey="pk_live_…" languages={['da', 'en']}>
  <App />
</ToriiProvider>;

Each entry is either a built-in code (TypeScript autocompletes 'en' and 'da') or a full LanguageConfig object with { code, label, labels } for any language outside the built-in registry. Unknown bare codes throw synchronously at mount.

Order sets how the languages appear in the picker. When the browser locale matches none of the listed languages, the SDK falls back to English (or the first entry when English isn’t listed), so the default ['da', 'en'] shows Danish first but still falls back to English for, say, a French browser.

Passing a labels prop on a specific component still wins over the locale for the keys you override.