@acl-identity/react 0.1.0

package/src/provider.tsx

@@ -0,0 +1,221 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import type { ACLBrowserClient } from '@acl-identity/browser';
+import { tokenExpiresAt } from '@acl-identity/core';
+import type { UserClaims } from '@acl-identity/types';
+import { AuthContext, type SignInOptions, type SignOutOptions } from './context';
+
+export interface AuthProviderProps {
+  client: ACLBrowserClient;
+  /** OAuth2 client_id — passed to buildAuthorizationUrl and silentRenew */
+  clientId: string;
+  /** Redirect URI registered with the auth server for the main auth flow */
+  redirectUri: string;
+  /** Organization slug for multi-tenant routing */
+  orgSlug?: string;
+  /** Space-separated OAuth2 scopes. Defaults to 'openid profile email' */
+  scopes?: string;
+  /**
+   * Redirect URI for silent token renewal via hidden iframe.
+   * Must be registered with the auth server. The page at this URI
+   * must render <SilentCallbackPage />.
+   */
+  silentRedirectUri?: string;
+  /**
+   * Called after the OAuth2 redirect callback is processed.
+   * Use this to navigate the user to their intended destination.
+   */
+  onRedirectCallback?: (appState?: unknown) => void;
+  children: ReactNode;
+}
+
+interface AuthState {
+  user: UserClaims | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+const PKCE_KEY_PREFIX = 'acl:pkce:';
+
+export function AuthProvider({
+  client,
+  clientId,
+  redirectUri,
+  orgSlug,
+  scopes,
+  silentRedirectUri,
+  onRedirectCallback,
+  children,
+}: AuthProviderProps) {
+  const [state, setState] = useState<AuthState>({
+    user: null,
+    isAuthenticated: false,
+    isLoading: true,
+    error: null,
+  });
+
+  const initialized = useRef(false);
+
+  const syncAuthState = useCallback(async () => {
+    const [user, isAuthenticated] = await Promise.all([
+      client.auth.parseCurrentUser(),
+      client.auth.isAuthenticated(),
+    ]);
+    setState({ user, isAuthenticated, isLoading: false, error: null });
+  }, [client]);
+
+  const handleSilentRenew = useCallback(async () => {
+    if (!silentRedirectUri) {
+      setState((s) => ({ ...s, isLoading: false }));
+      return;
+    }
+    try {
+      await client.auth.silentRenew(silentRedirectUri, clientId, { orgSlug, scope: scopes });
+      await syncAuthState();
+    } catch {
+      setState({ user: null, isAuthenticated: false, isLoading: false, error: null });
+    }
+  }, [client, silentRedirectUri, clientId, orgSlug, scopes, syncAuthState]);
+
+  // Initial session check — runs once on mount
+  useEffect(() => {
+    if (initialized.current) return;
+    initialized.current = true;
+
+    const url = new URL(window.location.href);
+    const isCallbackUrl = url.searchParams.has('code') && url.searchParams.has('state');
+
+    if (isCallbackUrl) {
+      // Stay loading while CallbackHandler processes the code exchange
+      return;
+    }
+
+    client.auth.isAuthenticated().then((isAuth) => {
+      if (isAuth) {
+        syncAuthState();
+      } else {
+        handleSilentRenew();
+      }
+    });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Schedule proactive silent renew before the current token expires
+  useEffect(() => {
+    if (!state.user || !silentRedirectUri) return;
+
+    let timer: ReturnType<typeof setTimeout>;
+
+    client.auth.getAccessToken().then((token) => {
+      if (!token) return;
+      const expiresAtMs = tokenExpiresAt(token);
+      if (!expiresAtMs) return;
+
+      const msUntilRenew = expiresAtMs - Date.now() - 30_000;
+      if (msUntilRenew <= 0) {
+        handleSilentRenew();
+        return;
+      }
+      timer = setTimeout(handleSilentRenew, msUntilRenew);
+    });
+
+    return () => clearTimeout(timer);
+  }, [state.user, silentRedirectUri, handleSilentRenew, client]);
+
+  const signIn = useCallback(
+    async (options?: SignInOptions) => {
+      const { url, state: authState, codeVerifier } = await client.auth.buildAuthorizationUrl({
+        clientId,
+        redirectUri,
+        orgSlug,
+        scope: scopes,
+      });
+      sessionStorage.setItem(
+        `${PKCE_KEY_PREFIX}${authState}`,
+        JSON.stringify({ codeVerifier, appState: options?.appState ?? null })
+      );
+      window.location.href = url;
+    },
+    [client, clientId, redirectUri, orgSlug, scopes]
+  );
+
+  const signOut = useCallback(
+    async (options?: SignOutOptions) => {
+      await client.auth.logout({ revokeToken: options?.revokeToken });
+      setState({ user: null, isAuthenticated: false, isLoading: false, error: null });
+      if (options?.returnTo) {
+        window.location.href = options.returnTo;
+      }
+    },
+    [client]
+  );
+
+  const getAccessToken = useCallback(() => client.auth.getAccessToken(), [client]);
+
+  const handleCallback = useCallback(
+    async (callbackUrl?: string): Promise<{ appState?: unknown }> => {
+      const url = new URL(callbackUrl ?? window.location.href);
+      const error = url.searchParams.get('error');
+
+      if (error) {
+        const desc = url.searchParams.get('error_description') ?? error;
+        const err = new Error(desc);
+        setState((s) => ({ ...s, error: err, isLoading: false }));
+        throw err;
+      }
+
+      const code = url.searchParams.get('code');
+      const authState = url.searchParams.get('state');
+
+      if (!code || !authState) {
+        const err = new Error('Missing code or state in callback URL');
+        setState((s) => ({ ...s, error: err, isLoading: false }));
+        throw err;
+      }
+
+      const stored = sessionStorage.getItem(`${PKCE_KEY_PREFIX}${authState}`);
+      if (!stored) {
+        const err = new Error('Auth session expired or state mismatch. Please sign in again.');
+        setState((s) => ({ ...s, error: err, isLoading: false }));
+        throw err;
+      }
+
+      const { codeVerifier, appState } = JSON.parse(stored) as {
+        codeVerifier: string;
+        appState?: unknown;
+      };
+      sessionStorage.removeItem(`${PKCE_KEY_PREFIX}${authState}`);
+
+      await client.auth.exchangeCode(code, codeVerifier, redirectUri);
+      await syncAuthState();
+
+      onRedirectCallback?.(appState);
+      return { appState };
+    },
+    [client, redirectUri, syncAuthState, onRedirectCallback]
+  );
+
+  return (
+    <AuthContext.Provider
+      value={{
+        ...state,
+        client,
+        clientId,
+        redirectUri,
+        orgSlug,
+        scopes,
+        signIn,
+        signOut,
+        getAccessToken,
+        handleCallback,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"]
+  },
+  "include": ["src"]
+}

package/tsup.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: { index: 'src/index.ts' },
+  format: ['esm', 'cjs'],
+  dts: true,
+  splitting: true,
+  sourcemap: true,
+  clean: true,
+  external: ['react', 'react-dom'],
+});