@authio/react

Install

pnpm add @authio/react

Provider

Wrap your tree once. The provider fetches /v1/me and /v1/me/organizations on mount and keeps the result in context. The publishable key is safe to expose to browsers.

import { AuthioProvider } from "@authio/react";

<AuthioProvider
  publishableKey={import.meta.env.VITE_AUTHIO_PUBLISHABLE_KEY}
  apiUrl="https://api.authio.com"
>
  <App />
</AuthioProvider>

Hooks

import {
  useUser,
  useOrganizations,
  useActiveOrganization,
  useSwitchOrganization,
} from "@authio/react";

function Header() {
  const { user, isLoaded } = useUser();
  const { memberships } = useOrganizations();
  const { organization, role } = useActiveOrganization();
  const switchOrg = useSwitchOrganization();

  if (!isLoaded) return <Spinner />;
  if (!user) return <SignInButton />;

  return (
    <div>
      <div>Signed in as {user.email}</div>
      <div>Active org: {organization?.name ?? "(none selected)"}</div>
      <select
        value={organization?.id ?? ""}
        onChange={(e) => switchOrg(e.target.value)}
      >
        {memberships.map((m) => (
          <option key={m.id} value={m.organizationId}>
            {m.organization.name} ({m.role})
          </option>
        ))}
      </select>
    </div>
  );
}

Components

• <SignIn /> — full sign-in surface (passkey, magic link, social).
• <UserButton afterSignOutUrl="/" /> — avatar + menu (manage account, switch organization, sign out).
• <OrganizationSwitcher createOrganizationUrl="/orgs/new" /> — standalone org picker.
• <OrganizationProfile /> — org settings page.
• <CreateOrganization /> — create-org form.
• <InviteMembers /> — invite-member form.
• <MembershipsList /> — admin view of org members.
• <OrganizationGuard org="..." role="admin">{children}</OrganizationGuard> — conditional render gate.

Components without a backend SDK

Every component talks directly to auth-core using credentials: "include"; no proxy needed. Your backend only enters the picture when you want to call the Management API from server code.