@tonycodes/auth-react 1.0.1 → 1.1.1

package/src/AuthProvider.tsx

@@ -0,0 +1,331 @@
+import { createContext, useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
+import type { AuthConfig, ResolvedAuthConfig, AuthUser, AuthOrganization, AuthState } from './types.js';
+import { validateConfig } from './validateConfig.js';
+
+const DEFAULT_AUTH_URL = 'https://auth.tony.codes';
+
+interface JWTPayload {
+  sub: string;
+  email: string;
+  name: string | null;
+  avatarUrl: string | null;
+  org: { id: string; name: string; slug: string; role: string } | null;
+  isSuperAdmin: boolean;
+  exp: number;
+}
+
+function decodeJWT(token: string): JWTPayload {
+  try {
+    const base64 = token.split('.')[1];
+    if (!base64) throw new Error('Invalid token structure');
+    const json = atob(base64.replace(/-/g, '+').replace(/_/g, '/'));
+    return JSON.parse(json);
+  } catch {
+    throw new Error('Failed to decode access token — the token may be malformed');
+  }
+}
+
+export const AuthContext = createContext<AuthState | null>(null);
+export const AuthConfigContext = createContext<ResolvedAuthConfig | null>(null);
+
+interface AuthProviderProps {
+  config: AuthConfig;
+  children: ReactNode;
+}
+
+/**
+ * Resolve config by discovering missing URLs from the auth service.
+ * 1. If appUrl provided explicitly → use it, skip discovery
+ * 2. Otherwise → fetch from /api/client-apps/:clientId/config
+ * 3. Fallback → use window.location.origin
+ */
+async function resolveConfig(config: AuthConfig): Promise<ResolvedAuthConfig> {
+  const authUrl = config.authUrl || DEFAULT_AUTH_URL;
+  let appUrl = config.appUrl;
+  let apiUrl = config.apiUrl;
+
+  // If appUrl is already provided, skip discovery
+  if (!appUrl) {
+    try {
+      const res = await fetch(`${authUrl}/api/client-apps/${config.clientId}/config`);
+      if (res.ok) {
+        const data = await res.json();
+        appUrl = data.appUrl || undefined;
+        if (!apiUrl) apiUrl = data.apiUrl || undefined;
+      }
+    } catch {
+      // Discovery failed — use fallback
+    }
+  }
+
+  // Fallback to window.location.origin
+  if (!appUrl && typeof window !== 'undefined') {
+    appUrl = window.location.origin;
+  }
+
+  if (!appUrl) {
+    appUrl = authUrl; // Last resort
+  }
+
+  return {
+    clientId: config.clientId,
+    authUrl,
+    appUrl,
+    apiUrl: apiUrl || appUrl,
+  };
+}
+
+export function AuthProvider({ config, children }: AuthProviderProps) {
+  // Validate config on initialization (throws if invalid)
+  validateConfig(config);
+
+  const [resolved, setResolved] = useState<ResolvedAuthConfig | null>(() => {
+    // If all URLs are provided, resolve synchronously
+    const authUrl = config.authUrl || DEFAULT_AUTH_URL;
+    if (config.appUrl) {
+      return {
+        clientId: config.clientId,
+        authUrl,
+        appUrl: config.appUrl,
+        apiUrl: config.apiUrl || config.appUrl,
+      };
+    }
+    return null;
+  });
+
+  const [accessToken, setAccessToken] = useState<string | null>(null);
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [organization, setOrganization] = useState<AuthOrganization | null>(null);
+  const [organizations, setOrganizations] = useState<AuthOrganization[]>([]);
+  const [orgRole, setOrgRole] = useState<string>('member');
+  const [isSuperAdmin, setIsSuperAdmin] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+  const refreshTimerRef = useRef<ReturnType<typeof setTimeout>>();
+  const refreshLockRef = useRef(false);
+
+  // Discover config if needed
+  useEffect(() => {
+    if (resolved) return; // Already resolved synchronously
+    let mounted = true;
+    resolveConfig(config).then((r) => {
+      if (mounted) setResolved(r);
+    });
+    return () => { mounted = false; };
+  }, [config, resolved]);
+
+  const updateFromToken = useCallback((token: string) => {
+    const payload = decodeJWT(token);
+
+    setUser({
+      id: payload.sub,
+      email: payload.email,
+      name: payload.name || 'User',
+      role: payload.org?.role === 'owner' || payload.org?.role === 'admin' ? 'admin' : 'member',
+      imageUrl: payload.avatarUrl,
+    });
+
+    if (payload.org) {
+      setOrganization({
+        id: payload.org.id,
+        name: payload.org.name,
+        slug: payload.org.slug,
+        imageUrl: null,
+      });
+      setOrgRole(payload.org.role);
+    } else {
+      setOrganization(null);
+      setOrgRole('member');
+    }
+
+    setIsSuperAdmin(payload.isSuperAdmin);
+    setAccessToken(token);
+
+    return payload;
+  }, []);
+
+  const refreshToken = useCallback(async (): Promise<string | null> => {
+    if (!resolved) return null;
+    if (refreshLockRef.current) return null;
+    refreshLockRef.current = true;
+
+    try {
+      const res = await fetch(`${resolved.apiUrl}/auth/refresh`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+      });
+
+      if (!res.ok) {
+        setAccessToken(null);
+        setUser(null);
+        setOrganization(null);
+        return null;
+      }
+
+      const data = await res.json();
+      const payload = updateFromToken(data.access_token);
+
+      // Schedule next refresh 1 minute before expiry
+      const expiresIn = payload.exp * 1000 - Date.now();
+      const refreshIn = Math.max(expiresIn - 60_000, 10_000);
+      if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+      refreshTimerRef.current = setTimeout(() => {
+        refreshToken();
+      }, refreshIn);
+
+      return data.access_token;
+    } catch {
+      return null;
+    } finally {
+      refreshLockRef.current = false;
+    }
+  }, [resolved, updateFromToken]);
+
+  // Fetch user organizations list
+  const fetchOrganizations = useCallback(async (token: string) => {
+    if (!resolved) return;
+    try {
+      const res = await fetch(`${resolved.authUrl}/api/organizations`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setOrganizations(data.organizations || []);
+      }
+    } catch {
+      // Silent failure — orgs list is supplementary
+    }
+  }, [resolved]);
+
+  // Initial auth check — try to refresh on mount (after config resolves)
+  useEffect(() => {
+    if (!resolved) return;
+    let mounted = true;
+
+    async function init() {
+      const token = await refreshToken();
+      if (mounted) {
+        if (token) {
+          await fetchOrganizations(token);
+        }
+        setIsLoading(false);
+      }
+    }
+
+    init();
+
+    return () => {
+      mounted = false;
+      if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+    };
+  }, [resolved, refreshToken, fetchOrganizations]);
+
+  const login = useCallback((provider?: string) => {
+    if (!resolved) return;
+    const redirectUri = `${resolved.appUrl}/auth/callback`;
+    const state = btoa(JSON.stringify({ returnTo: window.location.pathname }));
+    const params = new URLSearchParams({
+      client_id: resolved.clientId,
+      redirect_uri: redirectUri,
+      state,
+    });
+    if (provider) params.set('provider', provider);
+    window.location.href = `${resolved.authUrl}/authorize?${params}`;
+  }, [resolved]);
+
+  const logout = useCallback(async () => {
+    if (!resolved) return;
+    setIsLoggingOut(true);
+    try {
+      await fetch(`${resolved.apiUrl}/auth/logout`, {
+        method: 'POST',
+        credentials: 'include',
+      });
+    } catch {
+      // Best-effort
+    }
+    if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+    setAccessToken(null);
+    setUser(null);
+    setOrganization(null);
+    setOrganizations([]);
+    setIsLoggingOut(false);
+  }, [resolved]);
+
+  const switchOrganization = useCallback(
+    async (orgId: string) => {
+      if (!resolved) return;
+      try {
+        const res = await fetch(`${resolved.apiUrl}/auth/switch-org`, {
+          method: 'POST',
+          credentials: 'include',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ org_id: orgId }),
+        });
+
+        if (res.ok) {
+          const data = await res.json();
+          updateFromToken(data.access_token);
+        }
+      } catch {
+        // Silent failure
+      }
+    },
+    [resolved, updateFromToken],
+  );
+
+  const isAdmin = orgRole === 'admin' || orgRole === 'owner';
+  const isOwner = orgRole === 'owner';
+
+  const getAccessToken = useCallback(async (): Promise<string | null> => {
+    if (accessToken) {
+      try {
+        const payload = decodeJWT(accessToken);
+        if (payload.exp * 1000 - Date.now() > 60_000) {
+          return accessToken;
+        }
+      } catch {
+        // Fall through to refresh
+      }
+    }
+    return refreshToken();
+  }, [accessToken, refreshToken]);
+
+  const value: AuthState = {
+    isAuthenticated: !!accessToken && (config.requireOrg === false || !!organization),
+    isLoading: isLoading || !resolved,
+    user,
+    organization,
+    tenant: organization ? { id: organization.id, name: organization.name, slug: organization.slug } : null,
+    isAdmin,
+    isOwner,
+    orgRole,
+    isSuperAdmin,
+    isPlatformAdmin: isSuperAdmin,
+    accessToken,
+    getAccessToken,
+    login,
+    logout,
+    switchOrganization,
+    organizations,
+    isLoggingOut,
+    isLoggingIn: false,
+    loginError: null,
+    impersonating: false,
+  };
+
+  // Use resolved config for context, or a placeholder during discovery
+  const configValue: ResolvedAuthConfig = resolved || {
+    clientId: config.clientId,
+    authUrl: config.authUrl || DEFAULT_AUTH_URL,
+    appUrl: config.appUrl || '',
+    apiUrl: config.apiUrl || config.appUrl || '',
+  };
+
+  return (
+    <AuthConfigContext.Provider value={configValue}>
+      <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
+    </AuthConfigContext.Provider>
+  );
+}

package/src/OrganizationSwitcher.tsx

@@ -0,0 +1,75 @@
+import { useState, useRef, useEffect } from 'react';
+import { useAuth } from './useAuth.js';
+
+interface OrganizationSwitcherProps {
+  className?: string;
+}
+
+export function OrganizationSwitcher({ className = '' }: OrganizationSwitcherProps) {
+  const { organization, organizations, switchOrganization } = useAuth();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  if (organizations.length <= 1) {
+    // Single org — just display name
+    return (
+      <div className={className}>
+        <span>{organization?.name || 'No organization'}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={dropdownRef} className={`relative ${className}`}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 px-3 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+      >
+        <span className="font-medium">{organization?.name || 'Select org'}</span>
+        <svg
+          className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-full left-0 mt-1 w-64 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-50">
+          <div className="py-1">
+            {organizations.map((org) => (
+              <button
+                key={org.id}
+                onClick={() => {
+                  switchOrganization(org.id);
+                  setIsOpen(false);
+                }}
+                className={`w-full text-left px-4 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${
+                  org.id === organization?.id
+                    ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
+                    : 'text-gray-700 dark:text-gray-300'
+                }`}
+              >
+                <div className="font-medium">{org.name}</div>
+                <div className="text-xs text-gray-400">{org.slug}</div>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/SignInForm.tsx

@@ -0,0 +1,202 @@
+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.',
+};
+
+const GITHUB_ICON = (
+  <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>
+);
+
+const GOOGLE_ICON = (
+  <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>
+);
+
+const APPLE_ICON = (
+  <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>
+);
+
+const BITBUCKET_ICON = (
+  <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>
+);
+
+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;
+  className?: string;
+}
+
+export function SignInForm({ providers: propProviders, autoFetch = true, 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('/');
+
+  // 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);
+  }
+
+  function tabClass(tab: Mode): string {
+    const isActive = activeTab === tab;
+    return [
+      'flex-1 py-2 text-sm font-medium rounded-lg text-center cursor-pointer transition-colors',
+      isActive ? 'bg-white text-zinc-900 shadow-sm' : 'text-zinc-500 hover:text-zinc-700',
+    ].join(' ');
+  }
+
+  const buttonText = (provider: string) => {
+    const providerNames: Record<string, string> = {
+      github: 'GitHub',
+      google: 'Google',
+      apple: 'Apple',
+      bitbucket: 'Bitbucket',
+    };
+    const name = providerNames[provider] || provider;
+    return activeTab === 'signin' ? `Sign in with ${name}` : `Sign up with ${name}`;
+  };
+
+  return (
+    <div className={className || ''}>
+      {/* Tab toggle */}
+      <div className="flex gap-1 p-1 bg-zinc-100 rounded-xl mb-6">
+        <button type="button" className={tabClass('signin')} onClick={() => switchTab('signin')}>
+          Sign In
+        </button>
+        <button type="button" className={tabClass('signup')} onClick={() => switchTab('signup')}>
+          Sign Up
+        </button>
+      </div>
+
+      {/* Error message */}
+      {errorMessage && (
+        <div className="mb-4 p-3 rounded-lg bg-red-50 border border-red-200 text-red-700 text-sm">
+          {errorMessage}
+        </div>
+      )}
+
+      {/* Loading state */}
+      {autoFetch && !propProviders && providersLoading ? (
+        <div className="flex items-center justify-center py-4">
+          <div className="h-5 w-5 animate-spin rounded-full border-2 border-zinc-300 border-t-zinc-600" />
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {/* GitHub */}
+          {enabledProviders.includes('github') && (
+            <button
+              type="button"
+              className="w-full flex items-center justify-center gap-3 px-6 py-3 bg-zinc-900 text-white font-medium rounded-xl hover:bg-zinc-800 transition-colors cursor-pointer"
+              onClick={() => handleOAuth('github')}
+            >
+              {GITHUB_ICON}
+              <span>{buttonText('github')}</span>
+            </button>
+          )}
+
+          {/* Google */}
+          {enabledProviders.includes('google') && (
+            <button
+              type="button"
+              className="w-full flex items-center justify-center gap-3 px-6 py-3 bg-white text-zinc-900 font-medium rounded-xl border border-zinc-300 hover:bg-zinc-50 transition-colors cursor-pointer"
+              onClick={() => handleOAuth('google')}
+            >
+              {GOOGLE_ICON}
+              <span>{buttonText('google')}</span>
+            </button>
+          )}
+
+          {/* Apple */}
+          {enabledProviders.includes('apple') && (
+            <button
+              type="button"
+              className="w-full flex items-center justify-center gap-3 px-6 py-3 bg-black text-white font-medium rounded-xl hover:bg-zinc-900 transition-colors cursor-pointer"
+              onClick={() => handleOAuth('apple')}
+            >
+              {APPLE_ICON}
+              <span>{buttonText('apple')}</span>
+            </button>
+          )}
+
+          {/* Bitbucket */}
+          {enabledProviders.includes('bitbucket') && (
+            <button
+              type="button"
+              className="w-full flex items-center justify-center gap-3 px-6 py-3 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-700 transition-colors cursor-pointer"
+              onClick={() => handleOAuth('bitbucket')}
+            >
+              {BITBUCKET_ICON}
+              <span>{buttonText('bitbucket')}</span>
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Terms */}
+      <p className="mt-6 text-center text-xs text-zinc-400">
+        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/style.css

@@ -0,0 +1 @@
+@tailwind utilities;