NextAuth v5 Admin Auth + Prisma

1"use client";
2 
3import { Suspense, useState } from "react";
4import { signIn } from "next-auth/react";
5import { useRouter, useSearchParams } from "next/navigation";
6 
7export default function LoginPage() {
8  return (
9    <Suspense>
10      <LoginForm />
11    </Suspense>
12  );
13}
14 
15function LoginForm() {
16  const router = useRouter();
17  const searchParams = useSearchParams();
18  const callbackUrl = searchParams.get("callbackUrl") ?? "/admin";
19 
20  const [error, setError] = useState<string | null>(null);
21  const [pending, setPending] = useState(false);
22  const [showPassword, setShowPassword] = useState(false);
23 
24  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
25    e.preventDefault();
26    setError(null);
27    setPending(true);
28 
29    const formData = new FormData(e.currentTarget);
30    const result = await signIn("credentials", {
31      email: formData.get("email"),
32      password: formData.get("password"),
33      redirect: false,
34    });
35 
36    setPending(false);
37 
38    if (result?.error) {
39      setError("Invalid email or password.");
40      return;
41    }
42 
43    router.push(callbackUrl);
44    router.refresh();
45  }
46 
47  return (
48    <div className="flex min-h-full flex-1 flex-col items-center justify-center bg-zinc-50 px-6 py-12">
49      <div className="w-full max-w-sm">
50        <h1 className="text-2xl font-semibold tracking-tight text-zinc-900">
51          Degaina Store
52        </h1>
53        <p className="mt-1 text-sm text-zinc-500">Sign in to your account</p>
54 
55        <form onSubmit={handleSubmit} className="mt-8 space-y-4">
56          <div>
57            <label
58              htmlFor="email"
59              className="block text-sm font-medium text-zinc-700"
60            >
61              Email
62            </label>
63            <input
64              id="email"
65              name="email"
66              type="email"
67              required
68              autoComplete="email"
69              className="mt-1 w-full rounded-md border border-zinc-300 px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 outline-none focus:border-zinc-500 focus:ring-2 focus:ring-zinc-200"
70              placeholder="admin@degaina.com"
71            />
72          </div>
73 
74          <div>
75            <label
76              htmlFor="password"
77              className="block text-sm font-medium text-zinc-700"
78            >
79              Password
80            </label>
81            <div className="relative mt-1">
82              <input
83                id="password"
84                name="password"
85// … truncated