Auth Provider

A React authentication provider package for integrating OAuth 2.0 / PKCE authentication into your React applications. Provides hooks, components, and token management utilities.

Features

• 🔐 OAuth 2.0 & PKCE Support – Secure authentication with PKCE flow
• ⚛️ React Context Provider – Easy state management with React hooks
• 🎨 Pre-built Components – Ready-to-use buttons and UI elements
• 📱 Popup & Redirect Flow – Supports both popup and full redirect authentication
• 🔄 Automatic Token Management – Token storage, refresh handling, and retrieval
• 📦 TypeScript Support – Full type definitions included
• 🎯 Tree Shakable – Import only what you need

Installation

Install the latest version:

npm install @bharat-ebiz/auth-provider
# or
yarn add @bharat-ebiz/auth-provider
# or
pnpm add @bharat-ebiz/auth-provider

Install the next pre-release version:

npm install @bharat-ebiz/auth-provider@next
# or
yarn add @bharat-ebiz/auth-provider@next
# or
pnpm add @bharat-ebiz/auth-provider@next

Quick Start

Wrap your app with AuthProvider

import { AuthProvider } from "@bharat-ebiz/auth-provider";

function App() {
  return (
    <AuthProvider
      config={{
        clientId: "your-client-id",
        redirectUri: "http://localhost:3000/callback",
        prompt: true,
        scope: "openid profile email",
      }}
      onAuthStateChange={(isAuth, user) => {
        console.log("Auth state:", isAuth, user);
      }}
      onError={(error) => {
        console.error("Auth error:", error);
      }}
    >
      <YourApp />
    </AuthProvider>
  );
}

Use the authentication hook

import { useAuth, Button } from "@bharat-ebiz/auth-provider";

function YourApp() {
  const { isAuthenticated, isLoading, user, login, logout } = useAuth();

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      {isAuthenticated ? (
        <div>
          <h1>Welcome {user?.name}!</h1>
          <Button variant="outline" onClick={logout}>
            Logout
          </Button>
        </div>
      ) : (
        <Button onClick={login}>Login</Button>
      )}
    </div>
  );
}

Components

AuthProvider

Manages authentication state for your app.

<AuthProvider
  config={{
    clientId: string;           // Required
    redirectUri: string;        // Required
    clientSecret?: string;      // Optional
    scope?: string;             // Optional
    state?: string;             // Optional
    prompt?: boolean;           // Optional
    usePKCE?: boolean;          // Optional
    codeChallengeMethod?: 'S256' | 'plain'; // Optional
  }}
  onAuthStateChange?={(isAuth, user) => void}
  onError?={(error) => void}
/>

Button

Pre-styled authentication button.

import { Button } from "@bharat-ebiz/auth-provider";

<Button variant="default">Default</Button>
<Button variant="outline">Outline</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

Hooks

useAuth()

Provides authentication state and utility methods:

const {
  isAuthenticated,
  isLoading,
  user,
  accessToken,
  login,
  logout,
  apiCall,
  refreshAuthState,
  getAccessToken,
  storeTokens,
} = useAuth();

API Reference

Making API Calls

const { apiCall } = useAuth();

const userData = await apiCall("/api/user");

Environment Variables

VITE_AUTH_CLIENT_ID=your_client_id
VITE_AUTH_REDIRECT_URI=http://localhost:3000/callback

License

MIT © Bharat Makwana