From 25a111dfb812d9b55d99181f869d4bfc76e88923 Mon Sep 17 00:00:00 2001
From: SiddharthaMishra-dev <mailbox.siddharthamishra@gmail.com>
Date: Thu, 29 Feb 2024 12:22:08 +0530
Subject: [PATCH] [fix]: mutliple re-rendering of toast on sign-in process

---
 app/signin/page.tsx   | 30 ++++++++++++++++++------------
 components/Loader.tsx |  5 +++--
 middleware.ts         | 22 ++++++++++++++++++++++
 3 files changed, 43 insertions(+), 14 deletions(-)
 create mode 100644 middleware.ts

diff --git a/app/signin/page.tsx b/app/signin/page.tsx
index 23ea0a6..dd2a1e2 100644
--- a/app/signin/page.tsx
+++ b/app/signin/page.tsx
@@ -1,22 +1,22 @@
 "use client";
-import { useSession, signIn } from "next-auth/react";
-import { FaGithub, FaGoogle } from "react-icons/fa";
 import { Button } from "@nextui-org/button";
-import { Card, CardHeader, CardBody } from "@nextui-org/card";
+import { Card, CardBody, CardHeader } from "@nextui-org/card";
+import { signIn, useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import toast from "react-hot-toast";
-import { useEffect } from "react";
+import { FaGithub, FaGoogle } from "react-icons/fa";
+import Loading from "./loading";
+import { useEffect, useState } from "react";
 
 const Page = () => {
-  const { data: session } = useSession();
+  const { data: session, status } = useSession();
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
   const router = useRouter();
 
   const handleSignIn = async (provider: string) => {
     try {
       await signIn(provider);
-      // Redirect to home page after sign-in
-      router.push("/");
-      toast.success("Logged in successfully");
     } catch (error) {
       toast.error("Sign in failed");
       console.error("Sign in error:", error);
@@ -24,11 +24,17 @@ const Page = () => {
   };
 
   useEffect(() => {
-    if (session) {
-      router.push(`/`);
-      toast.success("Logged in successfully");
+    if (session && !isLoggedIn) {
+      setIsLoggedIn(true);
+      toast.success("Logged In");
+      router.push("/");
     }
-  }, [session, router]);
+  }, [session, isLoggedIn]);
+
+  if (status === "loading") {
+    return <Loading />;
+  }
+
   return (
     <>
       <div className="h-full w-full p-6 ">
diff --git a/components/Loader.tsx b/components/Loader.tsx
index 1d73cff..b7a0cdf 100644
--- a/components/Loader.tsx
+++ b/components/Loader.tsx
@@ -1,9 +1,10 @@
-import { CircularProgress } from "@nextui-org/progress";
+import { Loader2 } from "lucide-react";
 
 const Loader = () => {
   return (
     <div className="h-screen w-full flex justify-center items-center">
-      <CircularProgress aria-label="Loading ..." />
+      {/* <CircularProgress aria-label="Loading ..." /> */}
+      <Loader2 className="animate-spin text-blue-600 h-32 w-32" />
     </div>
   );
 };
diff --git a/middleware.ts b/middleware.ts
new file mode 100644
index 0000000..e7a3979
--- /dev/null
+++ b/middleware.ts
@@ -0,0 +1,22 @@
+import { getServerSession } from "next-auth";
+import { NextRequest, NextResponse } from "next/server";
+import { authOptions } from "./config/authoptions";
+import { getToken } from "next-auth/jwt";
+// export { default } from "next-auth/middleware";
+
+export async function middleware(req: NextRequest) {
+  // const { url } = req;
+  // const session = await getServerSession(authOptions);
+  // const token = await getToken({req});
+
+  // console.log(token);
+
+  // if (session && ["/signin"].includes(nextUrl.pathname)) {
+  //   return NextResponse.redirect("http://localhost:3000/");
+  // }
+
+  // console.log(req);
+  return NextResponse.next();
+}
+
+// export const config = { matcher: ["/signin"] };