@authie/react

Drop-in React UI and session primitives for Authie.

import {
  Protect,
  SignedIn,
  SignedOut,
  SignIn,
  SignInButton,
  SignUpButton,
  AuthieProvider,
  UserButton,
  UserProfile,
} from "@authie/react";

export function App() {
  return <AuthieProvider publishableKey={import.meta.env.VITE_AUTHIE_PUBLISHABLE_KEY}>
    <SignedOut><SignInButton methods={["authie", "password"]} /></SignedOut>
    <SignedIn><UserButton /></SignedIn>
    <Protect permission="profile.read" fallback={<p>Not allowed</p>}><UserProfile /></Protect>
  </AuthieProvider>;
}

The provider delegates session lifecycle to @authie/authie-js. useAuth() exposes userId, sessionId, has(), getToken(), and signInWithAuthie(); useSession() and useUser() expose the corresponding resources. Pass methods={["authie", "password"]} to SignIn or a modal SignInButton to offer central Authie SSO beside the application's own embedded credentials. Authie SSO uses a popup by default and accepts authieMode="redirect" as a fallback. Existing components continue to render only the application-password flow unless methods are explicitly configured.

Authie links the same verified email to one internal person, while passwords, membership, roles, and login remain application-scoped. A user can choose different passwords in different applications without being told that Authie powers another product. When an application declares open access, its verified application account receives the member role on activation.