bdr-auth-client-react

React authentication client for Supabase Auth. Provides an AuthProvider context and useAuth hook for managing authentication state, sign-in, sign-up, sign-out, password reset, and access token retrieval.

Installation

npm install bdr-auth-client-react @supabase/supabase-js

React 18 or 19 is required as a peer dependency.

Setup

Set environment variables (Vite example):

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key

Wrap your app with AuthProvider:

import { AuthProvider } from 'bdr-auth-client-react';

function App() {
  return (
    <AuthProvider>
      <YourApp />
    </AuthProvider>
  );
}

Usage

import { useAuth } from 'bdr-auth-client-react';

function Dashboard() {
  const { user, loading, signIn, signOut, getAccessToken } = useAuth();

  if (loading) return <p>Loading...</p>;
  if (!user) return <button onClick={() => signIn('email', 'pass')}>Sign In</button>;

  return (
    <div>
      <p>Welcome, {user.email}</p>
      <button onClick={signOut}>Sign Out</button>
    </div>
  );
}

API

<AuthProvider>

React context provider. Initializes Supabase client, subscribes to auth state changes, and handles automatic session refresh.

useAuth()

Returns:

| Field | Type | Description | |-------|------|-------------| | user | AuthUser \| null | Current authenticated user | | loading | boolean | True until initial auth state resolves | | signIn(email, password) | Promise<void> | Sign in with email/password | | signUp(email, password) | Promise<void> | Create account | | signOut() | Promise<void> | Sign out, clear session | | resetPassword(email) | Promise<void> | Send password reset email | | getAccessToken() | Promise<string \| null> | Get current JWT access token |

AuthUser

interface AuthUser {
  uid: string;
  email: string | null;
  displayName: string | null;
  photoURL: string | null;
}

getSupabaseClient()

Returns the initialized Supabase client instance (for advanced use cases).

Environment Variables

The package reads Supabase configuration from environment variables with this priority:

1. VITE_SUPABASE_URL / VITE_SUPABASE_ANON_KEY (Vite)
2. NEXT_PUBLIC_SUPABASE_URL / NEXT_PUBLIC_SUPABASE_ANON_KEY (Next.js)
3. REACT_APP_SUPABASE_URL / REACT_APP_SUPABASE_ANON_KEY (CRA)

License

MIT