React

The @arrow-labs/auth-sdk/react subpath adds a provider and hooks over the core client. react >= 18 is a peer dependency.

Wrap your app

Mount <AuthProvider> once near the root. It fetches the current user once on mount and shares it via context, so components don’t each re-fetch.

import { AuthProvider } from '@arrow-labs/auth-sdk/react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <AuthProvider>{children}</AuthProvider>;
}

The built entry carries the "use client" directive, so it drops into a Next.js App Router tree without an extra client boundary.

Read the session

import { useSession, useAuth } from '@arrow-labs/auth-sdk/react';

function Profile() {
  const session = useSession();

  if (session.status === 'loading') return <p>Loading…</p>;
  if (session.status === 'anonymous') return <a href="/auth/sign-in">Sign in</a>;

  return <p>Signed in as {session.user.display_name}</p>;
}

function SignOutButton() {
  const { signOut } = useAuth();
  return <button onClick={() => void signOut()}>Sign out</button>;
}

API

• useSession() → { status: 'loading' | 'authenticated' | 'anonymous'; user? }. When authenticated, user is the raw UserMeResponse (snake_case).
• useAuth() → { session, signOut, refresh }. refresh() re-validates the session; signOut() clears it and flips state to anonymous.
• Both hooks throw if used outside <AuthProvider>.