Compare main into item-collect

src/app/Login/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+import { useEffect, useState, Suspense } from "react";
+import { useSession, signIn, signOut } from "next-auth/react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+function Login(): React.JSX.Element {
+  const { data: session } = useSession();
+  const [alreadyLogin, setAlreadyLogin] = useState(false);
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const search = searchParams.get("next");
+
+  useEffect(() => {
+    if (session != null) {
+      setAlreadyLogin(true);
+    }
+  }, [session, router]);
+
+  return (
+    <div className="relative flex h-full min-h-screen w-full flex-col items-center justify-center gap-4 bg-[url('/login/bg.webp')] md:mx-auto md:max-w-[25rem]">
+      {alreadyLogin ? (
+        <div className="flex flex-col gap-4">
+          <button
+            className="rounded-[20px] bg-[#ECF0F6] p-4 text-2xl font-bold text-black transition-transform duration-300 hover:scale-105"
+            onClick={() => signOut()}
+          >
+            Google logout
+          </button>
+          <button
+            className="rounded-[20px] bg-[#ECF0F6] p-4 text-2xl font-bold text-black transition-transform duration-300 hover:scale-105"
+            onClick={() => {
+              router.push(search ? search : "/");
+            }}
+          >
+            Back to page
+          </button>
+        </div>
+      ) : (
+        <button
+          className="rounded-[20px] bg-[#ECF0F6] p-4 text-2xl font-bold text-black transition-transform duration-300 hover:scale-105"
+          onClick={() => signIn("google")}
+        >
+          Google login
+        </button>
+      )}
+    </div>
+  );
+}
+
+export default function Page(): React.JSX.Element {
+  return (
+    <Suspense fallback={<p>loading...</p>}>
+      <Login />
+    </Suspense>
+  );
+}

src/components/authProvider.tsx

@@ -10,8 +10,8 @@ export default function AuthProvider({ children }: React.PropsWithChildren) {
   const pathname = usePathname();
 
   useEffect(() => {
-    if (session === null && pathname !== "/") {
-      router.push("/");
+    if (session === null && pathname !== "/Login") {
+      router.push(`/Login?next=${pathname}`);
     }
   }, [session, router, pathname]);
 

src/styles/globals.css

@@ -1,3 +1,4 @@
+@import url("https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

tailwind.config.ts

@@ -6,7 +6,7 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        sans: ["var(--font-geist-sans)", ...fontFamily.sans],
+        sans: ["Anonymous Pro", ...fontFamily.sans],
       },
     },
   },