RequireRole

Render-gate that requires both an active session and a named role string in the user's `app_metadata.roles` claim. Compose at the top of a protected subtree (typically inside `<AuthProvider>` and above all admin routes) so the gate runs once. Roles are issued backend-side by writing `auth.users.app_metadata.roles`; this component is read-only.

Examples

Wiring example

import {
  AuthProvider,
  LoginScreen,
  RequireRole,
  signOut,
  useSupabase,
} from "@rahhal/auth/react";
import { AccessDeniedScreen, Button } from "@rahhal/ui";

function Denied() {
  const supabase = useSupabase();
  return (
    <AccessDeniedScreen
      title="Admins only"
      description="Your account doesn't have the gmaplist_admin role."
      action={<Button onClick={() => signOut(supabase)}>Sign out</Button>}
    />
  );
}

export function App() {
  return (
    <AuthProvider config={{ url, anonKey }}>
      <RequireRole
        role="gmaplist_admin"
        fallback={<LoginScreen onSignedIn={() => location.reload()} />}
        deniedFallback={<Denied />}
      >
        <AdminApp />
      </RequireRole>
    </AuthProvider>
  );
}