added other auths for fun

frontend/src/App.tsx

@@ -5,7 +5,7 @@ import { FileContextProvider } from './contexts/FileContext';
 import { FilesModalProvider } from './contexts/FilesModalContext';
 import { AuthProvider } from './lib/useSession';
 import HomePage from './pages/HomePage';
-import Login from './routes/Login';
+import LoginCompact from './routes/LoginCompact';
 import AuthCallback from './routes/AuthCallback';
 import AuthDebug from './routes/AuthDebug';
 
@@ -21,7 +21,7 @@ export default function App() {
           <FilesModalProvider>
             <Routes>
               <Route path="/" element={<HomePage />} />
-              <Route path="/login" element={<Login />} />
+              <Route path="/login" element={<LoginCompact />} />
               <Route path="/auth/callback" element={<AuthCallback />} />
               <Route path="/debug" element={<AuthDebug />} />
               {/* Catch-all route - redirects unknown paths to home */}

frontend/src/routes/AuthDebug.tsx

@@ -92,19 +92,29 @@ export default function AuthDebug() {
     alert(`Cleared ${keys.length} auth-related localStorage keys`)
   }
 
-  const testSignIn = async () => {
+  const testSignIn = async (provider: 'github' | 'google' | 'facebook' = 'github') => {
     try {
+      // Supabase redirects back to your app after OAuth
       const redirectTo = `${window.location.origin}/auth/callback`
+      
       const { error } = await supabase.auth.signInWithOAuth({
-        provider: 'github',
+        provider,
-        options: { redirectTo }
+        options: { 
+          redirectTo,
+          queryParams: provider === 'facebook' 
+            ? { scope: 'email' }
+            : {
+                access_type: 'offline',
+                prompt: 'consent',
+              }
+        }
       })
       
       if (error) {
-        alert(`Sign in test failed: ${error.message}`)
+        alert(`${provider} sign in test failed: ${error.message}`)
       }
     } catch (err) {
-      alert(`Sign in test error: ${err instanceof Error ? err.message : 'Unknown error'}`)
+      alert(`${provider} sign in test error: ${err instanceof Error ? err.message : 'Unknown error'}`)
     }
   }
 
@@ -248,6 +258,45 @@ export default function AuthDebug() {
             </div>
           )}
 
+          {/* Prominent JWT Token Display */}
+          {session && (
+            <div className="p-4 bg-yellow-50 border-2 border-yellow-300 rounded-lg mb-6">
+              <h3 className="text-lg font-semibold text-yellow-900 mb-3 flex items-center">
+                🔑 JWT Access Token
+              </h3>
+              <div className="space-y-3">
+                <div>
+                  <label className="block text-sm font-medium text-yellow-800 mb-1">
+                    Full Token (Click to select all):
+                  </label>
+                  <textarea
+                    value={session.access_token}
+                    readOnly
+                    onClick={(e) => e.currentTarget.select()}
+                    className="w-full h-32 px-3 py-2 border border-yellow-400 rounded-md bg-white font-mono text-xs resize-none focus:outline-none focus:ring-2 focus:ring-yellow-500"
+                  />
+                </div>
+                
+                <div className="flex flex-wrap gap-2 justify-between items-center">
+                  <button
+                    onClick={() => {
+                      navigator.clipboard.writeText(session.access_token || '')
+                      alert('JWT token copied to clipboard!')
+                    }}
+                    className="px-4 py-2 bg-yellow-600 text-white text-sm font-medium rounded hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500"
+                  >
+                    📋 Copy Full Token
+                  </button>
+                  
+                  <div className="text-yellow-800 text-xs">
+                    <div><strong>Expires:</strong> {session?.expires_at ? new Date(session.expires_at * 1000).toLocaleString() : 'Unknown'}</div>
+                    <div><strong>Length:</strong> {session.access_token?.length || 0} characters</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
           {session && (
             <details className="mb-4">
               <summary className="cursor-pointer text-sm font-medium text-gray-700 hover:text-gray-900">
@@ -281,10 +330,24 @@ export default function AuthDebug() {
             </button>
             
             <button
-              onClick={testSignIn}
+              onClick={() => testSignIn('github')}
               className="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700"
             >
-              Test Sign In
+              Test GitHub Sign In
+            </button>
+            
+            <button
+              onClick={() => testSignIn('google')}
+              className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+            >
+              Test Google Sign In
+            </button>
+            
+            <button
+              onClick={() => testSignIn('facebook')}
+              className="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700"
+            >
+              Test Facebook Sign In
             </button>
             
             {session && (
@@ -366,13 +429,32 @@ export default function AuthDebug() {
                 </div>
               )}
 
-              {/* Token Info */}
+              {/* JWT Token Display */}
-              <div className="p-3 bg-blue-50 border border-blue-200 rounded-md">
+              <div className="p-4 bg-green-50 border border-green-200 rounded-md">
-                <div className="text-sm font-medium text-blue-900 mb-1">JWT Token Info</div>
+                <div className="text-sm font-medium text-green-900 mb-2">🔑 JWT Access Token (Full)</div>
-                <div className="text-blue-700 text-sm space-y-1">
+                {session?.access_token ? (
-                  <div>Token: {session?.access_token ? `${session.access_token.substring(0, 30)}...` : 'No token'}</div>
+                  <div className="space-y-2">
-                  <div>Expires: {session?.expires_at ? new Date(session.expires_at * 1000).toLocaleString() : 'Unknown'}</div>
+                    <textarea
-                </div>
+                      value={session.access_token}
+                      readOnly
+                      className="w-full h-24 px-3 py-2 border border-green-300 rounded-md bg-white font-mono text-xs resize-none focus:outline-none focus:ring-2 focus:ring-green-500"
+                      placeholder="No token available"
+                    />
+                    <div className="flex justify-between items-center">
+                      <button
+                        onClick={() => navigator.clipboard.writeText(session.access_token || '')}
+                        className="px-3 py-1 bg-green-600 text-white text-xs rounded hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500"
+                      >
+                        📋 Copy Token
+                      </button>
+                      <span className="text-green-700 text-xs">
+                        Expires: {session?.expires_at ? new Date(session.expires_at * 1000).toLocaleString() : 'Unknown'}
+                      </span>
+                    </div>
+                  </div>
+                ) : (
+                  <p className="text-green-700 text-sm">No JWT token available. Please sign in first.</p>
+                )}
               </div>
 
               {/* Send Request Button */}

frontend/src/routes/Login.tsx

@@ -151,60 +151,87 @@ export default function Login() {
     )
   }
 
-  const signInWithGitHub = async (nextPath = '/') => {
+  const signInWithOAuth = async (provider: 'github' | 'google' | 'facebook', nextPath = '/') => {
     try {
       setIsSigningIn(true)
       setError(null)
       setDebugInfo(null)
 
+      // Supabase redirects back to your app after OAuth
       const redirectTo = `${window.location.origin}/auth/callback?next=${encodeURIComponent(nextPath)}`
       
-      console.log('[Login Debug] Initiating GitHub OAuth:', {
+      console.log(`[Login Debug] Initiating ${provider} OAuth:`, {
+        provider,
         redirectTo,
         nextPath,
         origin: window.location.origin
       })
 
-      const { data, error } = await supabase.auth.signInWithOAuth({
+      const oauthOptions: any = { 
-        provider: 'github',
+        redirectTo
-        options: { 
+      }
-          redirectTo,
+
-          queryParams: {
+      // Provider-specific options
-            access_type: 'offline',
+      if (provider === 'github') {
-            prompt: 'consent',
+        oauthOptions.queryParams = {
-          }
+          access_type: 'offline',
+          prompt: 'consent',
         }
+      } else if (provider === 'google') {
+        oauthOptions.queryParams = {
+          access_type: 'offline',
+          prompt: 'consent',
+        }
+      } else if (provider === 'facebook') {
+        oauthOptions.queryParams = {
+          scope: 'email',
+        }
+      }
+
+      const { data, error } = await supabase.auth.signInWithOAuth({
+        provider,
+        options: oauthOptions
       })
 
-      console.log('[Login Debug] OAuth response:', { data, error })
+      console.log(`[Login Debug] ${provider} OAuth response:`, { data, error })
 
       if (error) {
-        console.error('[Login Debug] OAuth initiation error:', error)
+        console.error(`[Login Debug] ${provider} OAuth initiation error:`, error)
-        setError(`Failed to initiate sign in: ${error.message}`)
+        setError(`Failed to initiate ${provider} sign in: ${error.message}`)
-        setDebugInfo({ error })
+        setDebugInfo({ provider, error })
       } else {
-        console.log('[Login Debug] OAuth initiated successfully, redirecting...')
+        console.log(`[Login Debug] ${provider} OAuth initiated successfully, redirecting...`)
         // OAuth redirect should happen automatically
         // If we reach here without redirect, there might be an issue
+        const expectedDomain = provider === 'github' 
+          ? 'github.com' 
+          : provider === 'google' 
+            ? 'accounts.google.com'
+            : 'facebook.com'
         setTimeout(() => {
-          if (!window.location.href.includes('github.com')) {
+          if (!window.location.href.includes(expectedDomain)) {
             setError('OAuth redirect did not occur as expected')
             setDebugInfo({ 
-              message: 'Expected redirect to GitHub but still on our domain',
+              provider,
+              message: `Expected redirect to ${expectedDomain} but still on our domain`,
               currentUrl: window.location.href 
             })
           }
         }, 2000)
       }
     } catch (err) {
-      console.error('[Login Debug] Unexpected error:', err)
+      console.error(`[Login Debug] ${provider} unexpected error:`, err)
       setError(`Unexpected error: ${err instanceof Error ? err.message : 'Unknown error'}`)
-      setDebugInfo({ error: err })
+      setDebugInfo({ provider, error: err })
     } finally {
       setIsSigningIn(false)
     }
   }
 
+  const signInWithGitHub = (nextPath = '/') => signInWithOAuth('github', nextPath)
+  const signInWithGoogle = (nextPath = '/') => signInWithOAuth('google', nextPath)
+  const signInWithFacebook = (nextPath = '/') => signInWithOAuth('facebook', nextPath)
+
   const testSupabaseConnection = async () => {
     try {
       console.log('[Login Debug] Testing Supabase connection...')
@@ -245,52 +272,131 @@ export default function Login() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+    <div 
-      <div className="max-w-md w-full bg-white rounded-lg shadow-md p-8">
+      className="min-h-screen flex items-center justify-center p-4"
-        <div className="text-center mb-8">
+      style={{ 
-          <h1 className="text-3xl font-bold text-gray-900 mb-2">
+        backgroundColor: '#f9fafb',
-            Welcome to Stirling PDF
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+      }}
+    >
+      <div 
+        className="w-full bg-white rounded-xl shadow-lg p-6"
+        style={{ 
+          maxWidth: '384px',
+          backgroundColor: '#ffffff',
+          borderRadius: '12px',
+          boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)'
+        }}
+      >
+        <div className="text-center mb-6">
+          <div className="text-4xl mb-3">🔐</div>
+          <h1 className="text-2xl font-bold text-gray-900 mb-2">
+            Sign In
           </h1>
-          <p className="text-gray-600">
+          <p className="text-gray-600 text-sm">
-            Sign in to access your account
+            Choose your preferred authentication method
           </p>
         </div>
 
         {error && (
-          <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-md">
+          <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
-            <p className="text-red-800 text-sm font-medium">Error</p>
+            <p className="text-red-800 text-xs font-medium">Error</p>
-            <p className="text-red-700 text-sm">{error}</p>
+            <p className="text-red-700 text-xs">{error}</p>
           </div>
         )}
 
-        <div className="space-y-4">
+        <div className="space-y-3">
+          {/* GitHub Login */}
           <button
             onClick={() => signInWithGitHub()}
             disabled={isSigningIn}
-            className="w-full flex items-center justify-center px-4 py-3 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            className="w-full flex items-center justify-center px-4 py-2.5 border border-gray-300 rounded-lg bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-400 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
+            style={{
+              width: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '10px 16px',
+              border: '1px solid #d1d5db',
+              borderRadius: '8px',
+              backgroundColor: '#ffffff',
+              fontSize: '14px',
+              fontWeight: '500',
+              color: '#374151',
+              cursor: isSigningIn ? 'not-allowed' : 'pointer',
+              opacity: isSigningIn ? 0.5 : 1,
+              transition: 'all 200ms ease-in-out'
+            }}
+            onMouseEnter={(e) => {
+              if (!isSigningIn) {
+                e.currentTarget.style.backgroundColor = '#f9fafb';
+                e.currentTarget.style.borderColor = '#9ca3af';
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (!isSigningIn) {
+                e.currentTarget.style.backgroundColor = '#ffffff';
+                e.currentTarget.style.borderColor = '#d1d5db';
+              }
+            }}
           >
-            <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor">
+            <svg className="w-4 h-4 mr-3" viewBox="0 0 24 24" fill="currentColor">
               <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
             </svg>
-            {isSigningIn ? 'Signing in...' : 'Continue with GitHub'}
+            GitHub
+          </button>
+
+          {/* Google Login */}
+          <button
+            onClick={() => signInWithGoogle()}
+            disabled={isSigningIn}
+            className="w-full flex items-center justify-center px-4 py-2.5 border border-gray-300 rounded-lg bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-sm hover:shadow"
+          >
+            <svg className="w-4 h-4 mr-3" viewBox="0 0 24 24">
+              <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>
+            Google
+          </button>
+
+          {/* Facebook Login */}
+          <button
+            onClick={() => signInWithFacebook()}
+            disabled={isSigningIn}
+            className="w-full flex items-center justify-center px-4 py-2.5 border border-gray-300 rounded-lg bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-sm hover:shadow"
+          >
+            <svg className="w-4 h-4 mr-3" viewBox="0 0 24 24" fill="#1877F2">
+              <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+            </svg>
+            Facebook
           </button>
 
           {import.meta.env.DEV && (
-            <div className="border-t pt-4 space-y-3">
+            <div className="pt-4 border-t border-gray-200 mt-6">
-              <h3 className="text-sm font-medium text-gray-700">Development Tools</h3>
+              <details className="group">
-              
+                <summary className="cursor-pointer text-xs text-gray-500 hover:text-gray-700 list-none">
-              <button
+                  <span className="flex items-center justify-center">
-                onClick={testSupabaseConnection}
+                    <span>Development Tools</span>
-                className="w-full px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    <svg className="w-4 h-4 ml-1 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              >
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                Test Supabase Connection
+                    </svg>
-              </button>
+                  </span>
-
+                </summary>
-              <div className="text-xs text-gray-500 space-y-1">
+                <div className="mt-3 space-y-2">
-                <p><strong>Environment:</strong> {import.meta.env.MODE}</p>
+                  <button
-                <p><strong>Supabase URL:</strong> {import.meta.env.VITE_SUPABASE_URL ? '✓ Configured' : '✗ Missing'}</p>
+                    onClick={testSupabaseConnection}
-                <p><strong>Supabase Key:</strong> {import.meta.env.VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY ? '✓ Configured' : '✗ Missing'}</p>
+                    className="w-full px-3 py-2 text-xs border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-1 focus:ring-blue-500"
-              </div>
+                  >
+                    Test Connection
+                  </button>
+                  <div className="text-xs text-gray-400 space-y-1 px-2">
+                    <p><strong>Mode:</strong> {import.meta.env.MODE}</p>
+                    <p><strong>Supabase:</strong> {import.meta.env.VITE_SUPABASE_URL ? '✓' : '✗'}</p>
+                  </div>
+                </div>
+              </details>
             </div>
           )}
         </div>
@@ -306,9 +412,9 @@ export default function Login() {
           </details>
         )}
 
-        <div className="mt-8 text-center">
+        <div className="mt-6 text-center">
-          <p className="text-xs text-gray-500">
+          <p className="text-xs text-gray-400">
-            This is a demo login page for testing authentication
+            Secure authentication via Supabase
           </p>
         </div>
       </div>

frontend/src/routes/LoginCompact.tsx

@@ -0,0 +1,311 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { supabase } from '../lib/supabase'
+import { useAuth } from '../lib/useSession'
+
+export default function LoginCompact() {
+  const navigate = useNavigate()
+  const { session, user, loading, signOut } = useAuth()
+  const [isSigningIn, setIsSigningIn] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  // Show logged in state if authenticated
+  if (session && !loading) {
+    return (
+      <div style={{ 
+        minHeight: '100vh', 
+        display: 'flex', 
+        alignItems: 'center', 
+        justifyContent: 'center',
+        backgroundColor: '#f3f4f6',
+        padding: '16px'
+      }}>
+        <div style={{
+          maxWidth: '400px',
+          width: '100%',
+          backgroundColor: '#ffffff',
+          borderRadius: '16px',
+          boxShadow: '0 10px 25px rgba(0, 0, 0, 0.1)',
+          padding: '32px'
+        }}>
+          <div style={{ textAlign: 'center', marginBottom: '24px' }}>
+            <div style={{ fontSize: '48px', marginBottom: '16px' }}>✅</div>
+            <h1 style={{ fontSize: '24px', fontWeight: 'bold', color: '#059669', marginBottom: '8px' }}>
+              YOU ARE LOGGED IN
+            </h1>
+            <p style={{ color: '#6b7280', fontSize: '14px' }}>
+              Email: {user?.email}
+            </p>
+          </div>
+          
+          <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
+            <button
+              onClick={() => navigate('/')}
+              style={{
+                flex: '1',
+                padding: '8px 16px',
+                backgroundColor: '#3b82f6',
+                color: '#ffffff',
+                border: 'none',
+                borderRadius: '8px',
+                fontSize: '14px',
+                cursor: 'pointer'
+              }}
+            >
+              Home
+            </button>
+            <button
+              onClick={() => navigate('/debug')}
+              style={{
+                flex: '1',
+                padding: '8px 16px',
+                backgroundColor: '#8b5cf6',
+                color: '#ffffff',
+                border: 'none',
+                borderRadius: '8px',
+                fontSize: '14px',
+                cursor: 'pointer'
+              }}
+            >
+              Debug
+            </button>
+            <button
+              onClick={async () => {
+                await signOut()
+                window.location.reload()
+              }}
+              style={{
+                flex: '1',
+                padding: '8px 16px',
+                backgroundColor: '#ef4444',
+                color: '#ffffff',
+                border: 'none',
+                borderRadius: '8px',
+                fontSize: '14px',
+                cursor: 'pointer'
+              }}
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const signInWithProvider = async (provider: 'github' | 'google' | 'facebook') => {
+    try {
+      setIsSigningIn(true)
+      setError(null)
+
+      const redirectTo = `${window.location.origin}/auth/callback`
+      console.log(`[LoginCompact] Signing in with ${provider}`)
+
+      const oauthOptions: any = { redirectTo }
+      if (provider === 'facebook') {
+        oauthOptions.queryParams = { scope: 'email' }
+      } else {
+        oauthOptions.queryParams = {
+          access_type: 'offline',
+          prompt: 'consent',
+        }
+      }
+
+      const { error } = await supabase.auth.signInWithOAuth({
+        provider,
+        options: oauthOptions
+      })
+
+      if (error) {
+        console.error(`[LoginCompact] ${provider} error:`, error)
+        setError(`Failed to sign in with ${provider}: ${error.message}`)
+      }
+    } catch (err) {
+      console.error(`[LoginCompact] Unexpected error:`, err)
+      setError(`Unexpected error: ${err instanceof Error ? err.message : 'Unknown error'}`)
+    } finally {
+      setIsSigningIn(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div style={{ 
+        minHeight: '100vh', 
+        display: 'flex', 
+        alignItems: 'center', 
+        justifyContent: 'center',
+        backgroundColor: '#f3f4f6'
+      }}>
+        <div style={{ textAlign: 'center' }}>
+          <div style={{ fontSize: '32px', marginBottom: '16px' }}>⏳</div>
+          <p style={{ color: '#6b7280' }}>Loading...</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ 
+      minHeight: '100vh', 
+      display: 'flex', 
+      alignItems: 'center', 
+      justifyContent: 'center',
+      backgroundColor: '#f3f4f6',
+      padding: '16px',
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+    }}>
+      <div style={{
+        maxWidth: '320px',
+        width: '100%',
+        backgroundColor: '#ffffff',
+        borderRadius: '16px',
+        boxShadow: '0 10px 25px rgba(0, 0, 0, 0.1)',
+        padding: '24px'
+      }}>
+        {/* Header */}
+        <div style={{ textAlign: 'center', marginBottom: '24px' }}>
+          <div style={{ fontSize: '40px', marginBottom: '12px' }}>🔐</div>
+          <h1 style={{ 
+            fontSize: '20px', 
+            fontWeight: '600', 
+            color: '#1f2937', 
+            marginBottom: '8px',
+            margin: '0'
+          }}>
+            Sign In
+          </h1>
+          <p style={{ 
+            color: '#6b7280', 
+            fontSize: '13px',
+            margin: '0'
+          }}>
+            Choose your authentication method
+          </p>
+        </div>
+
+        {/* Error */}
+        {error && (
+          <div style={{
+            padding: '12px',
+            backgroundColor: '#fef2f2',
+            border: '1px solid #fecaca',
+            borderRadius: '8px',
+            marginBottom: '16px'
+          }}>
+            <p style={{ 
+              color: '#dc2626', 
+              fontSize: '12px',
+              margin: '0'
+            }}>
+              {error}
+            </p>
+          </div>
+        )}
+
+        {/* Buttons */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          {/* GitHub */}
+          <button
+            onClick={() => signInWithProvider('github')}
+            disabled={isSigningIn}
+            style={{
+              width: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '10px 16px',
+              border: '1px solid #d1d5db',
+              borderRadius: '8px',
+              backgroundColor: '#ffffff',
+              fontSize: '14px',
+              fontWeight: '500',
+              color: '#374151',
+              cursor: isSigningIn ? 'not-allowed' : 'pointer',
+              opacity: isSigningIn ? 0.6 : 1,
+              gap: '8px'
+            }}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+            </svg>
+            GitHub
+          </button>
+
+          {/* Google */}
+          <button
+            onClick={() => signInWithProvider('google')}
+            disabled={isSigningIn}
+            style={{
+              width: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '10px 16px',
+              border: '1px solid #d1d5db',
+              borderRadius: '8px',
+              backgroundColor: '#ffffff',
+              fontSize: '14px',
+              fontWeight: '500',
+              color: '#374151',
+              cursor: isSigningIn ? 'not-allowed' : 'pointer',
+              opacity: isSigningIn ? 0.6 : 1,
+              gap: '8px'
+            }}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24">
+              <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>
+            Google
+          </button>
+
+          {/* Facebook */}
+          <button
+            onClick={() => signInWithProvider('facebook')}
+            disabled={isSigningIn}
+            style={{
+              width: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '10px 16px',
+              border: '1px solid #d1d5db',
+              borderRadius: '8px',
+              backgroundColor: '#ffffff',
+              fontSize: '14px',
+              fontWeight: '500',
+              color: '#374151',
+              cursor: isSigningIn ? 'not-allowed' : 'pointer',
+              opacity: isSigningIn ? 0.6 : 1,
+              gap: '8px'
+            }}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="#1877F2">
+              <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+            </svg>
+            Facebook
+          </button>
+        </div>
+
+        {/* Footer */}
+        <div style={{ 
+          textAlign: 'center', 
+          marginTop: '20px',
+          paddingTop: '16px',
+          borderTop: '1px solid #e5e7eb'
+        }}>
+          <p style={{ 
+            color: '#9ca3af', 
+            fontSize: '11px',
+            margin: '0'
+          }}>
+            Powered by Supabase Auth
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}