@tonycodes/auth-react 1.0.1 → 1.1.1

package/src/types.ts

@@ -0,0 +1,66 @@
+export interface AuthConfig {
+  /** Client ID registered with auth service */
+  clientId: string;
+  /** Auth service URL. Defaults to https://auth.tony.codes */
+  authUrl?: string;
+  /** This app's base URL. Auto-discovered from server or defaults to window.location.origin */
+  appUrl?: string;
+  /**
+   * API base URL for proxied auth endpoints (callback, refresh, logout).
+   * Required if your API runs on a different subdomain than your frontend
+   * (e.g., api.myapp.test vs myapp.test).
+   * Auto-discovered from server or defaults to appUrl.
+   */
+  apiUrl?: string;
+  /**
+   * Whether to require an organization for the user to be considered authenticated.
+   * Defaults to true. Set to false for single-user apps without org context.
+   */
+  requireOrg?: boolean;
+}
+
+/** Resolved config with all URLs populated (after discovery) */
+export interface ResolvedAuthConfig {
+  clientId: string;
+  authUrl: string;
+  appUrl: string;
+  apiUrl: string;
+}
+
+export interface AuthUser {
+  id: string;
+  email: string;
+  name: string;
+  role: string;
+  imageUrl: string | null;
+}
+
+export interface AuthOrganization {
+  id: string;
+  name: string;
+  slug: string;
+  imageUrl: string | null;
+}
+
+export interface AuthState {
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  user: AuthUser | null;
+  organization: AuthOrganization | null;
+  tenant: { id: string; name: string; slug: string } | null; // legacy alias
+  isAdmin: boolean;
+  isOwner: boolean;
+  orgRole: string;
+  isSuperAdmin: boolean;
+  isPlatformAdmin: boolean;
+  accessToken: string | null;
+  getAccessToken: () => Promise<string | null>;
+  login: (provider?: string) => void;
+  logout: () => Promise<void>;
+  switchOrganization: (orgId: string) => Promise<void>;
+  organizations: AuthOrganization[];
+  isLoggingOut: boolean;
+  isLoggingIn: boolean;
+  loginError: string | null;
+  impersonating: boolean;
+}

package/src/useAuth.ts

@@ -0,0 +1,19 @@
+import { useContext } from 'react';
+import { AuthContext, AuthConfigContext } from './AuthProvider.js';
+import type { ResolvedAuthConfig, AuthState } from './types.js';
+
+export function useAuth(): AuthState {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}
+
+export function useAuthConfig(): ResolvedAuthConfig {
+  const config = useContext(AuthConfigContext);
+  if (!config) {
+    throw new Error('useAuthConfig must be used within an AuthProvider');
+  }
+  return config;
+}

package/src/useProviders.ts

@@ -0,0 +1,136 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useAuthConfig } from './useAuth.js';
+
+export type SSOProvider = 'github' | 'google' | 'apple' | 'bitbucket';
+
+export interface ProviderInfo {
+  id: SSOProvider;
+  name: string;
+  enabled: boolean;
+}
+
+export interface UseProvidersResult {
+  providers: ProviderInfo[];
+  isLoading: boolean;
+  error: string | null;
+  /** Force refetch, bypassing cache */
+  refresh: () => void;
+}
+
+// ─── Module-level cache ──────────────────────────────────────────────────
+
+interface CacheEntry {
+  providers: ProviderInfo[];
+  fetchedAt: number;
+}
+
+const CACHE_TTL = 60_000; // 60 seconds
+const cache = new Map<string, CacheEntry>();
+
+function getCacheKey(authUrl: string, clientId: string): string {
+  return `${authUrl}::${clientId}`;
+}
+
+function getCachedProviders(key: string): CacheEntry | null {
+  const entry = cache.get(key);
+  if (!entry) return null;
+  return entry;
+}
+
+function isStale(entry: CacheEntry): boolean {
+  return Date.now() - entry.fetchedAt > CACHE_TTL;
+}
+
+async function fetchProviders(authUrl: string, clientId: string): Promise<ProviderInfo[]> {
+  const url = new URL(`${authUrl}/providers`);
+  url.searchParams.set('client_id', clientId);
+
+  const res = await fetch(url.toString());
+  if (!res.ok) {
+    throw new Error('Failed to fetch providers');
+  }
+
+  const data = await res.json();
+  return data.providers || [];
+}
+
+// ─── Hook ────────────────────────────────────────────────────────────────
+
+/**
+ * Hook to fetch available SSO providers from the auth service.
+ * Uses module-level cache with 60s TTL and stale-while-revalidate.
+ * Clears cache on window.focus for admin changes to take effect.
+ */
+export function useProviders(): UseProvidersResult {
+  const config = useAuthConfig();
+  const cacheKey = getCacheKey(config.authUrl, config.clientId);
+
+  // Initialize from cache if available
+  const cached = getCachedProviders(cacheKey);
+  const [providers, setProviders] = useState<ProviderInfo[]>(cached?.providers || []);
+  const [isLoading, setIsLoading] = useState(!cached);
+  const [error, setError] = useState<string | null>(null);
+  const [refreshCounter, setRefreshCounter] = useState(0);
+
+  const refresh = useCallback(() => {
+    cache.delete(cacheKey);
+    setRefreshCounter((c: number) => c + 1);
+  }, [cacheKey]);
+
+  useEffect(() => {
+    let mounted = true;
+
+    async function doFetch(showLoading: boolean) {
+      if (showLoading) setIsLoading(true);
+      try {
+        const result = await fetchProviders(config.authUrl, config.clientId);
+        cache.set(cacheKey, { providers: result, fetchedAt: Date.now() });
+        if (mounted) {
+          setProviders(result);
+          setError(null);
+        }
+      } catch (err) {
+        if (mounted) {
+          setError(err instanceof Error ? err.message : 'Failed to fetch providers');
+          // Keep stale data if we have it
+          if (!cached) setProviders([]);
+        }
+      } finally {
+        if (mounted) setIsLoading(false);
+      }
+    }
+
+    const entry = getCachedProviders(cacheKey);
+
+    if (!entry) {
+      // No cache — fetch with loading state
+      doFetch(true);
+    } else if (isStale(entry)) {
+      // Stale cache — show cached data, refresh in background
+      setProviders(entry.providers);
+      setIsLoading(false);
+      doFetch(false);
+    } else {
+      // Fresh cache — use it directly
+      setProviders(entry.providers);
+      setIsLoading(false);
+    }
+
+    // Refetch on window focus (admin changes take effect when tab refocused)
+    function handleFocus() {
+      const current = getCachedProviders(cacheKey);
+      if (!current || isStale(current)) {
+        doFetch(false);
+      }
+    }
+
+    window.addEventListener('focus', handleFocus);
+
+    return () => {
+      mounted = false;
+      window.removeEventListener('focus', handleFocus);
+    };
+  }, [config.authUrl, config.clientId, cacheKey, refreshCounter]);
+
+  return { providers, isLoading, error, refresh };
+}

package/src/validateConfig.ts

@@ -0,0 +1,94 @@
+import type { AuthConfig } from './types.js';
+
+/**
+ * Configuration validation errors for better developer experience.
+ */
+export class AuthConfigError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'AuthConfigError';
+  }
+}
+
+/**
+ * Validates AuthConfig and throws descriptive errors if invalid.
+ * Called at initialization time to fail fast with helpful messages.
+ * Only clientId is required — authUrl and appUrl can be auto-discovered.
+ */
+export function validateConfig(config: AuthConfig): void {
+  if (!config) {
+    throw new AuthConfigError(
+      'AuthProvider requires a config prop. ' +
+        'At minimum, provide { clientId: "your-app-id" }.',
+    );
+  }
+
+  // Required field
+  if (!config.clientId) {
+    throw new AuthConfigError(
+      'Missing required config: clientId. ' +
+        'This is the client ID registered with the auth service.',
+    );
+  }
+
+  // URL format validation (only if provided)
+  if (config.authUrl) {
+    try {
+      new URL(config.authUrl);
+    } catch {
+      throw new AuthConfigError(
+        `Invalid authUrl: "${config.authUrl}" is not a valid URL. ` +
+          'It should include the protocol (e.g., "https://auth.tony.codes").',
+      );
+    }
+  }
+
+  if (config.appUrl) {
+    try {
+      new URL(config.appUrl);
+    } catch {
+      throw new AuthConfigError(
+        `Invalid appUrl: "${config.appUrl}" is not a valid URL. ` +
+          'It should include the protocol (e.g., "https://myapp.tony.codes").',
+      );
+    }
+  }
+
+  if (config.apiUrl) {
+    try {
+      new URL(config.apiUrl);
+    } catch {
+      throw new AuthConfigError(
+        `Invalid apiUrl: "${config.apiUrl}" is not a valid URL. ` +
+          'It should include the protocol (e.g., "https://api.myapp.tony.codes").',
+      );
+    }
+  }
+
+  // Common misconfiguration warnings (logged but don't throw)
+  if (typeof window !== 'undefined') {
+    const isProduction = !window.location.hostname.includes('test') &&
+                         !window.location.hostname.includes('localhost');
+
+    if (isProduction && config.authUrl?.includes('localhost')) {
+      console.warn(
+        '[auth-react] Warning: authUrl contains "localhost" but app appears to be in production. ' +
+          'Make sure to update authUrl for production.',
+      );
+    }
+
+    if (config.authUrl?.endsWith('/')) {
+      console.warn(
+        '[auth-react] Warning: authUrl has a trailing slash. ' +
+          'This may cause double slashes in URLs.',
+      );
+    }
+
+    if (config.appUrl?.endsWith('/')) {
+      console.warn(
+        '[auth-react] Warning: appUrl has a trailing slash. ' +
+          'This may cause double slashes in URLs.',
+      );
+    }
+  }
+}

package/tailwind.config.js

@@ -0,0 +1,7 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.tsx'],
+  theme: { extend: {} },
+  plugins: [],
+  corePlugins: { preflight: false },
+};

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "skipLibCheck": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 Tony
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.