InvitationSignUp

<InvitationSignUp> is the prebuilt invitation-acceptance card. An invitee redeems an organization invitation by setting a password or continuing with an OAuth provider. It shows no email field: the email and organization both come from the invitation, so the only thing the invitee supplies is a password (or an OAuth account).

The host fetches the invitation details and passes the token and orgName in for display; everything else (API base URL, provider list, labels, theme) is read from <ToriiProvider> via context.

When to use

Render it on your invitation-acceptance route, the page the invitee lands on after clicking the link in their invitation email. Read the token from the URL and the orgName from the invitation details you fetched for it.

Usage

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

function AcceptInvitePage({ token, orgName }: { token: string; orgName: string }) {
  return (
    <InvitationSignUp
      token={token}
      orgName={orgName}
      onSuccess={() => navigate('/')}
    />
  );
}

Props

Prop	Type	Description
token	string	Required. Single-use invitation token, redeemed on submit.
orgName	string	Required. Invited organization name, shown on the card. The host fetches it from the invitation details.
redirectPath	string	Path the browser lands on after the OAuth callback. Defaults to afterOauthSignUpPath (which cascades to afterOauthSignInPath, then '/'). Password redemption does not navigate.
labels	Partial<InvitationSignupLabels>	Per-instance label overrides. Falls through to ToriiProvider labels.
onSuccess	() => void	Fired on a successful password redemption (the session is applied in-page).

Behaviour

• Runtime-gated: renders null until the SDK runtime (CDN UI bundle + styles) is ready, so it never flashes unstyled.
• No email field: the email and organization come from the invitation, so the card only collects a password (or an OAuth account).
• Password redemption: mints a session in-page. The card calls auth.signIn(tokens) so the session state flips and render gates (<SignedIn> / <SignedOut>) swap immediately, no redirect. For explicit routing, navigate inside onSuccess.
• OAuth redemption: bounces to the provider, carrying the invitation token and a consent flag so the callback creates the user, accepts the invitation, and redirects to redirectPath. (redirectPath applies to the OAuth callback only.)
• Legal consent: when the environment requires it, the card collects legal consent and forwards the acceptance into both the password and OAuth redemption paths.

Theming

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

Headless alternative

For a fully custom UI, drive the password redemption yourself with the useInvitationSignUp() hook. <InvitationSignUp> is the prebuilt card on top of it, and additionally handles OAuth-based redemption.

TypeScript

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