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.

Which languages are offered

Two things decide this, and the dashboard is the one you usually want.

In the dashboard (no code). Each environment declares the languages it serves under Settings → Languages. A new project starts English-only, so nothing shows your users a language you did not ask for. The setting also drives which languages the hosted portal offers, which languages the email-template editor lets you author, and the language outbound emails are sent in — turn a language on and it appears in all three at once.

In code, per app. Pass a languages array to <ToriiProvider>. This overrides the dashboard for that app, which is the point: an explicit value in code always wins.

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

// English only for this app, whatever the dashboard says:
<ToriiProvider publishableKey="pk_live_…" languages={['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. Within whichever set applies, the SDK auto-detects the browser locale and exposes a selector via useAuth().setLanguage. When the browser locale matches none of the offered languages, it falls back to the environment’s default language — English when English is offered, otherwise the only language that is.

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