Authentication UI on one shared client.

Install

npm install @authie/react @authie/authie-js

Add the provider

import { AuthieProvider } from "@authie/react";

export function App() {
  return (
    <AuthieProvider publishableKey={import.meta.env.VITE_AUTHIE_PUBLISHABLE_KEY}>
      <Routes />
    </AuthieProvider>
  );
}

Render authentication UI

import { SignedIn, SignedOut, SignInButton, UserButton } from "@authie/react";

<SignedOut>
  <SignInButton
    mode="modal"
    methods={["authie", "password"]}
    authieMode="popup"
  />
</SignedOut>
<SignedIn><UserButton /></SignedIn>

Use mode="modal" for embedded UI. Both modes use the same Authie Frontend API and produce the same session resource.

Choose sign-in methods

methods=authiepassword gives an application both options without mixing their credentials. Continue with Authie authenticates the person against their central Authie account in a popup (or a full-page redirect when requested). The password form authenticates only application-scoped credentials created for that application.

The embedded password form includes recovery. Authie sends the application-branded reset link back to the application, and AuthieProvider opens the reset dialog automatically. Verification and token renewal use the same Frontend API session without application-owned routes or timers.

Read session resources

import { useAuth, useSession, useUser } from "@authie/react";

const { isLoaded, isSignedIn, userId, sessionId, has, getToken, signOut } = useAuth();
const { session } = useSession();
const { user } = useUser();

Protect presentation

<Protect permission="documents.read" fallback={<SignIn />}>
  <Documents />
</Protect>

Framework packages

Next.js users can install only @authie/nextjs; it re-exports the React surface from its root and exposes server helpers from @authie/nextjs/server. See the Next.js quickstart.