@siteai/auth-react

React components, AuthProvider context, and useAuth hook for SiteAI customer sites. Handles session management, login, signup, logout, and password reset flows.

Install

npm install @siteai/auth-react react react-dom

Peer: react 18 or 19. react-dom is required at runtime for DOM rendering.

Usage

Wrap your app (or the subtree that needs auth) with AuthProvider, then consume useAuth in any child component.

import { AuthProvider, useAuth, LoginForm } from '@siteai/auth-react';

function App() {
  return (
    <AuthProvider
      apiUrl={import.meta.env.PUBLIC_SITEAI_API_URL}
      siteId={import.meta.env.PUBLIC_SITEAI_SITE_ID}
    >
      <Shell />
    </AuthProvider>
  );
}

function Shell() {
  const { user, logout, loading } = useAuth();

  if (loading) return <p>Loading...</p>;
  if (!user) return <LoginForm />;
  return (
    <div>
      <p>Signed in as {user.email}</p>
      <button onClick={logout}>Sign out</button>
    </div>
  );
}

Exports

• AuthProvider / AuthProviderProps — context provider, takes apiUrl and siteId
• useAuth — returns AuthState: { user, loading, error, login, signup, logout, forgotPassword, resetPassword }
• ProtectedRoute — renders children only when a session exists, redirects otherwise
• LoginForm, SignupForm, ForgotPasswordForm, ResetPasswordForm, UserMenu — prebuilt UI components

SSR safety

useAuth() returns inert defaults (user: null, loading: false, error: null) when no AuthProvider is mounted above it, so server-rendered trees that import these components can check user == null during prerender without crashing. Note that loading defaults to false in the inert state — a naive if (loading) return <Spinner/> guard will fall through to the unauthenticated render path during SSR, which is usually what you want for pre-hydration markup.

The mutation helpers (login, signup, logout, forgotPassword, resetPassword) will throw if called without a mounted provider. Guard mutation calls with a provider check or keep them in client-only branches.

Contract

Emitted by the SiteAI Auth Builder curated skill on VibeControl. The skill pins this package in the customer site's package.json; you shouldn't normally install it yourself unless you're authoring a custom SiteAI-compatible auth flow.

License

MIT © BUILD3R Dev