Account Widgets

<UserProfile> bundles the common account surfaces into one sectioned card. When you want to place them individually (your own settings layout, a privacy page), use the standalone widgets below.

All of them must be rendered inside <ToriiProvider>.

ConnectedAccounts

Lists the user’s linked OAuth identities and lets them link or unlink providers. Renders the ?linked=true success banner after a link redirect, and surfaces OAuth link errors captured by <ToriiProvider>.

Usage

import { SignedIn, ConnectedAccounts } from '@torii-js/torii-react';

function SecurityPage() {
  return (
    <SignedIn>
      <ConnectedAccounts />
    </SignedIn>
  );
}

Props

Name	Type	Default	Description
labels	Partial<ToriiSignupLabels>	None	Per-instance label overrides. Falls through to ToriiProvider labels.
className	string	None	Extra class names for the card.
hideTitle	boolean	false	Hide the internal heading: use when rendering inside a parent card.

Behaviour

• The link bar shows only providers not already linked. Unlink is available only when the user has more than one identity (so they can’t lock themselves out).
• Set the post-link landing page with afterOauthLinkPath on <ToriiProvider> (e.g. "/settings").

DataRequest

A button + status surface for GDPR Art. 15/20 subject-access requests. It records the request via POST /_torii/users/me/data-requests; the operator fulfils it out-of-band from the Torii dashboard. There is no client-side polling: the SDK only records the request and renders the resulting status.

Usage

import { SignedIn, DataRequest } from '@torii-js/torii-react';

function PrivacyPage() {
  return (
    <SignedIn>
      <DataRequest />
    </SignedIn>
  );
}

Props

Name	Type	Default	Description
className	string	None	Extra class names for the wrapper.

Behaviour

• States covered: idle, submitting, submitted, already-pending, rate-limited, and error, each with its own localized copy.
• Labels come from the active locale’s LanguageConfig.labels, set via <ToriiProvider languages={...}> (see labels). Unlike ConnectedAccounts/ForgotPassword, <DataRequest> exposes no per-instance labels prop. For lower-level control, use the useDataRequest hook directly.

LanguageSelector

A standalone language-picker dropdown matching the dashboard’s style. By default it reads languages, currentLanguage, and the change handler from <ToriiProvider>; override any of them per-instance.

Usage

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

function Footer() {
  return <LanguageSelector />;
}

Props

Name	Type	Default	Description
languages	LanguageOption[]	ToriiProvider.languages	Override the available languages.
currentLanguage	string	ToriiProvider.currentLanguage	Override the active language code.
onLanguageChange	(code: string) => void	ToriiProvider.setLanguage	Override the change handler.
className	string	None	Extra class names.

Behaviour

• With no props it is fully driven by the provider: drop it anywhere inside <ToriiProvider> and it stays in sync with the rest of the SDK.
• The same picker is embedded in <UserButton> when you pass languages there.

ForgotPassword

The drop-in forgot-password card: heading, the multi-step <ForgotPasswordForm>, and a back link. Wire it from your sign-in surface via <SignIn>’s onForgotPassword.

Usage

import { SignedOut, ForgotPassword } from '@torii-js/torii-react';

function ForgotPasswordPage() {
  return (
    <SignedOut>
      <ForgotPassword onBackToSignIn={() => navigate('/sign-in')} />
    </SignedOut>
  );
}

Props

Name	Type	Default	Description
labels	Partial<ToriiSignupLabels>	None	Per-instance label overrides. Falls through to ToriiProvider labels.
onBackToSignIn	() => void	None	Called after a successful reset or when the user clicks “Back to sign in”.

Behaviour

• Runtime-gated: renders null until the SDK runtime is ready.
• Wraps the bare form; for a custom layout use <ForgotPasswordForm> directly.

Theming

All widgets honour the appearance prop on <ToriiProvider> (theme preset, token variables, per-slot elements). See theming and elements.

TypeScript

import type {
  ConnectedAccountsProps,
  DataRequestProps,
  LanguageSelectorProps,
  ForgotPasswordProps,
} from '@torii-js/torii-react';
import type { LanguageOption } from '@torii-js/core';