@tonycodes/auth-react 1.1.0 → 1.2.1

package/src/SignInForm.tsx

@@ -0,0 +1,323 @@
+import { useEffect, useState } from 'react';
+import { useAuthConfig } from './useAuth.js';
+import { useProviders, type SSOProvider } from './useProviders.js';
+
+type Mode = 'signin' | 'signup';
+
+const ERROR_MESSAGES: Record<string, string> = {
+  account_not_found: 'No account found with that login. Sign up to create one.',
+  oauth_failed: 'Something went wrong during sign in. Please try again.',
+  missing_code: 'Authorization failed. Please try again.',
+  invalid_state: 'Session expired. Please try again.',
+};
+
+// ─── Inline Styles ───────────────────────────────────────────────────────
+
+const styles = {
+  tabContainer: (isDark: boolean) => ({
+    display: 'flex',
+    gap: '4px',
+    padding: '4px',
+    backgroundColor: isDark ? '#1f2937' : '#f4f4f5',
+    borderRadius: '12px',
+    marginBottom: '24px',
+  } as React.CSSProperties),
+
+  tab: (isActive: boolean, isDark: boolean) => ({
+    flex: 1,
+    padding: '8px 0',
+    fontSize: '14px',
+    fontWeight: 500,
+    borderRadius: '8px',
+    textAlign: 'center' as const,
+    cursor: 'pointer',
+    transition: 'background-color 0.15s, color 0.15s',
+    border: 'none',
+    backgroundColor: isActive
+      ? (isDark ? '#374151' : '#ffffff')
+      : 'transparent',
+    color: isActive
+      ? (isDark ? '#f9fafb' : '#18181b')
+      : (isDark ? '#9ca3af' : '#71717a'),
+    boxShadow: isActive ? '0 1px 2px rgba(0,0,0,0.05)' : 'none',
+  } as React.CSSProperties),
+
+  error: (isDark: boolean) => ({
+    marginBottom: '16px',
+    padding: '12px',
+    borderRadius: '8px',
+    backgroundColor: isDark ? 'rgba(239,68,68,0.15)' : '#fef2f2',
+    border: `1px solid ${isDark ? 'rgba(239,68,68,0.3)' : '#fecaca'}`,
+    color: isDark ? '#fca5a5' : '#b91c1c',
+    fontSize: '14px',
+  } as React.CSSProperties),
+
+  buttonGroup: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: '12px',
+  } as React.CSSProperties,
+
+  buttonBase: {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '12px',
+    padding: '12px 24px',
+    fontWeight: 500,
+    fontSize: '15px',
+    borderRadius: '12px',
+    cursor: 'pointer',
+    border: 'none',
+    transition: 'opacity 0.15s',
+    fontFamily: 'inherit',
+  } as React.CSSProperties,
+
+  githubBtn: (isDark: boolean) => ({
+    backgroundColor: isDark ? '#ffffff' : '#18181b',
+    color: isDark ? '#18181b' : '#ffffff',
+  } as React.CSSProperties),
+
+  googleBtn: (isDark: boolean) => ({
+    backgroundColor: isDark ? '#1f2937' : '#ffffff',
+    color: isDark ? '#e5e7eb' : '#18181b',
+    border: `1px solid ${isDark ? '#374151' : '#d4d4d8'}`,
+  } as React.CSSProperties),
+
+  appleBtn: {
+    backgroundColor: '#000000',
+    color: '#ffffff',
+  } as React.CSSProperties,
+
+  bitbucketBtn: {
+    backgroundColor: '#2563eb',
+    color: '#ffffff',
+  } as React.CSSProperties,
+
+  spinner: (isDark: boolean) => ({
+    width: '20px',
+    height: '20px',
+    border: `2px solid ${isDark ? '#374151' : '#d4d4d8'}`,
+    borderTopColor: isDark ? '#9ca3af' : '#52525b',
+    borderRadius: '50%',
+    animation: 'tonycodes-auth-spin 0.6s linear infinite',
+    margin: '16px auto',
+  } as React.CSSProperties),
+
+  terms: (isDark: boolean) => ({
+    marginTop: '24px',
+    textAlign: 'center' as const,
+    fontSize: '12px',
+    color: isDark ? '#6b7280' : '#a1a1aa',
+  } as React.CSSProperties),
+};
+
+// ─── Provider Icons (inline SVG) ─────────────────────────────────────────
+
+function GithubIcon() {
+  return (
+    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+      <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" />
+    </svg>
+  );
+}
+
+function GoogleIcon() {
+  return (
+    <svg viewBox="0 0 24 24" width="20" height="20">
+      <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
+      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
+      <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
+      <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
+    </svg>
+  );
+}
+
+function AppleIcon() {
+  return (
+    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+      <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" />
+    </svg>
+  );
+}
+
+function BitbucketIcon() {
+  return (
+    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+      <path d="M.778 1.213a.768.768 0 0 0-.768.892l3.263 19.81c.084.5.515.868 1.022.873H19.95a.772.772 0 0 0 .77-.646l3.27-20.03a.768.768 0 0 0-.768-.891L.778 1.213zM14.52 15.53H9.522L8.17 8.466h7.561l-1.211 7.064z" />
+    </svg>
+  );
+}
+
+// ─── Component ────────────────────────────────────────────────────────────
+
+interface SignInFormProps {
+  /** List of provider IDs to show (for manual control). Overrides autoFetch when provided. */
+  providers?: SSOProvider[];
+  /** Whether to automatically fetch providers from the auth service. Defaults to true. */
+  autoFetch?: boolean;
+  /** Color theme. Defaults to 'auto' (follows prefers-color-scheme). */
+  theme?: 'light' | 'dark' | 'auto';
+  /** Optional inline styles applied to the root container. */
+  style?: React.CSSProperties;
+  /** Optional CSS class applied to the root container. */
+  className?: string;
+}
+
+export function SignInForm({
+  providers: propProviders,
+  autoFetch = true,
+  theme = 'auto',
+  style,
+  className,
+}: SignInFormProps) {
+  const config = useAuthConfig();
+  const { providers: fetchedProviders, isLoading: providersLoading } = useProviders();
+  const [activeTab, setActiveTab] = useState<Mode>('signin');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [returnTo, setReturnTo] = useState('/');
+  const [isDark, setIsDark] = useState(false);
+
+  // Resolve theme
+  useEffect(() => {
+    if (theme === 'dark') {
+      setIsDark(true);
+    } else if (theme === 'light') {
+      setIsDark(false);
+    } else {
+      // auto — check prefers-color-scheme
+      const mq = window.matchMedia('(prefers-color-scheme: dark)');
+      setIsDark(mq.matches);
+      const handler = (e: MediaQueryListEvent) => setIsDark(e.matches);
+      mq.addEventListener('change', handler);
+      return () => mq.removeEventListener('change', handler);
+    }
+  }, [theme]);
+
+  // Use prop providers if explicitly provided, otherwise use fetched providers
+  const enabledProviders: SSOProvider[] = propProviders
+    ? propProviders
+    : autoFetch
+      ? fetchedProviders.map((p) => p.id)
+      : ['github']; // fallback default
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const errorParam = params.get('error');
+    const tabParam = params.get('tab') as Mode | null;
+    const returnToParam = params.get('returnTo');
+
+    if (returnToParam) setReturnTo(returnToParam);
+
+    if (errorParam) {
+      setErrorMessage(ERROR_MESSAGES[errorParam] || `Authentication error: ${errorParam}`);
+      if (errorParam === 'account_not_found') {
+        setActiveTab('signup');
+      }
+    }
+
+    if (tabParam === 'signin' || tabParam === 'signup') {
+      setActiveTab(tabParam);
+    }
+  }, []);
+
+  function handleOAuth(provider: string) {
+    const redirectUri = `${config.appUrl}/auth/callback`;
+    const state = btoa(JSON.stringify({ returnTo }));
+    const params = new URLSearchParams({
+      client_id: config.clientId,
+      redirect_uri: redirectUri,
+      state,
+      provider,
+      mode: activeTab,
+    });
+    window.location.href = `${config.authUrl}/authorize?${params}`;
+  }
+
+  function switchTab(tab: Mode) {
+    setActiveTab(tab);
+    setErrorMessage(null);
+  }
+
+  const providerName = (id: string) => {
+    const names: Record<string, string> = {
+      github: 'GitHub',
+      google: 'Google',
+      apple: 'Apple',
+      bitbucket: 'Bitbucket',
+    };
+    return names[id] || id;
+  };
+
+  const buttonText = (provider: string) => {
+    const name = providerName(provider);
+    return activeTab === 'signin' ? `Sign in with ${name}` : `Sign up with ${name}`;
+  };
+
+  const providerStyles: Record<string, React.CSSProperties> = {
+    github: { ...styles.buttonBase, ...styles.githubBtn(isDark) },
+    google: { ...styles.buttonBase, ...styles.googleBtn(isDark) },
+    apple: { ...styles.buttonBase, ...styles.appleBtn },
+    bitbucket: { ...styles.buttonBase, ...styles.bitbucketBtn },
+  };
+
+  const providerIcons: Record<string, React.ReactNode> = {
+    github: <GithubIcon />,
+    google: <GoogleIcon />,
+    apple: <AppleIcon />,
+    bitbucket: <BitbucketIcon />,
+  };
+
+  return (
+    <div className={className} style={style}>
+      {/* Inject keyframe animation */}
+      <style>{`@keyframes tonycodes-auth-spin { to { transform: rotate(360deg) } }`}</style>
+
+      {/* Tab toggle */}
+      <div style={styles.tabContainer(isDark)}>
+        <button type="button" style={styles.tab(activeTab === 'signin', isDark)} onClick={() => switchTab('signin')}>
+          Sign In
+        </button>
+        <button type="button" style={styles.tab(activeTab === 'signup', isDark)} onClick={() => switchTab('signup')}>
+          Sign Up
+        </button>
+      </div>
+
+      {/* Error message */}
+      {errorMessage && (
+        <div style={styles.error(isDark)}>
+          {errorMessage}
+        </div>
+      )}
+
+      {/* Loading state */}
+      {autoFetch && !propProviders && providersLoading ? (
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px 0' }}>
+          <div style={styles.spinner(isDark)} />
+        </div>
+      ) : (
+        <div style={styles.buttonGroup}>
+          {enabledProviders.map((id) => (
+            <button
+              key={id}
+              type="button"
+              style={providerStyles[id] || styles.buttonBase}
+              onClick={() => handleOAuth(id)}
+              onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.opacity = '0.9'; }}
+              onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.opacity = '1'; }}
+            >
+              {providerIcons[id]}
+              <span>{buttonText(id)}</span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Terms */}
+      <p style={styles.terms(isDark)}>
+        By continuing, you agree to our terms of service.
+      </p>
+    </div>
+  );
+}

package/src/components.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import { useAuth } from './useAuth.js';
+
+interface AuthGateProps {
+  children: ReactNode;
+}
+
+/**
+ * Renders children only when user is authenticated
+ */
+export function SignedIn({ children }: AuthGateProps) {
+  const { isAuthenticated, isLoading } = useAuth();
+  if (isLoading || !isAuthenticated) return null;
+  return <>{children}</>;
+}
+
+/**
+ * Renders children only when user is NOT authenticated
+ */
+export function SignedOut({ children }: AuthGateProps) {
+  const { isAuthenticated, isLoading } = useAuth();
+  if (isLoading || isAuthenticated) return null;
+  return <>{children}</>;
+}
+
+/**
+ * Redirects to auth service sign-in when user is not authenticated
+ */
+export function RedirectToSignIn() {
+  const { isAuthenticated, isLoading, login } = useAuth();
+
+  if (isLoading) return null;
+
+  if (!isAuthenticated) {
+    login();
+    return null;
+  }
+
+  return null;
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+export { AuthProvider } from './AuthProvider.js';
+export { useAuth, useAuthConfig } from './useAuth.js';
+export { useProviders, type SSOProvider, type ProviderInfo, type UseProvidersResult } from './useProviders.js';
+export { SignedIn, SignedOut, RedirectToSignIn } from './components.js';
+export { OrganizationSwitcher } from './OrganizationSwitcher.js';
+export { AuthCallback } from './AuthCallback.js';
+export { SignInForm } from './SignInForm.js';
+export { AuthConfigError } from './validateConfig.js';
+export type { AuthConfig, ResolvedAuthConfig, AuthUser, AuthOrganization, AuthState } from './types.js';

package/src/types.ts

@@ -0,0 +1,61 @@
+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;
+}
+
+/** 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.',
+      );
+    }
+  }
+}