@meet_patel_03/authflow-react 0.1.0

package/README.md

@@ -0,0 +1,606 @@
+# @meet_patel_03/authflow-react
+
+React SDK for AuthFlow — hooks and provider for the Authorization Code + PKCE flow. Includes state management, automatic token refresh, and session persistence.
+
+## Installation
+
+```bash
+npm install @meet_patel_03/authflow-react @meet_patel_03/authflow-js
+```
+
+Requirements:
+
+- React 18+
+- `@meet_patel_03/authflow-js` (peer dependency)
+
+## Quick start
+
+```tsx
+// main.tsx — wrap your app with AuthFlowProvider
+import { AuthFlowProvider } from "@meet_patel_03/authflow-react";
+import { App } from "./App";
+
+export default function Root() {
+  return (
+    <AuthFlowProvider
+      config={{
+        domain: "https://your-authflow-domain.com",
+        clientId: "af_your_client_id",
+        redirectUri: "https://your-app.com/callback",
+        scope: "openid profile email", // optional
+      }}>
+      <App />
+    </AuthFlowProvider>
+  );
+}
+
+// components/navbar.tsx — use hooks in any component
+import { useAuthFlow } from "@meet_patel_03/authflow-react";
+
+export function Navbar() {
+  const { user, isAuthenticated, isLoading, loginWithRedirect, logout } =
+    useAuthFlow();
+
+  if (isLoading) {
+    return <div>Loading authentication state...</div>;
+  }
+
+  if (!isAuthenticated) {
+    return (
+      <nav>
+        <button onClick={() => loginWithRedirect({ screen_hint: "login" })}>
+          Login
+        </button>
+        <button onClick={() => loginWithRedirect({ screen_hint: "signup" })}>
+          Sign Up
+        </button>
+      </nav>
+    );
+  }
+
+  return (
+    <nav>
+      <span>Hello {user?.name || user?.email}</span>
+      <button onClick={() => logout({ returnTo: window.location.origin })}>
+        Logout
+      </button>
+    </nav>
+  );
+}
+
+// components/protected-route.tsx — protect routes
+import { useAuthFlow } from "@meet_patel_03/authflow-react";
+import { ReactNode } from "react";
+import { Navigate } from "react-router";
+
+export function ProtectedRoute({ children }: { children: ReactNode }) {
+  const { isAuthenticated, isLoading } = useAuthFlow();
+
+  if (isLoading) return <div>Loading...</div>;
+  if (!isAuthenticated) return <Navigate to="/login" />;
+
+  return <>{children}</>;
+}
+
+// pages/callback.tsx — handle OAuth redirect
+import { useAuthCallback } from "@meet_patel_03/authflow-react";
+import { useNavigate } from "react-router";
+
+export function CallbackPage() {
+  const navigate = useNavigate();
+  const { status, error } = useAuthCallback({
+    onSuccess: () => {
+      // Redirect to dashboard after successful login
+      navigate("/dashboard", { replace: true });
+    },
+    onError: (err) => {
+      console.error("Login failed:", err);
+      navigate("/login?error=" + encodeURIComponent(err), { replace: true });
+    },
+  });
+
+  if (status === "loading") {
+    return <div>Completing login...</div>;
+  }
+
+  if (status === "error") {
+    return (
+      <div>
+        <p>Login failed: {error}</p>
+        <a href="/login">Back to login</a>
+      </div>
+    );
+  }
+
+  // Success — navigation happens via onSuccess callback
+  return null;
+}
+
+// pages/dashboard.tsx — access user and tokens
+import { useAuthFlow } from "@meet_patel_03/authflow-react";
+
+export function DashboardPage() {
+  const { user, getAccessToken } = useAuthFlow();
+
+  const fetchProtectedApi = async () => {
+    const token = await getAccessToken();
+    if (!token) {
+      console.error("Not authenticated");
+      return;
+    }
+
+    const res = await fetch("/api/me", {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+    const data = await res.json();
+    console.log("API response:", data);
+  };
+
+  return (
+    <div>
+      <h1>Welcome, {user?.email}</h1>
+      <p>Email verified: {user?.email_verified ? "Yes" : "No"}</p>
+      <button onClick={fetchProtectedApi}>Call API</button>
+    </div>
+  );
+}
+```
+
+## Configuration
+
+The `<AuthFlowProvider>` accepts the same configuration as `AuthFlowClient` from `@authflow/js`:
+
+| Option        | Required | Default                              | Description                                                     |
+| ------------- | -------- | ------------------------------------ | --------------------------------------------------------------- |
+| `domain`      | Yes      | —                                    | Your AuthFlow backend URL (e.g. `https://auth.yourcompany.com`) |
+| `clientId`    | Yes      | —                                    | Application `client_id` from the AuthFlow dashboard             |
+| `redirectUri` | No       | `window.location.origin + /callback` | OAuth2 redirect URI. Must match Allowed Callback URLs           |
+| `scope`       | No       | `openid profile email`               | Space-separated OAuth2 scopes to request                        |
+| `storageKey`  | No       | `authflow`                           | localStorage key prefix for token persistence                   |
+
+## API
+
+### `<AuthFlowProvider config={...}>`
+
+Wraps your app and provides authentication context. Initialize this **once** at the root level.
+
+**Props:**
+
+- `config` — `AuthFlowConfig` object (see Configuration above)
+- `children` — React elements to wrap
+
+**Behavior:**
+
+- Creates an internal `AuthFlowClient` instance (reused across re-renders)
+- On mount, restores authentication state from localStorage
+- Silently refreshes expired access tokens
+- Provides context values to all child components
+
+```tsx
+import { AuthFlowProvider } from "@meet_patel_03/authflow-react";
+
+export function App() {
+  return (
+    <AuthFlowProvider
+      config={{
+        domain: "https://auth.yourcompany.com",
+        clientId: "af_your_client_id",
+        redirectUri: "https://your-app.com/callback",
+      }}>
+      <Routes>
+        <Route
+          path="/callback"
+          element={<CallbackPage />}
+        />
+        <Route
+          path="/dashboard"
+          element={
+            <ProtectedRoute>
+              <DashboardPage />
+            </ProtectedRoute>
+          }
+        />
+        {/* ... */}
+      </Routes>
+    </AuthFlowProvider>
+  );
+}
+```
+
+### `useAuthFlow()`
+
+Primary hook — provides access to authentication state and actions. Must be used inside `<AuthFlowProvider>`.
+
+**Returns:**
+
+```ts
+{
+  client: AuthFlowClient,           // Underlying SDK instance for advanced use
+  user: AuthFlowUser | null,        // Current user or null if not authenticated
+  isLoading: boolean,               // True while initial auth state is loading
+  isAuthenticated: boolean,         // True if user is logged in with valid token
+  loginWithRedirect(options?),      // Redirect to login page
+  handleRedirectCallback(),         // Exchange code for tokens (call in /callback)
+  getAccessToken(),                 // Get valid access token (auto-refreshes)
+  logout(options?),                 // Logout and clear session
+}
+```
+
+**Throws:** If used outside `<AuthFlowProvider>`.
+
+```ts
+import { useAuthFlow } from "@meet_patel_03/authflow-react";
+
+function MyComponent() {
+  const { user, isLoading, isAuthenticated, loginWithRedirect } = useAuthFlow();
+
+  if (isLoading) return <div>Checking authentication...</div>;
+
+  if (!isAuthenticated) {
+    return <button onClick={() => loginWithRedirect()}>Login</button>;
+  }
+
+  return <div>Welcome, {user?.email}</div>;
+}
+```
+
+#### `loginWithRedirect(options?)`
+
+Redirects the user to the AuthFlow Universal Login page.
+
+**Parameters:**
+
+- `options.screen_hint` (optional) — `"login"` (default) or `"signup"` to show registration page
+
+```ts
+const { loginWithRedirect } = useAuthFlow();
+
+// Login page
+<button onClick={() => loginWithRedirect()}>Login</button>
+
+// Signup page
+<button onClick={() => loginWithRedirect({ screen_hint: "signup" })}>Sign Up</button>
+```
+
+#### `handleRedirectCallback()`
+
+Completes the OAuth2 redirect. **Call this once in your `/callback` route.**
+
+**Returns:** `Promise<TokenSet>` — resolves with access, refresh, and ID tokens
+
+**Throws:** `AuthFlowError` if the code exchange fails
+
+```ts
+const { handleRedirectCallback } = useAuthFlow();
+
+try {
+  const tokens = await handleRedirectCallback();
+  console.log("Login successful!");
+} catch (err) {
+  console.error("Token exchange failed:", err);
+}
+```
+
+#### `getAccessToken()`
+
+Returns a valid access token, automatically refreshing if near expiry.
+
+**Returns:** `Promise<string | null>` — valid token or null if not authenticated
+
+**Use cases:**
+
+- Before making API calls
+- Getting the token to send in Authorization header
+
+```ts
+const { getAccessToken } = useAuthFlow();
+
+const fetchUserProfile = async () => {
+  const token = await getAccessToken();
+  if (!token) {
+    console.log("Not authenticated");
+    return;
+  }
+
+  const res = await fetch("/api/profile", {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const profile = await res.json();
+  console.log(profile);
+};
+```
+
+#### `logout(options?)`
+
+Revokes the server-side session, clears local tokens, and redirects.
+
+**Parameters:**
+
+- `options.returnTo` (optional) — URL to redirect to after logout (defaults to `window.location.origin`)
+
+```ts
+const { logout } = useAuthFlow();
+
+<button onClick={() => logout({ returnTo: "https://your-app.com" })}>
+  Logout
+</button>
+```
+
+### `useUser()`
+
+Convenience hook — returns just the current user without needing the full `useAuthFlow()` context.
+
+**Returns:** `AuthFlowUser | null`
+
+```ts
+import { useUser } from "@meet_patel_03/authflow-react";
+
+function UserCard() {
+  const user = useUser();
+
+  if (!user) return <div>Not logged in</div>;
+
+  return (
+    <div>
+      <p>Name: {user.name}</p>
+      <p>Email: {user.email}</p>
+      <p>Verified: {user.email_verified ? "Yes" : "No"}</p>
+    </div>
+  );
+}
+```
+
+### `useAuthCallback({ onSuccess?, onError? })`
+
+Handles the OAuth2 redirect callback. Drop this in your `/callback` route component.
+
+**Parameters:**
+
+- `onSuccess` (optional) — Callback when token exchange succeeds (typically redirects to dashboard)
+- `onError` (optional) — Callback when exchange fails, receives error message
+
+**Returns:**
+
+```ts
+{
+  status: "loading" | "success" | "error",  // Current state
+  error: string | null,                     // Error message if status === "error"
+}
+```
+
+**Important:** This hook guards against React 18 StrictMode double-execution, so the token exchange runs exactly once even in development.
+
+```ts
+import { useAuthCallback } from "@meet_patel_03/authflow-react";
+import { useNavigate } from "react-router-dom";
+
+function CallbackPage() {
+  const navigate = useNavigate();
+  const { status, error } = useAuthCallback({
+    onSuccess: () => {
+      console.log("Login successful!");
+      navigate("/dashboard", { replace: true });
+    },
+    onError: (err) => {
+      console.error("Login error:", err);
+      navigate("/login?error=" + encodeURIComponent(err), { replace: true });
+    },
+  });
+
+  if (status === "loading") {
+    return <div>Completing login...</div>;
+  }
+
+  if (status === "error") {
+    return (
+      <div>
+        <p>Login failed: {error}</p>
+        <a href="/login">Try again</a>
+      </div>
+    );
+  }
+
+  return null;
+}
+```
+
+### `withAuthRequired(Component)`
+
+Higher-Order Component that protects a route from unauthenticated access.
+
+**Behavior:**
+
+- Returns `null` while `isLoading` is true
+- Redirects to `/login` if not authenticated
+- Renders the component if authenticated
+
+**Parameters:**
+
+- `Component` — React component to protect
+
+**Returns:** Wrapped component
+
+```ts
+import { withAuthRequired } from "@meet_patel_03/authflow-react";
+
+function DashboardPage() {
+  const { user } = useAuthFlow();
+  return <h1>Welcome, {user?.email}</h1>;
+}
+
+// Protect the route
+export default withAuthRequired(DashboardPage);
+
+// In router:
+<Route path="/dashboard" element={<ProtectedDashboard />} />
+```
+
+## Error Handling
+
+Use `AuthFlowError` from `@meet_patel_03/authflow-js` for detailed error handling:
+
+```ts
+import { useAuthCallback } from "@meet_patel_03/authflow-react";
+import { AuthFlowError } from "@meet_patel_03/authflow-js";
+
+function CallbackPage() {
+  const { status, error } = useAuthCallback({
+    onError: (err) => {
+      console.error("Callback error:", err);
+      // Network errors, CSRF, invalid state, etc.
+    },
+  });
+}
+```
+
+Common error scenarios:
+
+- **"state_mismatch"** — CSRF token validation failed; user may have been redirected from a different browser tab
+- **"missing_code"** — OAuth provider didn't return an authorization code
+- **"invalid_grant"** — Authorization code expired, already used, or invalid
+- Network errors if the backend is unreachable
+
+## Types
+
+The SDK exports all types from `@meet_patel_03/authflow-js`:
+
+- **`AuthFlowUser`** — User claims (sub, email, name, email_verified, custom fields)
+- **`AuthFlowConfig`** — Provider configuration
+- **`TokenSet`** — OAuth2 tokens (access_token, refresh_token, id_token, expires_in, etc.)
+- **`AuthFlowError`** — OAuth2 errors with `error` and `errorDescription` properties
+- **`AuthFlowProviderProps`** — Props for `<AuthFlowProvider>`
+- **`AuthFlowContextValue`** — Return type of `useAuthFlow()`
+- **`CallbackStatus`** — Type of `status` from `useAuthCallback()` ("loading" | "success" | "error")
+
+```ts
+import type {
+  AuthFlowUser,
+  AuthFlowConfig,
+  TokenSet,
+  AuthFlowError,
+} from "@meet_patel_03/authflow-react";
+```
+
+## Common Patterns
+
+### Protected Route Component
+
+```tsx
+import { useAuthFlow } from "@meet_patel_03/authflow-react";
+import { Navigate, useLocation } from "react-router-dom";
+
+export function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const { isAuthenticated, isLoading } = useAuthFlow();
+  const location = useLocation();
+
+  if (isLoading) return <div>Loading...</div>;
+
+  if (!isAuthenticated) {
+    return (
+      <Navigate
+        to="/login"
+        state={{ from: location }}
+        replace
+      />
+    );
+  }
+
+  return <>{children}</>;
+}
+
+// Usage:
+<Route
+  path="/dashboard"
+  element={
+    <ProtectedRoute>
+      <DashboardPage />
+    </ProtectedRoute>
+  }
+/>;
+```
+
+### API Client with Auto-Refresh
+
+```ts
+import { useAuthFlow } from "@meet_patel_03/authflow-react";
+
+export function useApi() {
+  const { getAccessToken } = useAuthFlow();
+
+  return {
+    async get(url: string) {
+      const token = await getAccessToken();
+      if (!token) throw new Error("Not authenticated");
+
+      return fetch(url, {
+        headers: { Authorization: `Bearer ${token}` },
+      }).then((r) => r.json());
+    },
+
+    async post(url: string, data: unknown) {
+      const token = await getAccessToken();
+      if (!token) throw new Error("Not authenticated");
+
+      return fetch(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify(data),
+      }).then((r) => r.json());
+    },
+  };
+}
+
+// Usage in components:
+function MyComponent() {
+  const api = useApi();
+
+  const deleteAccount = async () => {
+    await api.post("/api/account/delete", {});
+  };
+}
+```
+
+### Conditional Navigation
+
+```tsx
+import { useAuthFlow } from "@meet_patel_03/authflow-react";
+import { useNavigate } from "react-router-dom";
+
+function LoginPrompt() {
+  const { isAuthenticated, loginWithRedirect } = useAuthFlow();
+  const navigate = useNavigate();
+
+  const handleClick = async () => {
+    if (!isAuthenticated) {
+      await loginWithRedirect();
+    } else {
+      navigate("/dashboard");
+    }
+  };
+
+  return (
+    <button onClick={handleClick}>
+      {isAuthenticated ? "Go to Dashboard" : "Login"}
+    </button>
+  );
+}
+```
+
+### Loading States
+
+```tsx
+import { useAuthFlow } from "@meet_patel_03/authflow-react";
+
+function RootLayout() {
+  const { isLoading } = useAuthFlow();
+
+  if (isLoading) {
+    return <div>Initializing authentication...</div>;
+  }
+
+  return <main>{/* Your routes */}</main>;
+}
+```

package/dist/index.d.mts

@@ -0,0 +1,84 @@
+import React from 'react';
+import { AuthFlowClient, AuthFlowUser, TokenSet, AuthFlowConfig } from '@meet_patel_03/authflow-js';
+export { AuthFlowConfig, AuthFlowError, AuthFlowUser, TokenSet } from '@meet_patel_03/authflow-js';
+
+interface AuthFlowContextValue {
+    /** The underlying AuthFlowClient instance — use this for advanced operations */
+    client: AuthFlowClient;
+    /** Current authenticated user, null if not logged in */
+    user: AuthFlowUser | null;
+    /** True once the initial auth state has been resolved */
+    isLoading: boolean;
+    /** True if the user is logged in and the access token is not expired */
+    isAuthenticated: boolean;
+    /** Redirect to the AuthFlow Universal Login page */
+    loginWithRedirect: (options?: {
+        screen_hint?: "login" | "signup";
+    }) => Promise<void>;
+    /**
+     * Call in your /callback route.
+     * Exchanges the authorization code for tokens, then resolves with the TokenSet.
+     */
+    handleRedirectCallback: () => Promise<TokenSet>;
+    /**
+     * Returns a valid access token, auto-refreshing if near expiry.
+     * Returns null if not authenticated.
+     */
+    getAccessToken: () => Promise<string | null>;
+    /** Revokes server-side session, clears tokens, and redirects to returnTo */
+    logout: (options?: {
+        returnTo?: string;
+    }) => Promise<void>;
+}
+interface AuthFlowProviderProps {
+    /** AuthFlow configuration — same shape as AuthFlowClient constructor */
+    config: AuthFlowConfig;
+    children: React.ReactNode;
+}
+declare const AuthFlowProvider: React.FC<AuthFlowProviderProps>;
+/**
+ * Primary hook — use this in any component to access auth state and actions.
+ *
+ * @throws if used outside of <AuthFlowProvider>
+ */
+declare const useAuthFlow: () => AuthFlowContextValue;
+/** Convenience hook — returns just the current user */
+declare const useUser: () => AuthFlowUser | null;
+/**
+ * HOC that redirects to login if the user is not authenticated.
+ * Renders null while auth state is loading.
+ *
+ * @example
+ *   const ProtectedDashboard = withAuthRequired(Dashboard);
+ */
+declare function withAuthRequired<P extends object>(Component: React.ComponentType<P>, options?: {
+    returnTo?: string;
+}): React.FC<P>;
+
+type CallbackStatus = "loading" | "success" | "error";
+interface UseAuthCallbackResult {
+    status: CallbackStatus;
+    error: string | null;
+}
+/**
+ * Drop this in your /callback route component.
+ * Handles the token exchange and calls onSuccess or onError when done.
+ *
+ * @example
+ *   function CallbackPage() {
+ *     const { status, error } = useAuthCallback({
+ *       onSuccess: () => navigate("/dashboard"),
+ *       onError:   (err) => navigate("/login?error=" + err),
+ *     });
+ *
+ *     if (status === "loading") return <Spinner />;
+ *     if (status === "error")   return <div>Login failed: {error}</div>;
+ *     return null;
+ *   }
+ */
+declare const useAuthCallback: (options?: {
+    onSuccess?: () => void;
+    onError?: (error: string) => void;
+}) => UseAuthCallbackResult;
+
+export { type AuthFlowContextValue, AuthFlowProvider, type AuthFlowProviderProps, type CallbackStatus, type UseAuthCallbackResult, useAuthCallback, useAuthFlow, useUser, withAuthRequired };

package/dist/index.d.ts

@@ -0,0 +1,84 @@
+import React from 'react';
+import { AuthFlowClient, AuthFlowUser, TokenSet, AuthFlowConfig } from '@meet_patel_03/authflow-js';
+export { AuthFlowConfig, AuthFlowError, AuthFlowUser, TokenSet } from '@meet_patel_03/authflow-js';
+
+interface AuthFlowContextValue {
+    /** The underlying AuthFlowClient instance — use this for advanced operations */
+    client: AuthFlowClient;
+    /** Current authenticated user, null if not logged in */
+    user: AuthFlowUser | null;
+    /** True once the initial auth state has been resolved */
+    isLoading: boolean;
+    /** True if the user is logged in and the access token is not expired */
+    isAuthenticated: boolean;
+    /** Redirect to the AuthFlow Universal Login page */
+    loginWithRedirect: (options?: {
+        screen_hint?: "login" | "signup";
+    }) => Promise<void>;
+    /**
+     * Call in your /callback route.
+     * Exchanges the authorization code for tokens, then resolves with the TokenSet.
+     */
+    handleRedirectCallback: () => Promise<TokenSet>;
+    /**
+     * Returns a valid access token, auto-refreshing if near expiry.
+     * Returns null if not authenticated.
+     */
+    getAccessToken: () => Promise<string | null>;
+    /** Revokes server-side session, clears tokens, and redirects to returnTo */
+    logout: (options?: {
+        returnTo?: string;
+    }) => Promise<void>;
+}
+interface AuthFlowProviderProps {
+    /** AuthFlow configuration — same shape as AuthFlowClient constructor */
+    config: AuthFlowConfig;
+    children: React.ReactNode;
+}
+declare const AuthFlowProvider: React.FC<AuthFlowProviderProps>;
+/**
+ * Primary hook — use this in any component to access auth state and actions.
+ *
+ * @throws if used outside of <AuthFlowProvider>
+ */
+declare const useAuthFlow: () => AuthFlowContextValue;
+/** Convenience hook — returns just the current user */
+declare const useUser: () => AuthFlowUser | null;
+/**
+ * HOC that redirects to login if the user is not authenticated.
+ * Renders null while auth state is loading.
+ *
+ * @example
+ *   const ProtectedDashboard = withAuthRequired(Dashboard);
+ */
+declare function withAuthRequired<P extends object>(Component: React.ComponentType<P>, options?: {
+    returnTo?: string;
+}): React.FC<P>;
+
+type CallbackStatus = "loading" | "success" | "error";
+interface UseAuthCallbackResult {
+    status: CallbackStatus;
+    error: string | null;
+}
+/**
+ * Drop this in your /callback route component.
+ * Handles the token exchange and calls onSuccess or onError when done.
+ *
+ * @example
+ *   function CallbackPage() {
+ *     const { status, error } = useAuthCallback({
+ *       onSuccess: () => navigate("/dashboard"),
+ *       onError:   (err) => navigate("/login?error=" + err),
+ *     });
+ *
+ *     if (status === "loading") return <Spinner />;
+ *     if (status === "error")   return <div>Login failed: {error}</div>;
+ *     return null;
+ *   }
+ */
+declare const useAuthCallback: (options?: {
+    onSuccess?: () => void;
+    onError?: (error: string) => void;
+}) => UseAuthCallbackResult;
+
+export { type AuthFlowContextValue, AuthFlowProvider, type AuthFlowProviderProps, type CallbackStatus, type UseAuthCallbackResult, useAuthCallback, useAuthFlow, useUser, withAuthRequired };

package/dist/index.js

@@ -0,0 +1,151 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AuthFlowProvider: () => AuthFlowProvider,
+  useAuthCallback: () => useAuthCallback,
+  useAuthFlow: () => useAuthFlow,
+  useUser: () => useUser,
+  withAuthRequired: () => withAuthRequired
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/AuthFlowContext.tsx
+var import_react = require("react");
+var import_authflow_js = require("@meet_patel_03/authflow-js");
+var import_jsx_runtime = require("react/jsx-runtime");
+var AuthFlowContext = (0, import_react.createContext)(null);
+var AuthFlowProvider = ({
+  config,
+  children
+}) => {
+  const clientRef = (0, import_react.useRef)(null);
+  if (!clientRef.current) {
+    clientRef.current = new import_authflow_js.AuthFlowClient(config);
+  }
+  const client = clientRef.current;
+  const [user, setUser] = (0, import_react.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react.useState)(true);
+  const [isAuthenticated, setIsAuthenticated] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    const initAuth = async () => {
+      try {
+        const token = await client.getAccessToken();
+        if (token) {
+          const currentUser = client.getUser();
+          setUser(currentUser);
+          setIsAuthenticated(true);
+        }
+      } catch {
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    initAuth();
+  }, [client]);
+  const loginWithRedirect = (0, import_react.useCallback)(
+    (options) => client.loginWithRedirect(options),
+    [client]
+  );
+  const handleRedirectCallback = (0, import_react.useCallback)(async () => {
+    const tokens = await client.handleRedirectCallback();
+    setUser(client.getUser());
+    setIsAuthenticated(true);
+    return tokens;
+  }, [client]);
+  const getAccessToken = (0, import_react.useCallback)(() => client.getAccessToken(), [client]);
+  const logout = (0, import_react.useCallback)(
+    async (options) => {
+      await client.logout(options);
+      setUser(null);
+      setIsAuthenticated(false);
+    },
+    [client]
+  );
+  const value = {
+    client,
+    user,
+    isLoading,
+    isAuthenticated,
+    loginWithRedirect,
+    handleRedirectCallback,
+    getAccessToken,
+    logout
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AuthFlowContext.Provider, { value, children });
+};
+var useAuthFlow = () => {
+  const ctx = (0, import_react.useContext)(AuthFlowContext);
+  if (!ctx) {
+    throw new Error(
+      "useAuthFlow must be used inside <AuthFlowProvider>. Wrap your app: <AuthFlowProvider config={...}><App /></AuthFlowProvider>"
+    );
+  }
+  return ctx;
+};
+var useUser = () => useAuthFlow().user;
+function withAuthRequired(Component, options = {}) {
+  const displayName = Component.displayName ?? Component.name ?? "Component";
+  const WithAuthRequired = (props) => {
+    const { isAuthenticated, isLoading, loginWithRedirect } = useAuthFlow();
+    (0, import_react.useEffect)(() => {
+      if (!isLoading && !isAuthenticated) {
+        loginWithRedirect();
+      }
+    }, [isLoading, isAuthenticated, loginWithRedirect]);
+    if (isLoading || !isAuthenticated) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props });
+  };
+  WithAuthRequired.displayName = `withAuthRequired(${displayName})`;
+  return WithAuthRequired;
+}
+
+// src/useAuthCallback.ts
+var import_react2 = require("react");
+var import_authflow_js2 = require("@meet_patel_03/authflow-js");
+var useAuthCallback = (options = {}) => {
+  const { handleRedirectCallback } = useAuthFlow();
+  const [status, setStatus] = (0, import_react2.useState)("loading");
+  const [error, setError] = (0, import_react2.useState)(null);
+  const hasRun = (0, import_react2.useRef)(false);
+  (0, import_react2.useEffect)(() => {
+    if (hasRun.current) return;
+    hasRun.current = true;
+    handleRedirectCallback().then(() => {
+      setStatus("success");
+      options.onSuccess?.();
+    }).catch((err) => {
+      const message = err instanceof import_authflow_js2.AuthFlowError ? err.errorDescription ?? err.error : err instanceof Error ? err.message : "Unknown error during login callback.";
+      setStatus("error");
+      setError(message);
+      options.onError?.(message);
+    });
+  }, []);
+  return { status, error };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AuthFlowProvider,
+  useAuthCallback,
+  useAuthFlow,
+  useUser,
+  withAuthRequired
+});

package/dist/index.mjs

@@ -0,0 +1,127 @@
+// src/AuthFlowContext.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { AuthFlowClient } from "@meet_patel_03/authflow-js";
+import { jsx } from "react/jsx-runtime";
+var AuthFlowContext = createContext(null);
+var AuthFlowProvider = ({
+  config,
+  children
+}) => {
+  const clientRef = useRef(null);
+  if (!clientRef.current) {
+    clientRef.current = new AuthFlowClient(config);
+  }
+  const client = clientRef.current;
+  const [user, setUser] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  useEffect(() => {
+    const initAuth = async () => {
+      try {
+        const token = await client.getAccessToken();
+        if (token) {
+          const currentUser = client.getUser();
+          setUser(currentUser);
+          setIsAuthenticated(true);
+        }
+      } catch {
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    initAuth();
+  }, [client]);
+  const loginWithRedirect = useCallback(
+    (options) => client.loginWithRedirect(options),
+    [client]
+  );
+  const handleRedirectCallback = useCallback(async () => {
+    const tokens = await client.handleRedirectCallback();
+    setUser(client.getUser());
+    setIsAuthenticated(true);
+    return tokens;
+  }, [client]);
+  const getAccessToken = useCallback(() => client.getAccessToken(), [client]);
+  const logout = useCallback(
+    async (options) => {
+      await client.logout(options);
+      setUser(null);
+      setIsAuthenticated(false);
+    },
+    [client]
+  );
+  const value = {
+    client,
+    user,
+    isLoading,
+    isAuthenticated,
+    loginWithRedirect,
+    handleRedirectCallback,
+    getAccessToken,
+    logout
+  };
+  return /* @__PURE__ */ jsx(AuthFlowContext.Provider, { value, children });
+};
+var useAuthFlow = () => {
+  const ctx = useContext(AuthFlowContext);
+  if (!ctx) {
+    throw new Error(
+      "useAuthFlow must be used inside <AuthFlowProvider>. Wrap your app: <AuthFlowProvider config={...}><App /></AuthFlowProvider>"
+    );
+  }
+  return ctx;
+};
+var useUser = () => useAuthFlow().user;
+function withAuthRequired(Component, options = {}) {
+  const displayName = Component.displayName ?? Component.name ?? "Component";
+  const WithAuthRequired = (props) => {
+    const { isAuthenticated, isLoading, loginWithRedirect } = useAuthFlow();
+    useEffect(() => {
+      if (!isLoading && !isAuthenticated) {
+        loginWithRedirect();
+      }
+    }, [isLoading, isAuthenticated, loginWithRedirect]);
+    if (isLoading || !isAuthenticated) return null;
+    return /* @__PURE__ */ jsx(Component, { ...props });
+  };
+  WithAuthRequired.displayName = `withAuthRequired(${displayName})`;
+  return WithAuthRequired;
+}
+
+// src/useAuthCallback.ts
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { AuthFlowError } from "@meet_patel_03/authflow-js";
+var useAuthCallback = (options = {}) => {
+  const { handleRedirectCallback } = useAuthFlow();
+  const [status, setStatus] = useState2("loading");
+  const [error, setError] = useState2(null);
+  const hasRun = useRef2(false);
+  useEffect2(() => {
+    if (hasRun.current) return;
+    hasRun.current = true;
+    handleRedirectCallback().then(() => {
+      setStatus("success");
+      options.onSuccess?.();
+    }).catch((err) => {
+      const message = err instanceof AuthFlowError ? err.errorDescription ?? err.error : err instanceof Error ? err.message : "Unknown error during login callback.";
+      setStatus("error");
+      setError(message);
+      options.onError?.(message);
+    });
+  }, []);
+  return { status, error };
+};
+export {
+  AuthFlowProvider,
+  useAuthCallback,
+  useAuthFlow,
+  useUser,
+  withAuthRequired
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@meet_patel_03/authflow-react",
+  "version": "0.1.0",
+  "description": "AuthFlow React SDK — hooks and provider for the Authorization Code + PKCE flow",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean --external react",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch --external react",
+    "test": "vitest run"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "@meet_patel_03/authflow-js": "^0.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "^18.0.0",
+    "jsdom": "^24.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^1.0.0",
+    "@meet_patel_03/authflow-js": "file:../authflow-js"
+  },
+  "keywords": [
+    "authflow",
+    "oauth2",
+    "oidc",
+    "react",
+    "hooks",
+    "auth"
+  ],
+  "license": "MIT",
+  "sideEffects": false,
+  "author": "Meet Patel (https://github.com/Meet-Patel-12)"
+}