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>
+  );
+}