feat: replace Google OAuth with email/password authentication

Replace Google OAuth provider with email/password authentication to reduce
friction for MVP development and vibe coding workflows.

Changes:
- Remove Google OAuth configuration from auth.ts
- Add emailAndPassword provider with enabled: true
- Add email verification with sendOnSignUp: true
- Add password reset functionality
- Log verification and reset URLs to terminal (no email integration yet)

New auth pages (src/app/(auth)/):
- /login - Sign in page
- /register - Sign up page
- /forgot-password - Password reset request
- /reset-password - Password reset completion

New components (src/components/auth/):
- sign-up-form.tsx - Registration form
- forgot-password-form.tsx - Password reset request form
- reset-password-form.tsx - Password reset form

Updated components:
- sign-in-button.tsx - Now email/password form instead of Google button
- user-profile.tsx - Shows Sign in/Sign up buttons when logged out

Bug fixes:
- Fix React render error in profile page by wrapping router.push in useEffect

Config updates:
- Remove GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET from env.example
- Update CLAUDE.md documentation to reflect email/password auth
- Add requestPasswordReset, resetPassword, sendVerificationEmail to auth-client exports

All changes applied to both main project and create-agentic-app template.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Auto
2025-12-26 05:50:43 +02:00
parent 5cd66b245e
commit f29d296816
45 changed files with 2231 additions and 91 deletions

View File

@@ -0,0 +1,83 @@
"use client"
import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { requestPasswordReset } from "@/lib/auth-client"
export function ForgotPasswordForm() {
const [email, setEmail] = useState("")
const [error, setError] = useState("")
const [success, setSuccess] = useState(false)
const [isPending, setIsPending] = useState(false)
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setError("")
setIsPending(true)
try {
const result = await requestPasswordReset({
email,
redirectTo: "/reset-password",
})
if (result.error) {
setError(result.error.message || "Failed to send reset email")
} else {
setSuccess(true)
}
} catch {
setError("An unexpected error occurred")
} finally {
setIsPending(false)
}
}
if (success) {
return (
<div className="space-y-4 w-full max-w-sm text-center">
<p className="text-sm text-muted-foreground">
If an account exists with that email, a password reset link has been sent.
Check your terminal for the reset URL.
</p>
<Link href="/login">
<Button variant="outline" className="w-full">
Back to sign in
</Button>
</Link>
</div>
)
}
return (
<form onSubmit={handleSubmit} className="space-y-4 w-full max-w-sm">
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input
id="email"
type="email"
placeholder="you@example.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
disabled={isPending}
/>
</div>
{error && (
<p className="text-sm text-destructive">{error}</p>
)}
<Button type="submit" className="w-full" disabled={isPending}>
{isPending ? "Sending..." : "Send reset link"}
</Button>
<div className="text-center text-sm text-muted-foreground">
Remember your password?{" "}
<Link href="/login" className="text-primary hover:underline">
Sign in
</Link>
</div>
</form>
)
}