feat(auth): login, signup, email verification, Better Auth routes

2026-07-01 08:09:37 +02:00
parent 5b40968c9d
commit fa2d797918
6 changed files with 364 additions and 0 deletions
@@ -0,0 +1,68 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { toast } from "sonner";
+import { useTranslations } from "next-intl";
+import { authClient } from "@/lib/auth/client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function ForgotPasswordPage() {
+  const t = useTranslations("auth");
+  const [email, setEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [sent, setSent] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+    const { error } = await authClient.requestPasswordReset({
+      email,
+      redirectTo: "/reset-password",
+    });
+    setLoading(false);
+    if (error) {
+      toast.error(error.message ?? "Failed to send reset email");
+    } else {
+      setSent(true);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader className="space-y-1">
+        <CardTitle className="text-2xl font-semibold tracking-tight">{t("forgotPasswordTitle")}</CardTitle>
+        <CardDescription>
+          {sent ? t("forgotPasswordSent") : t("forgotPasswordDescription")}
+        </CardDescription>
+      </CardHeader>
+      {sent ? (
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            {t("forgotPasswordSentDescription", { email })}
+          </p>
+        </CardContent>
+      ) : (
+        <form onSubmit={handleSubmit}>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">{t("email")}</Label>
+              <Input id="email" type="email" placeholder={t("emailPlaceholder")} value={email} onChange={(e) => setEmail(e.target.value)} required />
+            </div>
+            <Button className="w-full" type="submit" disabled={loading}>
+              {loading ? t("sendingLink") : t("sendResetLink")}
+            </Button>
+          </CardContent>
+        </form>
+      )}
+      <CardFooter className="flex justify-center">
+        <Link href="/login" className="text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground">
+          {t("backToSignIn")}
+        </Link>
+      </CardFooter>
+    </Card>
+  );
+}
@@ -0,0 +1,7 @@
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-background px-4">
+      <div className="w-full max-w-sm">{children}</div>
+    </main>
+  );
+}
@@ -0,0 +1,120 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { useTranslations } from "next-intl";
+import { authClient } from "@/lib/auth/client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const t = useTranslations("auth");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [unverified, setUnverified] = useState(false);
+  const [resending, setResending] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setUnverified(false);
+    setLoading(true);
+    const { error } = await authClient.signIn.email({ email, password, callbackURL: "/recipes" });
+    setLoading(false);
+    if (error) {
+      if (error.code === "EMAIL_NOT_VERIFIED") {
+        setUnverified(true);
+      } else {
+        toast.error(error.message ?? "Sign in failed");
+      }
+    } else {
+      router.push("/recipes");
+    }
+  }
+
+  async function resendVerification() {
+    setResending(true);
+    const { error } = await authClient.sendVerificationEmail({
+      email,
+      callbackURL: "/recipes",
+    });
+    setResending(false);
+    if (error) {
+      toast.error(error.message ?? "Failed to resend");
+    } else {
+      toast.success("Verification email sent — check your inbox");
+      setUnverified(false);
+    }
+  }
+
+  async function handleGoogle() {
+    await authClient.signIn.social({ provider: "google", callbackURL: "/recipes" });
+  }
+
+  return (
+    <Card>
+      <CardHeader className="space-y-1">
+        <CardTitle className="text-2xl font-semibold tracking-tight">Epicure</CardTitle>
+        <CardDescription>{t("signInTitle")}</CardDescription>
+      </CardHeader>
+      <form onSubmit={handleSubmit}>
+        <CardContent className="space-y-4">
+          <Button variant="outline" className="w-full" type="button" onClick={handleGoogle}>
+            {t("continueWithGoogle")}
+          </Button>
+          <div className="flex items-center gap-2">
+            <Separator className="flex-1" />
+            <span className="text-xs text-muted-foreground">{t("or")}</span>
+            <Separator className="flex-1" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="email">{t("email")}</Label>
+            <Input id="email" type="email" placeholder={t("emailPlaceholder")} value={email} onChange={(e) => { setEmail(e.target.value); setUnverified(false); }} required />
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="password">{t("password")}</Label>
+              <Link href="/forgot-password" className="text-xs text-muted-foreground underline underline-offset-4 hover:text-foreground">
+                {t("forgotPassword")}
+              </Link>
+            </div>
+            <Input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
+          </div>
+
+          {unverified && (
+            <div className="rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-900 dark:bg-amber-950/30 px-4 py-3 space-y-2">
+              <p className="text-sm text-amber-800 dark:text-amber-300 font-medium">{t("emailNotVerified")}</p>
+              <p className="text-xs text-amber-700 dark:text-amber-400">{t("checkInboxVerification")}</p>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={resendVerification}
+                disabled={resending}
+                className="border-amber-300 dark:border-amber-700"
+              >
+                {resending ? t("resendingSending") : t("resendVerification")}
+              </Button>
+            </div>
+          )}
+
+          <Button className="w-full" type="submit" disabled={loading}>
+            {loading ? t("signInLoading") : t("signIn")}
+          </Button>
+        </CardContent>
+      </form>
+      <CardFooter className="flex justify-center">
+        <p className="text-sm text-muted-foreground">
+          {t("noAccount")}{" "}
+          <Link href="/signup" className="underline underline-offset-4 hover:text-foreground">{t("signUp")}</Link>
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}
@@ -0,0 +1,79 @@
+"use client";
+
+import { useState, Suspense } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { toast } from "sonner";
+import { useTranslations } from "next-intl";
+import { authClient } from "@/lib/auth/client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import Link from "next/link";
+
+function ResetPasswordForm() {
+  const router = useRouter();
+  const t = useTranslations("auth");
+  const searchParams = useSearchParams();
+  const token = searchParams.get("token") ?? "";
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (password !== confirm) { toast.error("Passwords don't match"); return; }
+    setLoading(true);
+    const { error } = await authClient.resetPassword({ newPassword: password, token });
+    setLoading(false);
+    if (error) {
+      toast.error(error.message ?? "Reset failed — link may have expired");
+    } else {
+      toast.success("Password updated");
+      router.push("/login");
+    }
+  }
+
+  if (!token) {
+    return <p className="text-sm text-muted-foreground p-6">{t("invalidToken")}</p>;
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="password">{t("newPassword")}</Label>
+          <Input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required minLength={8} />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="confirm">{t("confirmPassword")}</Label>
+          <Input id="confirm" type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} required minLength={8} />
+        </div>
+        <Button className="w-full" type="submit" disabled={loading}>
+          {loading ? t("updatingPassword") : t("updatePassword")}
+        </Button>
+      </CardContent>
+    </form>
+  );
+}
+
+export default function ResetPasswordPage() {
+  const t = useTranslations("auth");
+
+  return (
+    <Card>
+      <CardHeader className="space-y-1">
+        <CardTitle className="text-2xl font-semibold tracking-tight">{t("resetPasswordTitle")}</CardTitle>
+        <CardDescription>{t("resetPasswordDescription")}</CardDescription>
+      </CardHeader>
+      <Suspense fallback={<CardContent><p className="text-sm text-muted-foreground">{t("updatingPassword")}</p></CardContent>}>
+        <ResetPasswordForm />
+      </Suspense>
+      <CardFooter className="flex justify-center">
+        <Link href="/login" className="text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground">
+          {t("backToSignIn")}
+        </Link>
+      </CardFooter>
+    </Card>
+  );
+}
@@ -0,0 +1,86 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { useTranslations } from "next-intl";
+import { authClient } from "@/lib/auth/client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+
+export default function SignupPage() {
+  const router = useRouter();
+  const t = useTranslations("auth");
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+    const { error } = await authClient.signUp.email({
+      name,
+      email,
+      password,
+      callbackURL: "/recipes",
+    });
+    setLoading(false);
+    if (error) {
+      toast.error(error.message ?? "Sign up failed");
+    } else {
+      toast.success("Account created — check your email to verify");
+      router.push("/login");
+    }
+  }
+
+  async function handleGoogle() {
+    await authClient.signIn.social({ provider: "google", callbackURL: "/recipes" });
+  }
+
+  return (
+    <Card>
+      <CardHeader className="space-y-1">
+        <CardTitle className="text-2xl font-semibold tracking-tight">{t("signUpTitle")}</CardTitle>
+        <CardDescription>{t("signUpSubtitle")}</CardDescription>
+      </CardHeader>
+      <form onSubmit={handleSubmit}>
+        <CardContent className="space-y-4">
+          <Button variant="outline" className="w-full" type="button" onClick={handleGoogle}>
+            {t("continueWithGoogle")}
+          </Button>
+          <div className="flex items-center gap-2">
+            <Separator className="flex-1" />
+            <span className="text-xs text-muted-foreground">{t("or")}</span>
+            <Separator className="flex-1" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="name">{t("name")}</Label>
+            <Input id="name" type="text" placeholder={t("namePlaceholder")} value={name} onChange={(e) => setName(e.target.value)} required />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="email">{t("email")}</Label>
+            <Input id="email" type="email" placeholder={t("emailPlaceholder")} value={email} onChange={(e) => setEmail(e.target.value)} required />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">{t("password")}</Label>
+            <Input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required minLength={8} />
+          </div>
+          <Button className="w-full" type="submit" disabled={loading}>
+            {loading ? t("signUpLoading") : t("signUpTitle")}
+          </Button>
+        </CardContent>
+      </form>
+      <CardFooter className="flex justify-center">
+        <p className="text-sm text-muted-foreground">
+          {t("alreadyHaveAccount")}{" "}
+          <Link href="/login" className="underline underline-offset-4 hover:text-foreground">{t("signIn")}</Link>
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}
@@ -0,0 +1,4 @@
+import { auth } from "@/lib/auth/server";
+import { toNextJsHandler } from "better-auth/next-js";
+
+export const { GET, POST } = toNextJsHandler(auth);