[AU-01] Supabase auth integration (login/signup)

{
  "cost": {
    "input_tokens": 23,
    "estimated_usd": 0.098904,
    "output_tokens": 6589
  },
  "model": "claude-sonnet-4-20250514",
  "status": "success",
  "transport": "anthropic_api",
  "latency_ms": 61195,
  "response_text": "I'll help you implement Supabase authentication with login and signup functionality. Here's a complete implementation:\n\n## 1. Install Dependencies\n\n```bash\nnpm install @supabase/supabase-js @supabase/auth-ui-react @supabase/auth-ui-shared\n```\n\n## 2. Environment Configuration\n\nCreate `.env.local`:\n\n```env\nNEXT_PUBLIC_SUPABASE_URL=your_supabase_url\nNEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key\n```\n\n## 3. Supabase Client Setup\n\n```typescript\n// lib/supabase.ts\nimport { createClient } from '@supabase/supabase-js'\n\nconst supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!\nconst supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!\n\nexport const supabase = createClient(supabaseUrl, supabaseAnonKey)\n\n// Types\nexport type AuthUser = {\n  id: string\n  email?: string\n  user_metadata?: {\n    full_name?: string\n    avatar_url?: string\n  }\n}\n```\n\n## 4. Authentication Context\n\n```typescript\n// contexts/AuthContext.tsx\n'use client'\n\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { User, AuthError, Session } from '@supabase/supabase-js'\nimport { supabase } from '@/lib/supabase'\n\ninterface AuthContextType {\n  user: User | null\n  session: Session | null\n  loading: boolean\n  signUp: (email: string, password: string, metadata?: any) => Promise<{ error: AuthError | null }>\n  signIn: (email: string, password: string) => Promise<{ error: AuthError | null }>\n  signOut: () => Promise<{ error: AuthError | null }>\n  resetPassword: (email: string) => Promise<{ error: AuthError | null }>\n}\n\nconst AuthContext = createContext<AuthContextType | undefined>(undefined)\n\nexport function AuthProvider({ children }: { children: React.ReactNode }) {\n  const [user, setUser] = useState<User | null>(null)\n  const [session, setSession] = useState<Session | null>(null)\n  const [loading, setLoading] = useState(true)\n\n  useEffect(() => {\n    // Get initial session\n    const getInitialSession = async () => {\n      const { data: { session }, error } = await supabase.auth.getSession()\n      \n      if (error) {\n        console.error('Error getting session:', error)\n      } else {\n        setSession(session)\n        setUser(session?.user ?? null)\n      }\n      \n      setLoading(false)\n    }\n\n    getInitialSession()\n\n    // Listen for auth changes\n    const {\n      data: { subscription },\n    } = supabase.auth.onAuthStateChange(async (event, session) => {\n      setSession(session)\n      setUser(session?.user ?? null)\n      setLoading(false)\n    })\n\n    return () => subscription.unsubscribe()\n  }, [])\n\n  const signUp = async (email: string, password: string, metadata?: any) => {\n    const { error } = await supabase.auth.signUp({\n      email,\n      password,\n      options: {\n        data: metadata,\n      },\n    })\n    return { error }\n  }\n\n  const signIn = async (email: string, password: string) => {\n    const { error } = await supabase.auth.signInWithPassword({\n      email,\n      password,\n    })\n    return { error }\n  }\n\n  const signOut = async () => {\n    const { error } = await supabase.auth.signOut()\n    return { error }\n  }\n\n  const resetPassword = async (email: string) => {\n    const { error } = await supabase.auth.resetPasswordForEmail(email, {\n      redirectTo: `${window.location.origin}/reset-password`,\n    })\n    return { error }\n  }\n\n  const value = {\n    user,\n    session,\n    loading,\n    signUp,\n    signIn,\n    signOut,\n    resetPassword,\n  }\n\n  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>\n}\n\nexport function useAuth() {\n  const context = useContext(AuthContext)\n  if (context === undefined) {\n    throw new Error('useAuth must be used within an AuthProvider')\n  }\n  return context\n}\n```\n\n## 5. Login Component\n\n```typescript\n// components/auth/LoginForm.tsx\n'use client'\n\nimport { useState } from 'react'\nimport { useAuth } from '@/contexts/AuthContext'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Alert, AlertDescription } from '@/components/ui/alert'\nimport { Loader2, Eye, EyeOff } from 'lucide-react'\nimport Link from 'next/link'\n\nexport function LoginForm() {\n  const { signIn } = useAuth()\n  const [formData, setFormData] = useState({\n    email: '',\n    password: '',\n  })\n  const [loading, setLoading] = useState(false)\n  const [error, setError] = useState<string | null>(null)\n  const [showPassword, setShowPassword] = useState(false)\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault()\n    setLoading(true)\n    setError(null)\n\n    const { error } = await signIn(formData.email, formData.password)\n\n    if (error) {\n      setError(error.message)\n    }\n\n    setLoading(false)\n  }\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setFormData({\n      ...formData,\n      [e.target.name]: e.target.value,\n    })\n  }\n\n  return (\n    <Card className=\"w-full max-w-md\">\n      <CardHeader className=\"space-y-1\">\n        <CardTitle className=\"text-2xl font-bold\">Sign in</CardTitle>\n        <CardDescription>\n          Enter your email and password to sign in to your account\n        </CardDescription>\n      </CardHeader>\n      <form onSubmit={handleSubmit}>\n        <CardContent className=\"space-y-4\">\n          {error && (\n            <Alert variant=\"destructive\">\n              <AlertDescription>{error}</AlertDescription>\n            </Alert>\n          )}\n          \n          <div className=\"space-y-2\">\n            <Label htmlFor=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              name=\"email\"\n              type=\"email\"\n              placeholder=\"Enter your email\"\n              value={formData.email}\n              onChange={handleInputChange}\n              required\n            />\n          </div>\n          \n          <div className=\"space-y-2\">\n            <Label htmlFor=\"password\">Password</Label>\n            <div className=\"relative\">\n              <Input\n                id=\"password\"\n                name=\"password\"\n                type={showPassword ? 'text' : 'password'}\n                placeholder=\"Enter your password\"\n                value={formData.password}\n                onChange={handleInputChange}\n                required\n              />\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent\"\n                onClick={() => setShowPassword(!showPassword)}\n              >\n                {showPassword ? (\n                  <EyeOff className=\"h-4 w-4\" />\n                ) : (\n                  <Eye className=\"h-4 w-4\" />\n                )}\n              </Button>\n            </div>\n          </div>\n        </CardContent>\n        \n        <CardFooter className=\"flex flex-col space-y-4\">\n          <Button type=\"submit\" className=\"w-full\" disabled={loading}>\n            {loading && <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />}\n            Sign in\n          </Button>\n          \n          <div className=\"text-sm text-center space-y-2\">\n            <Link\n              href=\"/forgot-password\"\n              className=\"text-blue-600 hover:underline\"\n            >\n              Forgot your password?\n            </Link>\n            <div>\n              Don't have an account?{' '}\n              <Link\n                href=\"/signup\"\n                className=\"text-blue-600 hover:underline\"\n              >\n                Sign up\n              </Link>\n            </div>\n          </div>\n        </CardFooter>\n      </form>\n    </Card>\n  )\n}\n```\n\n## 6. Signup Component\n\n```typescript\n// components/auth/SignupForm.tsx\n'use client'\n\nimport { useState } from 'react'\nimport { useAuth } from '@/contexts/AuthContext'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Alert, AlertDescription } from '@/components/ui/alert'\nimport { Loader2, Eye, EyeOff, Check, X } from 'lucide-react'\nimport Link from 'next/link'\n\nexport function SignupForm() {\n  const { signUp } = useAuth()\n  const [formData, setFormData] = useState({\n    email: '',\n    password: '',\n    confirmPassword: '',\n    fullName: '',\n  })\n  const [loading, setLoading] = useState(false)\n  const [error, setError] = useState<string | null>(null)\n  const [success, setSuccess] = useState<string | null>(null)\n  const [showPassword, setShowPassword] = useState(false)\n  const [showConfirmPassword, setShowConfirmPassword] = useState(false)\n\n  // Password validation\n  const passwordRequirements = [\n    { text: 'At least 8 characters', met: formData.password.length >= 8 },\n    { text: 'Contains uppercase letter', met: /[A-Z]/.test(formData.password) },\n    { text: 'Contains lowercase letter', met: /[a-z]/.test(formData.password) },\n    { text: 'Contains number', met: /\\d/.test(formData.password) },\n  ]\n\n  const passwordsMatch = formData.password === formData.confirmPassword\n  const isPasswordValid = passwordRequirements.every(req => req.met)\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault()\n    setLoading(true)\n    setError(null)\n    setSuccess(null)\n\n    if (!isPasswordValid) {\n      setError('Password does not meet requirements')\n      setLoading(false)\n      return\n    }\n\n    if (!passwordsMatch) {\n      setError('Passwords do not match')\n      setLoading(false)\n      return\n    }\n\n    const { error } = await signUp(formData.email, formData.password, {\n      full_name: formData.fullName,\n    })\n\n    if (error) {\n      setError(error.message)\n    } else {\n      setSuccess('Check your email for the confirmation link!')\n    }\n\n    setLoading(false)\n  }\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setFormData({\n      ...formData,\n      [e.target.name]: e.target.value,\n    })\n  }\n\n  return (\n    <Card className=\"w-full max-w-md\">\n      <CardHeader className=\"space-y-1\">\n        <CardTitle className=\"text-2xl font-bold\">Create account</CardTitle>\n        <CardDescription>\n          Enter your information to create a new account\n        </CardDescription>\n      </CardHeader>\n      <form onSubmit={handleSubmit}>\n        <CardContent className=\"space-y-4\">\n          {error && (\n            <Alert variant=\"destructive\">\n              <AlertDescription>{error}</AlertDescription>\n            </Alert>\n          )}\n          \n          {success && (\n            <Alert>\n              <AlertDescription>{success}</AlertDescription>\n            </Alert>\n          )}\n          \n          <div className=\"space-y-2\">\n            <Label htmlFor=\"fullName\">Full Name</Label>\n            <Input\n              id=\"fullName\"\n              name=\"fullName\"\n              type=\"text\"\n              placeholder=\"Enter your full name\"\n              value={formData.fullName}\n              onChange={handleInputChange}\n              required\n            />\n          </div>\n          \n          <div className=\"space-y-2\">\n            <Label htmlFor=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              name=\"email\"\n              type=\"email\"\n              placeholder=\"Enter your email\"\n              value={formData.email}\n              onChange={handleInputChange}\n              required\n            />\n          </div>\n          \n          <div className=\"space-y-2\">\n            <Label htmlFor=\"password\">Password</Label>\n            <div className=\"relative\">\n              <Input\n                id=\"password\"\n                name=\"password\"\n                type={showPassword ? 'text' : 'password'}\n                placeholder=\"Create a password\"\n                value={formData.password}\n                onChange={handleInputChange}\n                required\n              />\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent\"\n                onClick={() => setShowPassword(!showPassword)}\n              >\n                {showPassword ? (\n                  <EyeOff className=\"h-4 w-4\" />\n                ) : (\n                  <Eye className=\"h-4 w-4\" />\n                )}\n              </Button>\n            </div>\n            \n            {/* Password requirements */}\n            {formData.password && (\n              <div className=\"space-y-1\">\n                {passwordRequirements.map((req, index) => (\n                  <div key={index} className=\"flex items-center text-xs\">\n                    {req.met ? (\n                      <Check className=\"h-3 w-3 text-green-500 mr-2\" />\n                    ) : (\n                      <X className=\"h-3 w-3 text-red-500 mr-2\" />\n                    )}\n                    <span className={req.met ? 'text-green-500' : 'text-red-500'}>\n                      {req.text}\n                    </span>\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n          \n          <div className=\"space-y-2\">\n            <Label htmlFor=\"confirmPassword\">Confirm Password</Label>\n            <div className=\"relative\">\n              <Input\n                id=\"confirmPassword\"\n                name=\"confirmPassword\"\n                type={showConfirmPassword ? 'text' : 'password'}\n                placeholder=\"Confirm your password\"\n                value={formData.confirmPassword}\n                onChange={handleInputChange}\n                required\n              />\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent\"\n                onClick={() => setShowConfirmPassword(!showConfirmPassword)}\n              >\n                {showConfirmPassword ? (\n                  <EyeOff className=\"h-4 w-4\" />\n                ) : (\n                  <Eye className=\"h-4 w-4\" />\n                )}\n              </Button>\n            </div>\n            \n            {formData.confirmPassword && (\n              <div className=\"flex items-center text-xs\">\n                {passwordsMatch ? (\n                  <>\n                    <Check className=\"h-3 w-3 text-green-500 mr-2\" />\n                    <span className=\"text-green-500\">Passwords match</span>\n                  </>\n                ) : (\n                  <>\n                    <X className=\"h-3 w-3 text-red-500 mr-2\" />\n                    <span className=\"text-red-500\">Passwords do not match</span>\n                  </>\n                )}\n              </div>\n            )}\n          </div>\n        </CardContent>\n        \n        <CardFooter className=\"flex flex-col space-y-4\">\n          <Button \n            type=\"submit\" \n            className=\"w-full\" \n            disabled={loading || !isPasswordValid || !passwordsMatch}\n          >\n            {loading && <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />}\n            Create account\n          </Button>\n          \n          <div className=\"text-sm text-center\">\n            Already have an account?{' '}\n            <Link\n              href=\"/login\"\n              className=\"text-blue-600 hover:underline\"\n            >\n              Sign in\n            </Link>\n          </div>\n        </CardFooter>\n      </form>\n    </Card>\n  )\n}\n```\n\n## 7. Auth Guard Component\n\n```typescript\n// components/auth/AuthGuard.tsx\n'use client'\n\nimport { useAuth } from '@/contexts/AuthContext'\nimport { useRouter } from 'next/navigation'\nimport { useEffect } from 'react'\nimport { Loader2 } from 'lucide-react'\n\ninterface AuthGuardProps {\n  children: React.ReactNode\n  requireAuth?: boolean\n  redirectTo?: string\n}\n\nexport function AuthGuard({ \n  children, \n  requireAuth = true, \n  redirectTo = '/login' \n}: AuthGuardProps) {\n  const { user, loading } = useAuth()\n  const router = useRouter()\n\n  useEffect(() => {\n    if (!loading) {\n      if (requireAuth && !user) {\n        router.push(redirectTo)\n      } else if (!requireAuth && user) {\n        router.push('/dashboard')\n      }\n    }\n  }, [user, loading, requireAuth, redirectTo, router])\n\n  if (loading) {\n    return (\n      <div className=\"flex items-center justify-center min-h-screen\">\n        <Loader2 className=\"h-8 w-8 animate-spin\" />\n      </div>\n    )\n  }\n\n  if (requireAuth && !user) {\n    return null\n  }\n\n  if (!requireAuth && user) {\n    return null\n  }\n\n  return <>{children}</>\n}\n```\n\n## 8. User Menu Component\n\n```typescript\n// components/auth/UserMenu.tsx\n'use client'\n\nimport { useAuth } from '@/contexts/AuthContext'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { Button } from '@/components/ui/button'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { LogOut, Settings, User } from 'lucide-react'\n\nexport function UserMenu() {\n  const { user, signOut } = useAuth()\n\n  if (!user) return null\n\n  const handleSignOut = async () => {\n    await signOut()\n  }\n\n  const userInitials = user.user_metadata?.full_name\n    ?.split(' ')\n    .map((name: string) => name[0])\n    .join('')\n    .toUpperCase() || user.email?.[0].toUpperCase()\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" className=\"relative h-8 w-8 rounded-full\">\n          <Avatar className=\"h-8 w-8\">\n            <AvatarImage \n              src={user.user_metadata?.avatar_url} \n              alt={user.user_metadata?.full_name || user.email} \n            />\n            <AvatarFallback>{userInitials}</AvatarFallback>\n          </Avatar>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\" align=\"end\" forceMount>\n        <DropdownMenuLabel className=\"font-normal\">\n          <div className=\"flex flex-col space-y-1\">\n            <p className=\"text-sm font-medium leading-none\">\n              {user.user_metadata?.full_name || 'User'}\n            </p>\n            <p className=\"text-xs leading-none text-muted-foreground\">\n              {user.email}\n            </p>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <User className=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <Settings className=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n        </DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem onClick={handleSignOut}>\n          <LogOut className=\"mr-2 h-4 w-4\" />\n          <span>Sign out</span>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n```\n\n## 9. App Layout with Auth Provider\n\n```typescript\n// app/layout.tsx\nimport { AuthProvider } from '@/contexts/AuthContext'\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode\n}) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <AuthProvider>\n          {children}\n        </AuthProvider>\n      </body>\n    </html>\n  )\n}\n```\n\n## 10. Page Examples\n\n```typescript\n// app/login/page.tsx\nimport { LoginForm } from '@/components/auth/LoginForm'\nimport { AuthGuard } from '@/components/auth/AuthGuard'\n\nexport default function LoginPage() {\n  return (\n    <AuthGuard requireAuth={false}>\n      <div className=\"min-h-screen flex items-center justify-center bg-gray-50\">\n        <LoginForm />\n      </div>\n    </AuthGuard>\n  )\n}\n```\n\n```typescript\n// app/signup/page.tsx\nimport { SignupForm } from '@/components/auth/SignupForm'\nimport { AuthGuard } from '@/components/auth/AuthGuard'\n\nexport default function SignupPage() {\n  return (\n    <AuthGuard requireAuth={false}>\n      <div className=\"min-h-screen flex items-center justify-center bg-gray-50\">\n        <SignupForm />\n      </div>\n    </AuthGuard>\n  )\n}\n```\n\n```typescript\n// app/dashboard/page.tsx\nimport { AuthGuard } from '@/components/auth/AuthGuard'\nimport { UserMenu } from '@/components/auth/UserMenu'\n\nexport default function DashboardPage() {\n  return (\n    <AuthGuard requireAuth={true}>\n      <div className=\"min-h-screen\">\n        <header className=\"border-b\">\n          <div className=\"flex h-16 items-center px-4 justify-between\">\n            <h1 className=\"text-xl font-semibold\">Dashboard</h1>\n            <UserMenu />\n          </div>\n        </header>\n        <main className=\"p-6\">\n          <h2 className=\"text-2xl font-bold\">Welcome to your dashboard!</h2>\n        </main>\n      </div>\n    </AuthGuard>\n  )\n}\n```\n\n## 11. Social Authentication (Optional)\n\n```typescript\n// components/auth/SocialAuth.tsx\n'use client'\n\nimport { Button } from '@/components/ui/button'\nimport { supabase } from '@/lib/supabase'\nimport { Github } from 'lucide-react'\n\nexport function SocialAuth() {\n  const handleGithubSignIn = async () => {\n    const { error } = await supabase.auth.signInWithOAuth({\n      provider: 'github',\n      options: {\n        redirectTo: `${window.location.origin}/auth/callback`,\n      },\n    })\n    \n    if (error) {\n      console.error('Error signing in with GitHub:', error)\n    }\n  }\n\n  return (\n    <div className=\"space-y-2\">\n      <Button \n        variant=\"outline\" \n        className=\"w-full\" \n        onClick={handleGithubSignIn}\n      >\n        <Github className=\"mr-2 h-4 w-4\" />\n        Continue with GitHub\n      </Button>\n    </div>\n  )\n}\n```\n\n## 12. Auth Callback Handler\n\n```typescript\n// app/auth/callback/route.ts\nimport { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'\nimport { cookies } from 'next/headers'\nimport { NextRequest, NextResponse } from 'next/server'\n\nexport async function GET(request: NextRequest) {\n  const requestUrl = new URL(request.url)\n  const code = requestUrl.searchParams.get('code')\n\n  if (code) {\n    const supabase = createRouteHandlerClient({ cookies })\n    await supabase.auth.exchangeCodeForSession(code)\n  }\n\n  return NextResponse.redirect(`${requestUrl.origin}/dashboard`)\n}\n```\n\nThis implementation provides:\n\n- ✅ Complete authentication flow (login/signup)\n- ✅ Password validation and security\n- ✅ Auth state management\n- ✅ Route protection\n- ✅ User session handling\n- ✅ Error handling\n- ✅ Loading states\n- ✅ Social authentication (optional)\n- ✅ Responsive design\n- ✅ TypeScript support\n\nThe auth system is production-ready with proper error handling, validation, and user experience considerations."
}