@torii-js/torii-react
v0.10.1
Published
React authentication components for Torii: zero-config, self-contained styles
Readme
@torii-js/torii-react
Zero-config React authentication for Torii. Drop-in, self-contained UI — no CSS imports, no Tailwind setup, no peer dependencies beyond React.
📚 Full documentation: docs.toriiauth.eu
Installation
npm install @torii-js/torii-react
# or: pnpm add / yarn addThat's it — no CSS import, no theme provider, no build config. Styles are
injected automatically at runtime and scoped under a .torii wrapper so they
never leak into your app.
Quick start
Wrap your app in <ToriiProvider> with your publishable key (from the
dashboard → Settings → API keys). The provider owns session state,
refreshes tokens in the background, and exposes useAuth() to the tree.
import { ToriiProvider } from '@torii-js/torii-react';
import { createRoot } from 'react-dom/client';
import App from './App';
createRoot(document.getElementById('root')!).render(
<ToriiProvider publishableKey={import.meta.env.VITE_TORII_PUBLISHABLE_KEY}>
<App />
</ToriiProvider>,
);Render UI per auth phase with the control components — <AuthLoading> while the
session probe runs, <SignedOut> when there's no session, <SignedIn> when
authenticated:
import { AuthLoading, SignedIn, SignedOut, SignIn, UserDashboard } from '@torii-js/torii-react';
export default function App() {
return (
<>
<AuthLoading><p>Loading…</p></AuthLoading>
<SignedOut><SignIn /></SignedOut>
<SignedIn><UserDashboard /></SignedIn>
</>
);
}<SignIn> is the prebuilt sign-in/up card; <UserDashboard> is the full
account surface (avatar menu, profile, connected accounts, active sessions,
data-export requests). See the quickstart
for the end-to-end walkthrough.
What's included
- Drop-in components —
<SignIn>,<SignUp>,<UserButton>,<UserDashboard>,<UserProfile>,<OrganizationSwitcher>,<OrganizationList>, and more. - Control components —
<SignedIn>,<SignedOut>,<AuthLoading>,<Show>(role/permission gating),<RedirectToSignIn>. - Hooks —
useAuth(),useUser(),useAuthFetch()for the common path, plus headless hooks (useSignIn,useSignUp,useSessions,useOrganizations,useMfaEnrollment, …) for building your own UI.
Full prop and hook reference: docs.toriiauth.eu.
Theming
Customize everything through the provider's appearance prop — pick a preset,
override design tokens, or attach classes/styles to individual elements:
<ToriiProvider
publishableKey={pk}
appearance={{
theme: 'shadcn', // or 'mui', or a full Theme object
variables: { primary: '243 75% 59%', radius: '0.5rem' }, // colors are HSL triplets
elements: { formButtonPrimary: 'rounded-full' },
}}
>The SDK emits both light and dark token sets, so a .dark class on your
<html> recolors it automatically. See theming.
Internationalization
Ships with English (default) and Danish, with browser-locale auto-detection. Override any label per component or globally; see labels.
Before production
The session refresh uses a cross-site cookie that Safari blocks for many users, silently signing them out. Wire up a first-party cookie setup (proxy or CNAME) before you ship — it's a required step, not an optimization.
License
MIT