From 991fe2b416f75d7c6a2eecc69afb322f11ea010e Mon Sep 17 00:00:00 2001
From: Kevin Jones <digitalblueprint239@gmail.com>
Date: Sat, 2 May 2026 23:44:56 -0400
Subject: [PATCH] feat(auth): implement Google SSO frontend UI and Supabase
 wiring

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/pages/AdminLogin.tsx | 49 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/pages/AdminLogin.tsx b/src/pages/AdminLogin.tsx
index 92eeee2..ab678c4 100644
--- a/src/pages/AdminLogin.tsx
+++ b/src/pages/AdminLogin.tsx
@@ -8,9 +8,30 @@ export default function AdminLogin() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [loading, setLoading] = useState(false);
+  const [googleLoading, setGoogleLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const navigate = useNavigate();
 
+  const handleGoogleSignIn = async (): Promise<void> => {
+    setError(null);
+    setGoogleLoading(true);
+    try {
+      const { error: oauthError } = await supabase.auth.signInWithOAuth({
+        provider: 'google',
+        options: { redirectTo: window.location.origin },
+      });
+      if (oauthError) {
+        setError(classifyAuthError(oauthError));
+        setGoogleLoading(false);
+      }
+      // On success, the browser is redirected to Google; no further state work needed.
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Google sign-in failed. Please try again.';
+      setError(message);
+      setGoogleLoading(false);
+    }
+  };
+
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
@@ -85,6 +106,30 @@ export default function AdminLogin() {
             </div>
           )}
 
+          <button
+            type="button"
+            onClick={handleGoogleSignIn}
+            disabled={googleLoading || loading}
+            className="w-full py-4 bg-white text-zinc-900 border-2 border-zinc-200 rounded-2xl font-bold flex items-center justify-center gap-3 hover:bg-zinc-50 hover:border-zinc-300 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
+            aria-label="Sign in with Google"
+          >
+            <svg className="w-5 h-5" viewBox="0 0 24 24" aria-hidden="true">
+              <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>
+            {googleLoading ? 'Redirecting to Google...' : 'Sign in with Google'}
+          </button>
+
+          <div className="relative flex items-center" role="separator" aria-label="or continue with email">
+            <div className="flex-grow border-t border-zinc-200" />
+            <span className="flex-shrink mx-4 text-xs font-bold uppercase tracking-wider text-zinc-400">
+              or continue with
+            </span>
+            <div className="flex-grow border-t border-zinc-200" />
+          </div>
+
           <div className="space-y-1">
             <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Admin Email</label>
             <input 
@@ -119,9 +164,9 @@ export default function AdminLogin() {
             </div>
           </div>
 
-          <button 
+          <button
             type="submit"
-            disabled={loading}
+            disabled={loading || googleLoading}
             className="w-full py-4 bg-zinc-900 text-white rounded-2xl font-bold flex items-center justify-center gap-2 hover:bg-zinc-800 transition-all disabled:opacity-50"
           >
             {loading ? 'Authenticating...' : 'Enter Dashboard'}