transactional-auth-react 0.1.0

package/README.md

@@ -0,0 +1,223 @@
+# transactional-auth-react
+
+React SDK for Transactional Auth - OpenID Connect authentication for React applications.
+
+## Installation
+
+```bash
+npm install transactional-auth-react
+# or
+yarn add transactional-auth-react
+# or
+pnpm add transactional-auth-react
+```
+
+## Quick Start
+
+### 1. Configure the Provider
+
+Wrap your application with the `TransactionalAuthProvider`:
+
+```tsx
+import { TransactionalAuthProvider } from 'transactional-auth-react';
+
+function App() {
+  return (
+    <TransactionalAuthProvider
+      domain="auth.usetransactional.com"
+      clientId="your-client-id"
+      redirectUri={window.location.origin}
+    >
+      <YourApp />
+    </TransactionalAuthProvider>
+  );
+}
+```
+
+### 2. Add Login/Logout
+
+Use the `useAuth` hook to access authentication state and methods:
+
+```tsx
+import { useAuth } from 'transactional-auth-react';
+
+function LoginButton() {
+  const { isAuthenticated, isLoading, loginWithRedirect, logout, user } = useAuth();
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  if (isAuthenticated) {
+    return (
+      <div>
+        <span>Welcome, {user?.name}</span>
+        <button onClick={() => logout()}>Logout</button>
+      </div>
+    );
+  }
+
+  return <button onClick={() => loginWithRedirect()}>Login</button>;
+}
+```
+
+### 3. Protect Routes
+
+Use the `AuthGuard` component or `withAuthenticationRequired` HOC:
+
+```tsx
+import { AuthGuard } from 'transactional-auth-react';
+
+function ProtectedPage() {
+  return (
+    <AuthGuard fallback={<div>Loading...</div>}>
+      <div>This content is only visible to authenticated users</div>
+    </AuthGuard>
+  );
+}
+```
+
+Or with the HOC:
+
+```tsx
+import { withAuthenticationRequired } from 'transactional-auth-react';
+
+function Dashboard() {
+  return <div>Dashboard content</div>;
+}
+
+export default withAuthenticationRequired(Dashboard);
+```
+
+## API Reference
+
+### TransactionalAuthProvider
+
+The main provider component that wraps your application.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `domain` | `string` | Required | Auth domain (e.g., 'auth.usetransactional.com') |
+| `clientId` | `string` | Required | Your application's client ID |
+| `redirectUri` | `string` | `window.location.origin` | Redirect URI after authentication |
+| `scope` | `string` | `'openid profile email'` | Scopes to request |
+| `audience` | `string` | - | API audience for access token |
+| `cacheLocation` | `'memory' \| 'localstorage'` | `'localstorage'` | Where to store tokens |
+| `useRefreshTokens` | `boolean` | `true` | Use refresh tokens for silent renewal |
+| `onRedirectCallback` | `(appState?) => void` | - | Callback after redirect from login |
+
+### useAuth Hook
+
+Returns the authentication context with state and methods.
+
+```tsx
+const {
+  // State
+  isAuthenticated,  // boolean - Whether user is authenticated
+  isLoading,        // boolean - Whether auth state is loading
+  user,             // TransactionalAuthUser | null
+  error,            // Error | null
+
+  // Methods
+  loginWithRedirect,  // (options?) => Promise<void>
+  loginWithPopup,     // (options?) => Promise<void>
+  logout,             // (options?) => Promise<void>
+  getAccessToken,     // () => Promise<string | undefined>
+  getIdTokenClaims,   // () => Promise<object | undefined>
+  hasPermission,      // (permission: string) => boolean
+  hasRole,            // (role: string) => boolean
+} = useAuth();
+```
+
+### useUser Hook
+
+Returns the current authenticated user.
+
+```tsx
+const { user, isLoading } = useUser();
+```
+
+### useAccessToken Hook
+
+Returns the current access token (or null if not authenticated).
+
+```tsx
+const accessToken = useAccessToken();
+```
+
+### AuthGuard Component
+
+Protects content that requires authentication.
+
+```tsx
+<AuthGuard
+  fallback={<Loading />}        // Shown while loading
+  onUnauthenticated={() => {}}  // Called when not authenticated
+  autoRedirect={true}           // Auto-redirect to login
+>
+  <ProtectedContent />
+</AuthGuard>
+```
+
+### withAuthenticationRequired HOC
+
+Higher-order component for protecting components.
+
+```tsx
+export default withAuthenticationRequired(Component, {
+  fallback: <Loading />,
+  onUnauthenticated: () => {},
+  returnTo: '/dashboard',
+});
+```
+
+## Making API Calls
+
+Use the access token to authenticate API requests:
+
+```tsx
+import { useAuth } from 'transactional-auth-react';
+
+function ApiExample() {
+  const { getAccessToken } = useAuth();
+
+  async function fetchData() {
+    const token = await getAccessToken();
+
+    const response = await fetch('https://api.example.com/data', {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    return response.json();
+  }
+
+  // ...
+}
+```
+
+## Next.js App Router
+
+For Next.js 13+ with the App Router, mark components as client components:
+
+```tsx
+'use client';
+
+import { TransactionalAuthProvider } from 'transactional-auth-react';
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <TransactionalAuthProvider
+      domain="auth.usetransactional.com"
+      clientId="your-client-id"
+    >
+      {children}
+    </TransactionalAuthProvider>
+  );
+}
+```
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,252 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+
+/**
+ * Transactional Auth React - Types
+ */
+interface TransactionalAuthUser {
+    sub: string;
+    email?: string;
+    emailVerified?: boolean;
+    name?: string;
+    givenName?: string;
+    familyName?: string;
+    picture?: string;
+    phoneNumber?: string;
+    phoneNumberVerified?: boolean;
+}
+interface TransactionalAuthState {
+    isAuthenticated: boolean;
+    isLoading: boolean;
+    user: TransactionalAuthUser | null;
+    error: Error | null;
+}
+interface LoginOptions {
+    /** Return URL after login */
+    returnTo?: string;
+    /** State to pass through the authentication flow */
+    appState?: Record<string, unknown>;
+    /** Force specific connection (e.g., 'google', 'github') */
+    connection?: string;
+    /** Login hint (pre-fill email) */
+    loginHint?: string;
+    /** UI locales */
+    uiLocales?: string;
+}
+interface LogoutOptions {
+    /** Return URL after logout */
+    returnTo?: string;
+    /** Whether to logout from the identity provider as well */
+    federated?: boolean;
+}
+interface TransactionalAuthContextValue extends TransactionalAuthState {
+    /** Redirect to login page */
+    loginWithRedirect: (options?: LoginOptions) => Promise<void>;
+    /** Open login popup */
+    loginWithPopup: (options?: LoginOptions) => Promise<void>;
+    /** Logout the user */
+    logout: (options?: LogoutOptions) => Promise<void>;
+    /** Get the access token (silently refreshes if needed) */
+    getAccessToken: () => Promise<string | undefined>;
+    /** Get ID token claims */
+    getIdTokenClaims: () => Promise<Record<string, unknown> | undefined>;
+    /** Check if user has specific permission */
+    hasPermission: (permission: string) => boolean;
+    /** Check if user has specific role */
+    hasRole: (role: string) => boolean;
+}
+interface TransactionalAuthProviderProps {
+    /** Auth domain (e.g., 'auth.usetransactional.com' or 'myapp.auth.usetransactional.com') */
+    domain: string;
+    /** Client ID of your application */
+    clientId: string;
+    /** Redirect URI after authentication (defaults to window.location.origin) */
+    redirectUri?: string;
+    /** Scopes to request (defaults to 'openid profile email') */
+    scope?: string;
+    /** API audience for access token */
+    audience?: string;
+    /** Where to store tokens: 'memory' or 'localstorage' */
+    cacheLocation?: 'memory' | 'localstorage';
+    /** Use refresh tokens for silent renewal */
+    useRefreshTokens?: boolean;
+    /** Callback after redirect from login */
+    onRedirectCallback?: (appState?: Record<string, unknown>) => void;
+    /** Children components */
+    children: React.ReactNode;
+}
+
+/**
+ * TransactionalAuthProvider Component
+ *
+ * Provides authentication context to your React application.
+ *
+ * @example
+ * ```tsx
+ * import { TransactionalAuthProvider } from 'transactional-auth-react';
+ *
+ * function App() {
+ *   return (
+ *     <TransactionalAuthProvider
+ *       domain="auth.usetransactional.com"
+ *       clientId="your-client-id"
+ *       redirectUri={window.location.origin}
+ *     >
+ *       <YourApp />
+ *     </TransactionalAuthProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function TransactionalAuthProvider({ domain, clientId, redirectUri, scope, audience, cacheLocation, useRefreshTokens, onRedirectCallback, children, }: TransactionalAuthProviderProps): react_jsx_runtime.JSX.Element;
+
+declare const TransactionalAuthContext: React$1.Context<TransactionalAuthContextValue>;
+
+/**
+ * Transactional Auth React - useAuth Hook
+ */
+
+/**
+ * Hook to access authentication state and methods.
+ *
+ * @example
+ * ```tsx
+ * import { useAuth } from 'transactional-auth-react';
+ *
+ * function LoginButton() {
+ *   const { isAuthenticated, loginWithRedirect, logout, user } = useAuth();
+ *
+ *   if (isAuthenticated) {
+ *     return (
+ *       <div>
+ *         <span>Welcome, {user?.name}</span>
+ *         <button onClick={() => logout()}>Logout</button>
+ *       </div>
+ *     );
+ *   }
+ *
+ *   return <button onClick={() => loginWithRedirect()}>Login</button>;
+ * }
+ * ```
+ */
+declare function useAuth(): TransactionalAuthContextValue;
+
+/**
+ * Transactional Auth React - useUser Hook
+ */
+
+interface UseUserResult {
+    user: TransactionalAuthUser | null;
+    isLoading: boolean;
+}
+/**
+ * Hook to access the current authenticated user.
+ *
+ * @example
+ * ```tsx
+ * import { useUser } from 'transactional-auth-react';
+ *
+ * function Profile() {
+ *   const { user, isLoading } = useUser();
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *   if (!user) return <div>Not logged in</div>;
+ *
+ *   return (
+ *     <div>
+ *       <img src={user.picture} alt={user.name} />
+ *       <h1>{user.name}</h1>
+ *       <p>{user.email}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useUser(): UseUserResult;
+
+/**
+ * Transactional Auth React - useAccessToken Hook
+ */
+/**
+ * Hook to get the current access token.
+ *
+ * @example
+ * ```tsx
+ * import { useAccessToken } from 'transactional-auth-react';
+ *
+ * function ApiComponent() {
+ *   const accessToken = useAccessToken();
+ *
+ *   useEffect(() => {
+ *     if (accessToken) {
+ *       fetch('/api/data', {
+ *         headers: { Authorization: `Bearer ${accessToken}` }
+ *       });
+ *     }
+ *   }, [accessToken]);
+ *
+ *   return <div>...</div>;
+ * }
+ * ```
+ */
+declare function useAccessToken(): string | null;
+
+interface AuthGuardProps {
+    /** Content to show while authenticated */
+    children: React$1.ReactNode;
+    /** Content to show while loading */
+    fallback?: React$1.ReactNode;
+    /** Callback when user is not authenticated */
+    onUnauthenticated?: () => void;
+    /** Whether to automatically redirect to login */
+    autoRedirect?: boolean;
+}
+/**
+ * Component that guards content for authenticated users only.
+ *
+ * @example
+ * ```tsx
+ * import { AuthGuard } from 'transactional-auth-react';
+ *
+ * function ProtectedPage() {
+ *   return (
+ *     <AuthGuard fallback={<div>Loading...</div>}>
+ *       <div>Protected content</div>
+ *     </AuthGuard>
+ *   );
+ * }
+ * ```
+ */
+declare function AuthGuard({ children, fallback, onUnauthenticated, autoRedirect, }: AuthGuardProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Transactional Auth React - withAuthenticationRequired HOC
+ */
+
+interface WithAuthenticationRequiredOptions {
+    /** Content to show while loading */
+    fallback?: React$1.ReactNode;
+    /** Callback when user is not authenticated */
+    onUnauthenticated?: () => void;
+    /** Return URL after login */
+    returnTo?: string;
+}
+/**
+ * Higher-order component that wraps a component to require authentication.
+ *
+ * @example
+ * ```tsx
+ * import { withAuthenticationRequired } from 'transactional-auth-react';
+ *
+ * function Dashboard() {
+ *   return <div>Dashboard content</div>;
+ * }
+ *
+ * export default withAuthenticationRequired(Dashboard, {
+ *   fallback: <div>Loading...</div>,
+ * });
+ * ```
+ */
+declare function withAuthenticationRequired<P extends object>(Component: React$1.ComponentType<P>, options?: WithAuthenticationRequiredOptions): React$1.ComponentType<P>;
+
+export { AuthGuard, type LoginOptions, type LogoutOptions, TransactionalAuthContext, type TransactionalAuthContextValue, TransactionalAuthProvider, type TransactionalAuthProviderProps, type TransactionalAuthState, type TransactionalAuthUser, useAccessToken, useAuth, useUser, withAuthenticationRequired };

package/dist/index.d.ts

@@ -0,0 +1,252 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+
+/**
+ * Transactional Auth React - Types
+ */
+interface TransactionalAuthUser {
+    sub: string;
+    email?: string;
+    emailVerified?: boolean;
+    name?: string;
+    givenName?: string;
+    familyName?: string;
+    picture?: string;
+    phoneNumber?: string;
+    phoneNumberVerified?: boolean;
+}
+interface TransactionalAuthState {
+    isAuthenticated: boolean;
+    isLoading: boolean;
+    user: TransactionalAuthUser | null;
+    error: Error | null;
+}
+interface LoginOptions {
+    /** Return URL after login */
+    returnTo?: string;
+    /** State to pass through the authentication flow */
+    appState?: Record<string, unknown>;
+    /** Force specific connection (e.g., 'google', 'github') */
+    connection?: string;
+    /** Login hint (pre-fill email) */
+    loginHint?: string;
+    /** UI locales */
+    uiLocales?: string;
+}
+interface LogoutOptions {
+    /** Return URL after logout */
+    returnTo?: string;
+    /** Whether to logout from the identity provider as well */
+    federated?: boolean;
+}
+interface TransactionalAuthContextValue extends TransactionalAuthState {
+    /** Redirect to login page */
+    loginWithRedirect: (options?: LoginOptions) => Promise<void>;
+    /** Open login popup */
+    loginWithPopup: (options?: LoginOptions) => Promise<void>;
+    /** Logout the user */
+    logout: (options?: LogoutOptions) => Promise<void>;
+    /** Get the access token (silently refreshes if needed) */
+    getAccessToken: () => Promise<string | undefined>;
+    /** Get ID token claims */
+    getIdTokenClaims: () => Promise<Record<string, unknown> | undefined>;
+    /** Check if user has specific permission */
+    hasPermission: (permission: string) => boolean;
+    /** Check if user has specific role */
+    hasRole: (role: string) => boolean;
+}
+interface TransactionalAuthProviderProps {
+    /** Auth domain (e.g., 'auth.usetransactional.com' or 'myapp.auth.usetransactional.com') */
+    domain: string;
+    /** Client ID of your application */
+    clientId: string;
+    /** Redirect URI after authentication (defaults to window.location.origin) */
+    redirectUri?: string;
+    /** Scopes to request (defaults to 'openid profile email') */
+    scope?: string;
+    /** API audience for access token */
+    audience?: string;
+    /** Where to store tokens: 'memory' or 'localstorage' */
+    cacheLocation?: 'memory' | 'localstorage';
+    /** Use refresh tokens for silent renewal */
+    useRefreshTokens?: boolean;
+    /** Callback after redirect from login */
+    onRedirectCallback?: (appState?: Record<string, unknown>) => void;
+    /** Children components */
+    children: React.ReactNode;
+}
+
+/**
+ * TransactionalAuthProvider Component
+ *
+ * Provides authentication context to your React application.
+ *
+ * @example
+ * ```tsx
+ * import { TransactionalAuthProvider } from 'transactional-auth-react';
+ *
+ * function App() {
+ *   return (
+ *     <TransactionalAuthProvider
+ *       domain="auth.usetransactional.com"
+ *       clientId="your-client-id"
+ *       redirectUri={window.location.origin}
+ *     >
+ *       <YourApp />
+ *     </TransactionalAuthProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function TransactionalAuthProvider({ domain, clientId, redirectUri, scope, audience, cacheLocation, useRefreshTokens, onRedirectCallback, children, }: TransactionalAuthProviderProps): react_jsx_runtime.JSX.Element;
+
+declare const TransactionalAuthContext: React$1.Context<TransactionalAuthContextValue>;
+
+/**
+ * Transactional Auth React - useAuth Hook
+ */
+
+/**
+ * Hook to access authentication state and methods.
+ *
+ * @example
+ * ```tsx
+ * import { useAuth } from 'transactional-auth-react';
+ *
+ * function LoginButton() {
+ *   const { isAuthenticated, loginWithRedirect, logout, user } = useAuth();
+ *
+ *   if (isAuthenticated) {
+ *     return (
+ *       <div>
+ *         <span>Welcome, {user?.name}</span>
+ *         <button onClick={() => logout()}>Logout</button>
+ *       </div>
+ *     );
+ *   }
+ *
+ *   return <button onClick={() => loginWithRedirect()}>Login</button>;
+ * }
+ * ```
+ */
+declare function useAuth(): TransactionalAuthContextValue;
+
+/**
+ * Transactional Auth React - useUser Hook
+ */
+
+interface UseUserResult {
+    user: TransactionalAuthUser | null;
+    isLoading: boolean;
+}
+/**
+ * Hook to access the current authenticated user.
+ *
+ * @example
+ * ```tsx
+ * import { useUser } from 'transactional-auth-react';
+ *
+ * function Profile() {
+ *   const { user, isLoading } = useUser();
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *   if (!user) return <div>Not logged in</div>;
+ *
+ *   return (
+ *     <div>
+ *       <img src={user.picture} alt={user.name} />
+ *       <h1>{user.name}</h1>
+ *       <p>{user.email}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useUser(): UseUserResult;
+
+/**
+ * Transactional Auth React - useAccessToken Hook
+ */
+/**
+ * Hook to get the current access token.
+ *
+ * @example
+ * ```tsx
+ * import { useAccessToken } from 'transactional-auth-react';
+ *
+ * function ApiComponent() {
+ *   const accessToken = useAccessToken();
+ *
+ *   useEffect(() => {
+ *     if (accessToken) {
+ *       fetch('/api/data', {
+ *         headers: { Authorization: `Bearer ${accessToken}` }
+ *       });
+ *     }
+ *   }, [accessToken]);
+ *
+ *   return <div>...</div>;
+ * }
+ * ```
+ */
+declare function useAccessToken(): string | null;
+
+interface AuthGuardProps {
+    /** Content to show while authenticated */
+    children: React$1.ReactNode;
+    /** Content to show while loading */
+    fallback?: React$1.ReactNode;
+    /** Callback when user is not authenticated */
+    onUnauthenticated?: () => void;
+    /** Whether to automatically redirect to login */
+    autoRedirect?: boolean;
+}
+/**
+ * Component that guards content for authenticated users only.
+ *
+ * @example
+ * ```tsx
+ * import { AuthGuard } from 'transactional-auth-react';
+ *
+ * function ProtectedPage() {
+ *   return (
+ *     <AuthGuard fallback={<div>Loading...</div>}>
+ *       <div>Protected content</div>
+ *     </AuthGuard>
+ *   );
+ * }
+ * ```
+ */
+declare function AuthGuard({ children, fallback, onUnauthenticated, autoRedirect, }: AuthGuardProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Transactional Auth React - withAuthenticationRequired HOC
+ */
+
+interface WithAuthenticationRequiredOptions {
+    /** Content to show while loading */
+    fallback?: React$1.ReactNode;
+    /** Callback when user is not authenticated */
+    onUnauthenticated?: () => void;
+    /** Return URL after login */
+    returnTo?: string;
+}
+/**
+ * Higher-order component that wraps a component to require authentication.
+ *
+ * @example
+ * ```tsx
+ * import { withAuthenticationRequired } from 'transactional-auth-react';
+ *
+ * function Dashboard() {
+ *   return <div>Dashboard content</div>;
+ * }
+ *
+ * export default withAuthenticationRequired(Dashboard, {
+ *   fallback: <div>Loading...</div>,
+ * });
+ * ```
+ */
+declare function withAuthenticationRequired<P extends object>(Component: React$1.ComponentType<P>, options?: WithAuthenticationRequiredOptions): React$1.ComponentType<P>;
+
+export { AuthGuard, type LoginOptions, type LogoutOptions, TransactionalAuthContext, type TransactionalAuthContextValue, TransactionalAuthProvider, type TransactionalAuthProviderProps, type TransactionalAuthState, type TransactionalAuthUser, useAccessToken, useAuth, useUser, withAuthenticationRequired };

package/dist/index.js

@@ -0,0 +1,333 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AuthGuard: () => AuthGuard,
+  TransactionalAuthContext: () => TransactionalAuthContext,
+  TransactionalAuthProvider: () => TransactionalAuthProvider,
+  useAccessToken: () => useAccessToken,
+  useAuth: () => useAuth,
+  useUser: () => useUser,
+  withAuthenticationRequired: () => withAuthenticationRequired
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/TransactionalAuthProvider.tsx
+var React = __toESM(require("react"));
+var import_oidc_client_ts = require("oidc-client-ts");
+
+// src/context.ts
+var import_react = require("react");
+var defaultContext = {
+  isAuthenticated: false,
+  isLoading: true,
+  user: null,
+  error: null,
+  loginWithRedirect: async () => {
+    throw new Error("TransactionalAuthProvider not found");
+  },
+  loginWithPopup: async () => {
+    throw new Error("TransactionalAuthProvider not found");
+  },
+  logout: async () => {
+    throw new Error("TransactionalAuthProvider not found");
+  },
+  getAccessToken: async () => {
+    throw new Error("TransactionalAuthProvider not found");
+  },
+  getIdTokenClaims: async () => {
+    throw new Error("TransactionalAuthProvider not found");
+  },
+  hasPermission: () => false,
+  hasRole: () => false
+};
+var TransactionalAuthContext = (0, import_react.createContext)(defaultContext);
+
+// src/TransactionalAuthProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function mapUser(user) {
+  return {
+    sub: user.profile.sub,
+    email: user.profile.email,
+    emailVerified: user.profile.email_verified,
+    name: user.profile.name,
+    givenName: user.profile.given_name,
+    familyName: user.profile.family_name,
+    picture: user.profile.picture,
+    phoneNumber: user.profile.phone_number,
+    phoneNumberVerified: user.profile.phone_number_verified
+  };
+}
+function TransactionalAuthProvider({
+  domain,
+  clientId,
+  redirectUri,
+  scope = "openid profile email",
+  audience,
+  cacheLocation = "localstorage",
+  useRefreshTokens = true,
+  onRedirectCallback,
+  children
+}) {
+  const [state, setState] = React.useState({
+    isAuthenticated: false,
+    isLoading: true,
+    user: null,
+    error: null
+  });
+  const userManagerRef = React.useRef(null);
+  const [permissions, setPermissions] = React.useState([]);
+  const [roles, setRoles] = React.useState([]);
+  React.useEffect(() => {
+    const effectiveRedirectUri = redirectUri || (typeof window !== "undefined" ? window.location.origin : "");
+    const effectiveScope = useRefreshTokens ? `${scope} offline_access` : scope;
+    const manager = new import_oidc_client_ts.UserManager({
+      authority: `https://${domain}`,
+      client_id: clientId,
+      redirect_uri: effectiveRedirectUri,
+      post_logout_redirect_uri: effectiveRedirectUri,
+      scope: effectiveScope,
+      response_type: "code",
+      automaticSilentRenew: useRefreshTokens,
+      userStore: typeof window !== "undefined" ? cacheLocation === "localstorage" ? new import_oidc_client_ts.WebStorageStateStore({ store: window.localStorage }) : new import_oidc_client_ts.WebStorageStateStore({ store: window.sessionStorage }) : void 0,
+      extraQueryParams: audience ? { audience } : void 0
+    });
+    userManagerRef.current = manager;
+    manager.getUser().then((user) => {
+      if (user && !user.expired) {
+        setState({
+          isAuthenticated: true,
+          isLoading: false,
+          user: mapUser(user),
+          error: null
+        });
+        const accessToken = user.access_token;
+        if (accessToken) {
+          try {
+            const payload = JSON.parse(atob(accessToken.split(".")[1]));
+            setRoles(payload.roles || []);
+            setPermissions(payload.permissions || []);
+          } catch {
+          }
+        }
+      } else {
+        setState((s) => ({ ...s, isLoading: false }));
+      }
+    }).catch((error) => {
+      setState((s) => ({ ...s, isLoading: false, error }));
+    });
+    if (typeof window !== "undefined") {
+      const params = new URLSearchParams(window.location.search);
+      if (params.has("code") || params.has("error")) {
+        manager.signinRedirectCallback().then((user) => {
+          setState({
+            isAuthenticated: true,
+            isLoading: false,
+            user: mapUser(user),
+            error: null
+          });
+          onRedirectCallback?.(user.state);
+          window.history.replaceState({}, "", window.location.pathname);
+        }).catch((error) => {
+          setState((s) => ({ ...s, isLoading: false, error }));
+        });
+      }
+    }
+    const handleUserLoaded = (user) => {
+      setState({
+        isAuthenticated: true,
+        isLoading: false,
+        user: mapUser(user),
+        error: null
+      });
+    };
+    const handleUserUnloaded = () => {
+      setState({
+        isAuthenticated: false,
+        isLoading: false,
+        user: null,
+        error: null
+      });
+      setRoles([]);
+      setPermissions([]);
+    };
+    const handleSilentRenewError = (error) => {
+      console.error("Silent renew error:", error);
+    };
+    manager.events.addUserLoaded(handleUserLoaded);
+    manager.events.addUserUnloaded(handleUserUnloaded);
+    manager.events.addSilentRenewError(handleSilentRenewError);
+    return () => {
+      manager.events.removeUserLoaded(handleUserLoaded);
+      manager.events.removeUserUnloaded(handleUserUnloaded);
+      manager.events.removeSilentRenewError(handleSilentRenewError);
+    };
+  }, [domain, clientId, redirectUri, scope, audience, cacheLocation, useRefreshTokens, onRedirectCallback]);
+  const contextValue = React.useMemo(
+    () => ({
+      ...state,
+      loginWithRedirect: async (options) => {
+        await userManagerRef.current?.signinRedirect({
+          state: options?.appState,
+          extraQueryParams: {
+            ...options?.connection ? { connection: options.connection } : {},
+            ...options?.loginHint ? { login_hint: options.loginHint } : {},
+            ...options?.uiLocales ? { ui_locales: options.uiLocales } : {}
+          },
+          redirect_uri: options?.returnTo
+        });
+      },
+      loginWithPopup: async (options) => {
+        const user = await userManagerRef.current?.signinPopup({
+          extraQueryParams: {
+            ...options?.connection ? { connection: options.connection } : {},
+            ...options?.loginHint ? { login_hint: options.loginHint } : {}
+          }
+        });
+        if (user) {
+          setState({
+            isAuthenticated: true,
+            isLoading: false,
+            user: mapUser(user),
+            error: null
+          });
+        }
+      },
+      logout: async (options) => {
+        await userManagerRef.current?.signoutRedirect({
+          post_logout_redirect_uri: options?.returnTo
+        });
+      },
+      getAccessToken: async () => {
+        const user = await userManagerRef.current?.getUser();
+        return user?.access_token;
+      },
+      getIdTokenClaims: async () => {
+        const user = await userManagerRef.current?.getUser();
+        return user?.profile;
+      },
+      hasPermission: (permission) => {
+        return permissions.includes(permission);
+      },
+      hasRole: (role) => {
+        return roles.includes(role);
+      }
+    }),
+    [state, permissions, roles]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TransactionalAuthContext.Provider, { value: contextValue, children });
+}
+
+// src/hooks/useAuth.ts
+var import_react2 = require("react");
+function useAuth() {
+  const context = (0, import_react2.useContext)(TransactionalAuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within a TransactionalAuthProvider");
+  }
+  return context;
+}
+
+// src/hooks/useUser.ts
+function useUser() {
+  const { user, isLoading } = useAuth();
+  return { user, isLoading };
+}
+
+// src/hooks/useAccessToken.ts
+var import_react3 = require("react");
+function useAccessToken() {
+  const { getAccessToken, isAuthenticated } = useAuth();
+  const [token, setToken] = (0, import_react3.useState)(null);
+  (0, import_react3.useEffect)(() => {
+    if (isAuthenticated) {
+      getAccessToken().then((t) => setToken(t || null));
+    } else {
+      setToken(null);
+    }
+  }, [getAccessToken, isAuthenticated]);
+  return token;
+}
+
+// src/components/AuthGuard.tsx
+var React2 = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function AuthGuard({
+  children,
+  fallback,
+  onUnauthenticated,
+  autoRedirect = true
+}) {
+  const { isAuthenticated, isLoading, loginWithRedirect } = useAuth();
+  React2.useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      if (onUnauthenticated) {
+        onUnauthenticated();
+      } else if (autoRedirect && typeof window !== "undefined") {
+        loginWithRedirect({ returnTo: window.location.pathname });
+      }
+    }
+  }, [isLoading, isAuthenticated, onUnauthenticated, autoRedirect, loginWithRedirect]);
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: fallback ?? null });
+  }
+  if (!isAuthenticated) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
+}
+
+// src/components/withAuthenticationRequired.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function withAuthenticationRequired(Component, options) {
+  const WrappedComponent = function WithAuthenticationRequired(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      AuthGuard,
+      {
+        fallback: options?.fallback,
+        onUnauthenticated: options?.onUnauthenticated,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...props })
+      }
+    );
+  };
+  WrappedComponent.displayName = `withAuthenticationRequired(${Component.displayName || Component.name || "Component"})`;
+  return WrappedComponent;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AuthGuard,
+  TransactionalAuthContext,
+  TransactionalAuthProvider,
+  useAccessToken,
+  useAuth,
+  useUser,
+  withAuthenticationRequired
+});

package/dist/index.mjs

@@ -0,0 +1,290 @@
+// src/TransactionalAuthProvider.tsx
+import * as React from "react";
+import { UserManager, WebStorageStateStore } from "oidc-client-ts";
+
+// src/context.ts
+import { createContext } from "react";
+var defaultContext = {
+  isAuthenticated: false,
+  isLoading: true,
+  user: null,
+  error: null,
+  loginWithRedirect: async () => {
+    throw new Error("TransactionalAuthProvider not found");
+  },
+  loginWithPopup: async () => {
+    throw new Error("TransactionalAuthProvider not found");
+  },
+  logout: async () => {
+    throw new Error("TransactionalAuthProvider not found");
+  },
+  getAccessToken: async () => {
+    throw new Error("TransactionalAuthProvider not found");
+  },
+  getIdTokenClaims: async () => {
+    throw new Error("TransactionalAuthProvider not found");
+  },
+  hasPermission: () => false,
+  hasRole: () => false
+};
+var TransactionalAuthContext = createContext(defaultContext);
+
+// src/TransactionalAuthProvider.tsx
+import { jsx } from "react/jsx-runtime";
+function mapUser(user) {
+  return {
+    sub: user.profile.sub,
+    email: user.profile.email,
+    emailVerified: user.profile.email_verified,
+    name: user.profile.name,
+    givenName: user.profile.given_name,
+    familyName: user.profile.family_name,
+    picture: user.profile.picture,
+    phoneNumber: user.profile.phone_number,
+    phoneNumberVerified: user.profile.phone_number_verified
+  };
+}
+function TransactionalAuthProvider({
+  domain,
+  clientId,
+  redirectUri,
+  scope = "openid profile email",
+  audience,
+  cacheLocation = "localstorage",
+  useRefreshTokens = true,
+  onRedirectCallback,
+  children
+}) {
+  const [state, setState] = React.useState({
+    isAuthenticated: false,
+    isLoading: true,
+    user: null,
+    error: null
+  });
+  const userManagerRef = React.useRef(null);
+  const [permissions, setPermissions] = React.useState([]);
+  const [roles, setRoles] = React.useState([]);
+  React.useEffect(() => {
+    const effectiveRedirectUri = redirectUri || (typeof window !== "undefined" ? window.location.origin : "");
+    const effectiveScope = useRefreshTokens ? `${scope} offline_access` : scope;
+    const manager = new UserManager({
+      authority: `https://${domain}`,
+      client_id: clientId,
+      redirect_uri: effectiveRedirectUri,
+      post_logout_redirect_uri: effectiveRedirectUri,
+      scope: effectiveScope,
+      response_type: "code",
+      automaticSilentRenew: useRefreshTokens,
+      userStore: typeof window !== "undefined" ? cacheLocation === "localstorage" ? new WebStorageStateStore({ store: window.localStorage }) : new WebStorageStateStore({ store: window.sessionStorage }) : void 0,
+      extraQueryParams: audience ? { audience } : void 0
+    });
+    userManagerRef.current = manager;
+    manager.getUser().then((user) => {
+      if (user && !user.expired) {
+        setState({
+          isAuthenticated: true,
+          isLoading: false,
+          user: mapUser(user),
+          error: null
+        });
+        const accessToken = user.access_token;
+        if (accessToken) {
+          try {
+            const payload = JSON.parse(atob(accessToken.split(".")[1]));
+            setRoles(payload.roles || []);
+            setPermissions(payload.permissions || []);
+          } catch {
+          }
+        }
+      } else {
+        setState((s) => ({ ...s, isLoading: false }));
+      }
+    }).catch((error) => {
+      setState((s) => ({ ...s, isLoading: false, error }));
+    });
+    if (typeof window !== "undefined") {
+      const params = new URLSearchParams(window.location.search);
+      if (params.has("code") || params.has("error")) {
+        manager.signinRedirectCallback().then((user) => {
+          setState({
+            isAuthenticated: true,
+            isLoading: false,
+            user: mapUser(user),
+            error: null
+          });
+          onRedirectCallback?.(user.state);
+          window.history.replaceState({}, "", window.location.pathname);
+        }).catch((error) => {
+          setState((s) => ({ ...s, isLoading: false, error }));
+        });
+      }
+    }
+    const handleUserLoaded = (user) => {
+      setState({
+        isAuthenticated: true,
+        isLoading: false,
+        user: mapUser(user),
+        error: null
+      });
+    };
+    const handleUserUnloaded = () => {
+      setState({
+        isAuthenticated: false,
+        isLoading: false,
+        user: null,
+        error: null
+      });
+      setRoles([]);
+      setPermissions([]);
+    };
+    const handleSilentRenewError = (error) => {
+      console.error("Silent renew error:", error);
+    };
+    manager.events.addUserLoaded(handleUserLoaded);
+    manager.events.addUserUnloaded(handleUserUnloaded);
+    manager.events.addSilentRenewError(handleSilentRenewError);
+    return () => {
+      manager.events.removeUserLoaded(handleUserLoaded);
+      manager.events.removeUserUnloaded(handleUserUnloaded);
+      manager.events.removeSilentRenewError(handleSilentRenewError);
+    };
+  }, [domain, clientId, redirectUri, scope, audience, cacheLocation, useRefreshTokens, onRedirectCallback]);
+  const contextValue = React.useMemo(
+    () => ({
+      ...state,
+      loginWithRedirect: async (options) => {
+        await userManagerRef.current?.signinRedirect({
+          state: options?.appState,
+          extraQueryParams: {
+            ...options?.connection ? { connection: options.connection } : {},
+            ...options?.loginHint ? { login_hint: options.loginHint } : {},
+            ...options?.uiLocales ? { ui_locales: options.uiLocales } : {}
+          },
+          redirect_uri: options?.returnTo
+        });
+      },
+      loginWithPopup: async (options) => {
+        const user = await userManagerRef.current?.signinPopup({
+          extraQueryParams: {
+            ...options?.connection ? { connection: options.connection } : {},
+            ...options?.loginHint ? { login_hint: options.loginHint } : {}
+          }
+        });
+        if (user) {
+          setState({
+            isAuthenticated: true,
+            isLoading: false,
+            user: mapUser(user),
+            error: null
+          });
+        }
+      },
+      logout: async (options) => {
+        await userManagerRef.current?.signoutRedirect({
+          post_logout_redirect_uri: options?.returnTo
+        });
+      },
+      getAccessToken: async () => {
+        const user = await userManagerRef.current?.getUser();
+        return user?.access_token;
+      },
+      getIdTokenClaims: async () => {
+        const user = await userManagerRef.current?.getUser();
+        return user?.profile;
+      },
+      hasPermission: (permission) => {
+        return permissions.includes(permission);
+      },
+      hasRole: (role) => {
+        return roles.includes(role);
+      }
+    }),
+    [state, permissions, roles]
+  );
+  return /* @__PURE__ */ jsx(TransactionalAuthContext.Provider, { value: contextValue, children });
+}
+
+// src/hooks/useAuth.ts
+import { useContext } from "react";
+function useAuth() {
+  const context = useContext(TransactionalAuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within a TransactionalAuthProvider");
+  }
+  return context;
+}
+
+// src/hooks/useUser.ts
+function useUser() {
+  const { user, isLoading } = useAuth();
+  return { user, isLoading };
+}
+
+// src/hooks/useAccessToken.ts
+import { useState as useState2, useEffect as useEffect2 } from "react";
+function useAccessToken() {
+  const { getAccessToken, isAuthenticated } = useAuth();
+  const [token, setToken] = useState2(null);
+  useEffect2(() => {
+    if (isAuthenticated) {
+      getAccessToken().then((t) => setToken(t || null));
+    } else {
+      setToken(null);
+    }
+  }, [getAccessToken, isAuthenticated]);
+  return token;
+}
+
+// src/components/AuthGuard.tsx
+import * as React2 from "react";
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+function AuthGuard({
+  children,
+  fallback,
+  onUnauthenticated,
+  autoRedirect = true
+}) {
+  const { isAuthenticated, isLoading, loginWithRedirect } = useAuth();
+  React2.useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      if (onUnauthenticated) {
+        onUnauthenticated();
+      } else if (autoRedirect && typeof window !== "undefined") {
+        loginWithRedirect({ returnTo: window.location.pathname });
+      }
+    }
+  }, [isLoading, isAuthenticated, onUnauthenticated, autoRedirect, loginWithRedirect]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx2(Fragment, { children: fallback ?? null });
+  }
+  if (!isAuthenticated) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx2(Fragment, { children });
+}
+
+// src/components/withAuthenticationRequired.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function withAuthenticationRequired(Component, options) {
+  const WrappedComponent = function WithAuthenticationRequired(props) {
+    return /* @__PURE__ */ jsx3(
+      AuthGuard,
+      {
+        fallback: options?.fallback,
+        onUnauthenticated: options?.onUnauthenticated,
+        children: /* @__PURE__ */ jsx3(Component, { ...props })
+      }
+    );
+  };
+  WrappedComponent.displayName = `withAuthenticationRequired(${Component.displayName || Component.name || "Component"})`;
+  return WrappedComponent;
+}
+export {
+  AuthGuard,
+  TransactionalAuthContext,
+  TransactionalAuthProvider,
+  useAccessToken,
+  useAuth,
+  useUser,
+  withAuthenticationRequired
+};

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "transactional-auth-react",
+  "version": "0.1.0",
+  "description": "React SDK for Transactional Auth - OpenID Connect authentication for React applications",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "auth",
+    "authentication",
+    "oidc",
+    "openid-connect",
+    "oauth2",
+    "transactional"
+  ],
+  "author": "Transactional",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TransactionalHQ/transactional-auth-react"
+  },
+  "homepage": "https://github.com/TransactionalHQ/transactional-auth-react#readme",
+  "bugs": {
+    "url": "https://github.com/TransactionalHQ/transactional-auth-react/issues"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "oidc-client-ts": "^3.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.5.0"
+  }
+}