feat(auth): Supabase Auth email/password + middleware + login [auth]

Protege /admin/* con Supabase Auth. Tabla user_roles con custom claims (app_role, org_id) en JWT. Middleware Next.js redirige a /login sin sesión. Página /login con email/password. /admin/responses migrado de service_role a sesión de usuario autenticado. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-27 09:39:52 -03:00
parent ddaba6866a
commit a484ba7849
9 changed files with 485 additions and 35 deletions
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -0,0 +1,81 @@
+'use client'
+
+import { useState } from 'react'
+import { createBrowserClient } from '@supabase/ssr'
+import { useRouter } from 'next/navigation'
+
+export default function LoginPage() {
+  const [isPending, setIsPending] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const router = useRouter()
+
+  const supabase = createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  )
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    setIsPending(true)
+    setError(null)
+
+    const fd = new FormData(e.currentTarget)
+    const { error: authError } = await supabase.auth.signInWithPassword({
+      email: fd.get('email') as string,
+      password: fd.get('password') as string,
+    })
+
+    if (authError) {
+      setError('Email o contraseña incorrectos')
+      setIsPending(false)
+      return
+    }
+
+    router.push('/admin/responses')
+    router.refresh()
+  }
+
+  return (
+    <div className="login-page">
+      <div className="login-card">
+        <h1 className="login-title">Acceso interno</h1>
+        <form onSubmit={handleSubmit} className="login-form" noValidate>
+          <div className="login-field">
+            <label htmlFor="email" className="login-label">Email</label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              autoComplete="email"
+              required
+              disabled={isPending}
+              className="text-short-input"
+            />
+          </div>
+          <div className="login-field">
+            <label htmlFor="password" className="login-label">Contraseña</label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              autoComplete="current-password"
+              required
+              disabled={isPending}
+              className="text-short-input"
+            />
+          </div>
+          {error && (
+            <p role="alert" className="field-error login-error">{error}</p>
+          )}
+          <button
+            type="submit"
+            disabled={isPending}
+            className="login-submit"
+          >
+            {isPending ? 'Ingresando…' : 'Ingresar'}
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}