fix: refactor auth callbacks

README.md

@@ -5,10 +5,10 @@
 
 </div>
 
-| 一键部署到 Vercel-推荐                                | Docker部署                                                      | Cloudflare部署                                                          | 如何更新？                                                |
-| ----------------------------------------------------- | --------------------------------------------------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------- |
-| [部署简易教程](https://buycoffee.top/blog/tech/nezha) | [Docker 部署教程](https://buycoffee.top/blog/tech/nezha-docker) | [Cloudflare 部署教程](https://buycoffee.top/blog/tech/nezha-cloudflare) | [更新教程](https://buycoffee.top/blog/tech/nezha-upgrade) |
-| [Vercel-demo](https://nezha-vercel.buycoffee.top)     | [Docker-demo](https://nezha-docker.buycoffee.tech)              | [Cloudflare-demo](https://nezha-cloudflare.buycoffee.tech)  [密码: nezhadash]            |
+| 一键部署到 Vercel-推荐                                | Docker部署                                                      | Cloudflare部署                                                               | 如何更新？                                                |
+| ----------------------------------------------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------- | --------------------------------------------------------- |
+| [部署简易教程](https://buycoffee.top/blog/tech/nezha) | [Docker 部署教程](https://buycoffee.top/blog/tech/nezha-docker) | [Cloudflare 部署教程](https://buycoffee.top/blog/tech/nezha-cloudflare)      | [更新教程](https://buycoffee.top/blog/tech/nezha-upgrade) |
+| [Vercel-demo](https://nezha-vercel.buycoffee.top)     | [Docker-demo](https://nezha-docker.buycoffee.tech)              | [Cloudflare-demo](https://nezha-cloudflare.buycoffee.tech) [密码: nezhadash] |
 
 #### 环境变量
 

auth.ts

@@ -1,23 +1,32 @@
 import NextAuth from "next-auth";
-import Credentials from "next-auth/providers/credentials";
+import CredentialsProvider from "next-auth/providers/credentials";
 
 import getEnv from "./lib/env-entry";
 
 export const { handlers, signIn, signOut, auth } = NextAuth({
   secret: process.env.AUTH_SECRET ?? "this_is_nezha_dash_web_secret",
   trustHost: (process.env.AUTH_TRUST_HOST as boolean | undefined) ?? true,
-  pages: {
-    signIn: "/",
-  },
   providers: [
-    Credentials({
+    CredentialsProvider({
+      type: "credentials",
       credentials: { password: { label: "Password", type: "password" } },
-      authorize: async (credentials) => {
-        if (credentials.password === getEnv("SitePassword")) {
+      // authorization function
+      async authorize(credentials) {
+        const { password } = credentials;
+        if (password === getEnv("SitePassword")) {
           return { id: "nezha-dash-auth" };
         }
-        return null;
+        return { error: "Invalid password" };
       },
     }),
   ],
+  callbacks: {
+    async signIn({ user }) {
+      // @ts-ignore
+      if (user.error) {
+        return false;
+      }
+      return true;
+    },
+  },
 });

components/SignIn.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { getCsrfToken } from "next-auth/react";
+import { getCsrfToken, signIn } from "next-auth/react";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -13,6 +13,7 @@ export function SignIn() {
   const [csrfToken, setCsrfToken] = useState("");
   const [loading, setLoading] = useState(false);
   const [errorState, setErrorState] = useState(false);
+  const [successState, setSuccessState] = useState(false);
 
   const router = useRouter();
 
@@ -28,34 +29,26 @@ export function SignIn() {
     e.preventDefault();
     setLoading(true);
     const formData = new FormData(e.currentTarget);
-
-
-    // 直接构建 URL 编码的字符串
-    const urlEncodedData = [
-      `csrfToken=${encodeURIComponent(csrfToken)}`,
-      `redirect=false`,
-      `password=${encodeURIComponent(formData.get('password') as string)}`,
-    ].join('&');
-
-    const res = await fetch("/api/auth/callback/credentials", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/x-www-form-urlencoded",
-      },
-      body: urlEncodedData,
+    const password = formData.get("password") as string;
+    const res = await signIn("credentials", {
+      password: password,
+      redirect: false,
     });
-
-    if (res.url.includes("error")) {
-      setLoading(false)
-      setErrorState(true)
+    if (res?.error) {
+      console.log("login error");
+      console.log(res);
+      setErrorState(true);
+      setSuccessState(false);
     } else {
-      setLoading(false)
-      setErrorState(false)
+      console.log("login success");
+      console.log(res);
+      setErrorState(false);
+      setSuccessState(true);
+      router.push("/");
+      router.refresh();
     }
-    router.push("/");
-    router.refresh();
+    setLoading(false);
   };
-
   return (
     <form
       className="flex flex-col items-center justify-start gap-4 p-4 "
@@ -69,6 +62,11 @@ export function SignIn() {
               {t("ErrorMessage")}
             </p>
           )}
+          {successState && (
+            <p className="text-green-500 text-sm font-semibold">
+              {t("SuccessMessage")}
+            </p>
+          )}
           <p className="text-base font-semibold">{t("SignInMessage")}</p>
           <input
             className="px-1 border-[1px] rounded-[5px]"