Skip to content

AcceptInvitation

<AcceptInvitation> is the prebuilt landing for your invitation accept route. It reads the invitation ticket from the URL (?__torii_ticket=…, the parameter the invitation email link carries), fetches the invitation details, and renders the right surface:

  • New invitee (signed out) → the <InvitationSignUp> card. Setting a password (or continuing with an OAuth provider) creates the account and auto-joins the organization in one step.
  • Already signed in → an accept prompt showing the organization name; one click joins the org and re-mints the session with it active.
  • Expired / already accepted / revoked / wrong account → a matching message.

Point the operator-configured invitation accept URL (dashboard → your app’s environment → Organizations settings) at the route that renders this component. When that URL is set, invitations are emailed; a copyable share link is always returned too, so email is purely additive. See Organizations & roles.

import { AcceptInvitation } from '@torii-js/torii-react';
// e.g. mounted at /accept — the emailed link lands here with ?__torii_ticket=…
export default function AcceptInvitePage() {
return (
<AcceptInvitation
onAccepted={(org) => {
// Signed-in user joined `org`; navigate into your app.
window.location.assign('/');
}}
/>
);
}

All optional: the component is fully wired by context and the URL ticket.

Prop Type Description
token string Invitation token. Defaults to reading ?__torii_ticket= from the current URL, so most apps mount this with no props.
redirectPath string OAuth redirect path passed through to <InvitationSignUp> for the new-user path.
labels Partial<AcceptInvitationLabels> Per-instance label overrides over the resolved locale defaults.
onAccepted (organization: ClientOrganizationSummary) => void Fired after a signed-in invitee joins; the org is active on the re-minted session.
onSignedUp (invitedRedirectUrl?: string | null) => void Fired after a new-user signup redemption completes in-page.
  • Ticket from the URL. The emailed link and the share link both carry ?__torii_ticket=<token>; the component reads it automatically.
  • Auto-join. The new-user path signs up and joins the organization in one step — there is no separate “accept” call to build.
  • Runtime-gated: renders null until the SDK runtime is ready, so it never flashes unstyled. Renders null when there is no ticket to act on.

For headless control (custom UI), the useAcceptInvitation() hook exposes the resolved details, a derived state, and an accept() action; the accept itself runs through useOrganizations().acceptInvitation.

Honours the appearance prop on <ToriiProvider>. Relevant slots for the accept prompt: card, headerTitle, formButtonPrimary, formError. The new-user path is themed via <InvitationSignUp>’s slots. See elements.