feat(auth): sign in with Google behind NEXT_PUBLIC_GOOGLE_AUTH_ENABLED (#1441)

Adds a 'Continue with Google' button to login and register, gated by NEXT_PUBLIC_GOOGLE_AUTH_ENABLED so it ships dark until the Google provider is configured in Supabase. The OAuth round-trip reuses the existing /auth/callback PKCE exchange, which already owns MFA routing, invite acceptance and silent-team creation. A flow=oauth marker on the redirect lets the callback tag failures (including provider consent denials) so the login page shows Google-specific error copy instead of the email-confirmation framing. Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
2026-08-06 21:26:09 +02:00
parent 0bb0b89353
commit 28b58aedc4
9 changed files with 186 additions and 11 deletions
@@ -0,0 +1,85 @@
+'use client'
+
+import { useState } from 'react'
+import { useLocale, useTranslations } from 'next-intl'
+import { createClient } from '@/lib/supabase/client'
+import { Button } from '@/components/ui/button'
+import { Loader2 } from 'lucide-react'
+import { getErrorMessage, type ErrorLocale } from '@/lib/errors/get-error-message'
+
+/** Official Google "G" mark, drawn inline (no external assets on auth pages). */
+function GoogleMark() {
+  return (
+    <svg viewBox="0 0 48 48" aria-hidden className="h-4 w-4">
+      <path
+        fill="#EA4335"
+        d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
+      />
+      <path
+        fill="#4285F4"
+        d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
+      />
+      <path
+        fill="#FBBC05"
+        d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
+      />
+      <path
+        fill="#34A853"
+        d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
+      />
+    </svg>
+  )
+}
+
+/**
+ * "Continue with Google" for the login and register pages.
+ *
+ * Kicks off the Supabase OAuth redirect; the round-trip lands in
+ * /auth/callback (PKCE code exchange), which owns MFA routing, invite
+ * acceptance and silent-team creation for OAuth sign-ins and sign-ups alike.
+ * The flow=oauth marker lets the callback tag failures so the login page
+ * shows Google-specific copy instead of the email-confirmation framing.
+ */
+export function GoogleAuthButton({ onError }: { onError: (message: string) => void }) {
+  const [isRedirecting, setIsRedirecting] = useState(false)
+  const supabase = createClient()
+  const tAuth = useTranslations('auth')
+  const errorLocale = useLocale() as ErrorLocale
+
+  const handleClick = async () => {
+    setIsRedirecting(true)
+    try {
+      const { error } = await supabase.auth.signInWithOAuth({
+        provider: 'google',
+        options: {
+          redirectTo: `${window.location.origin}/auth/callback?flow=oauth`,
+        },
+      })
+      if (error) {
+        onError(getErrorMessage(error, { context: 'auth', locale: errorLocale }))
+        setIsRedirecting(false)
+      }
+      // On success the browser navigates away; keep the spinner until then.
+    } catch (error) {
+      onError(getErrorMessage(error, { context: 'auth', locale: errorLocale }))
+      setIsRedirecting(false)
+    }
+  }
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      className="w-full h-11"
+      onClick={handleClick}
+      disabled={isRedirecting}
+    >
+      {isRedirecting ? (
+        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+      ) : (
+        <span className="mr-2 flex items-center"><GoogleMark /></span>
+      )}
+      {tAuth('continue_with_google')}
+    </Button>
+  )
+}