From dd05154be2e70a76082f37434c61f31de387fa98 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Mon, 21 Oct 2024 13:10:59 +0800
Subject: [PATCH 1/3] feat: client side auth

---
 components/SignIn.tsx | 38 +++++++++++++++++++++++++++-----------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/components/SignIn.tsx b/components/SignIn.tsx
index 31e6913..e49da09 100644
--- a/components/SignIn.tsx
+++ b/components/SignIn.tsx
@@ -6,6 +6,7 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 
 import { Loader } from "./loading/Loader";
+import { auth } from "@/auth";
 
 export function SignIn() {
   const t = useTranslations("SignIn");
@@ -37,20 +38,35 @@ export function SignIn() {
     e.preventDefault();
     setLoading(true);
     const formData = new FormData(e.currentTarget);
-    const password = formData.get("password");
-    const res = await signIn("credentials", {
-      password,
-      redirect: false,
+
+
+    // 直接构建 URL 编码的字符串
+    const urlEncodedData = [
+      `csrfToken=${encodeURIComponent(csrfToken)}`,
+      `redirect=false`,
+      `password=${encodeURIComponent(formData.get('password') as string)}`,
+    ].join('&');
+
+    await fetch("/api/auth/callback/credentials", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: urlEncodedData,
     });
-    if (res?.error) {
-      setErrorState(true);
-    } else {
-      setErrorState(false);
+
+    const session = await auth();
+
+
+    if (session) {
       setSuccessState(true);
-      router.push("/");
-      router.refresh();
+    } else {
+      setErrorState(true);
     }
-    setLoading(false);
+
+    setLoading(false)
+    router.push("/");
+    router.refresh();
   };
 
   return (

From 117ea33382fac945a25ceee797451b89433798c5 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Mon, 21 Oct 2024 13:41:23 +0800
Subject: [PATCH 2/3] perf: remove error state

---
 components/SignIn.tsx | 37 +++----------------------------------
 1 file changed, 3 insertions(+), 34 deletions(-)

diff --git a/components/SignIn.tsx b/components/SignIn.tsx
index e49da09..bb69b8d 100644
--- a/components/SignIn.tsx
+++ b/components/SignIn.tsx
@@ -1,31 +1,20 @@
 "use client";
 
-import { getCsrfToken, signIn } from "next-auth/react";
+import { getCsrfToken } from "next-auth/react";
 import { useTranslations } from "next-intl";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
 import { Loader } from "./loading/Loader";
-import { auth } from "@/auth";
 
 export function SignIn() {
   const t = useTranslations("SignIn");
 
   const [csrfToken, setCsrfToken] = useState("");
-  const [errorState, setErrorState] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [successState, setSuccessState] = useState(false);
 
-  const search = useSearchParams();
-  const error = search.get("error");
   const router = useRouter();
 
-  useEffect(() => {
-    if (error) {
-      setErrorState(true);
-    }
-  }, [error]);
-
   useEffect(() => {
     async function loadProviders() {
       const csrf = await getCsrfToken();
@@ -54,19 +43,9 @@ export function SignIn() {
       },
       body: urlEncodedData,
     });
-
-    const session = await auth();
-
-
-    if (session) {
-      setSuccessState(true);
-    } else {
-      setErrorState(true);
-    }
-
-    setLoading(false)
     router.push("/");
     router.refresh();
+    setLoading(false)
   };
 
   return (
@@ -77,16 +56,6 @@ export function SignIn() {
       <input type="hidden" name="csrfToken" value={csrfToken} />
       <section className="flex flex-col items-start gap-2">
         <label className="flex flex-col items-start gap-1 ">
-          {errorState && (
-            <p className="text-red-500 text-sm font-semibold">
-              {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]"

From c94a846c0b5679c68d3b91d6f71be01844680698 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Mon, 21 Oct 2024 13:49:55 +0800
Subject: [PATCH 3/3] fix: error control

---
 components/SignIn.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/components/SignIn.tsx b/components/SignIn.tsx
index bb69b8d..d0bea0b 100644
--- a/components/SignIn.tsx
+++ b/components/SignIn.tsx
@@ -12,6 +12,7 @@ export function SignIn() {
 
   const [csrfToken, setCsrfToken] = useState("");
   const [loading, setLoading] = useState(false);
+  const [errorState, setErrorState] = useState(false);
 
   const router = useRouter();
 
@@ -36,16 +37,23 @@ export function SignIn() {
       `password=${encodeURIComponent(formData.get('password') as string)}`,
     ].join('&');
 
-    await fetch("/api/auth/callback/credentials", {
+    const res = await fetch("/api/auth/callback/credentials", {
       method: "POST",
       headers: {
         "Content-Type": "application/x-www-form-urlencoded",
       },
       body: urlEncodedData,
     });
+
+    if (res.url.includes("error")) {
+      setLoading(false)
+      setErrorState(true)
+    } else {
+      setLoading(false)
+      setErrorState(false)
+    }
     router.push("/");
     router.refresh();
-    setLoading(false)
   };
 
   return (
@@ -56,6 +64,11 @@ export function SignIn() {
       <input type="hidden" name="csrfToken" value={csrfToken} />
       <section className="flex flex-col items-start gap-2">
         <label className="flex flex-col items-start gap-1 ">
+          {errorState && (
+            <p className="text-red-500 text-sm font-semibold">
+              {t("ErrorMessage")}
+            </p>
+          )}
           <p className="text-base font-semibold">{t("SignInMessage")}</p>
           <input
             className="px-1 border-[1px] rounded-[5px]"