From b5b268fda33f62fd1bbe19f9f84ab443437f4b84 Mon Sep 17 00:00:00 2001
From: GamerBoss101 <adithcool.5@gmail.com>
Date: Sat, 12 Apr 2025 15:14:58 -0400
Subject: [PATCH] Session Management

---
 src/app/auth/session/route.ts     |  2 +-
 src/app/page.tsx                  | 93 +++++++++++++++++++++----------
 src/lib/context/DeviceContext.tsx | 19 ++++++-
 3 files changed, 81 insertions(+), 33 deletions(-)

diff --git a/src/app/auth/session/route.ts b/src/app/auth/session/route.ts
index 9299d4a..2a67d3e 100644
--- a/src/app/auth/session/route.ts
+++ b/src/app/auth/session/route.ts
@@ -4,7 +4,7 @@ import { auth0 } from "../../../lib/auth0";
 export async function GET() {
 	try {
 		const session = await auth0.getSession();
-		return NextResponse.json({ session });
+		return NextResponse.json({ session: session?.user });
 	} catch (error) {
 		console.error("Error getting session:", error);
 		return NextResponse.json({ session: null }, { status: 500 });
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6314119..4b961dd 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,33 +1,66 @@
-import { auth0 } from "@/lib/auth0";
-import './globals.css';
+"use client";
 
-export default async function Home() {
-  // Fetch the user session
-  const session = await auth0.getSession();
+import "./globals.css";
+import { useDevice } from "@/lib/context/DeviceContext";
 
-  // If no session, show sign-up and login buttons
-  if (!session) {
-    return (
-      <main>
-        <a href="/auth/login?screen_hint=signup">
-          <button>Sign up</button>
-        </a>
-        <a href="/auth/login">
-          <button>Log in</button>
-        </a>
-      </main>
-    );
-  }
+function Mobile() {
 
-  // If session exists, show a welcome message and logout button
-  return (
-    <main>
-      <h1>Welcome, {session.user.name}!</h1>
-      <p>
-        <a href="/auth/logout">
-          <button>Log out</button>
-        </a>
-      </p>
-    </main>
-  );
-}
\ No newline at end of file
+	const { session } = useDevice();
+
+	return (
+		<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+			<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
+				<h1 className="text-3xl sm:text-4xl font-bold tracking-[-.01em] text-center sm:text-left">
+					Welcome to {session?.name || "NULL"} !!
+				</h1>
+
+				<button>
+					<a href="/auth/login?screen_hint=signup">
+						Sign up
+					</a>
+				</button>
+				<button>
+					<a href="/auth/login?screen_hint=login">
+						Log in
+					</a>
+				</button>
+			</main>
+		</div>
+	);
+}
+
+function Web() {
+
+	const {session } = useDevice();
+
+	console.log("session", session);
+
+	return (
+		<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+			<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
+				<h1 className="text-3xl sm:text-4xl font-bold tracking-[-.01em] text-center sm:text-left">
+					Welcome to {session?.name || "NULL"} !!
+				</h1>
+
+				<button>
+					<a href="/auth/login?screen_hint=signup">
+						Sign up
+					</a>
+				</button>
+				<button>
+					<a href="/auth/login?screen_hint=login">
+						Log in
+					</a>
+				</button>
+			</main>
+		</div>
+	);
+}
+
+export default function Home() {
+
+	const { isMobile, isSafari } = useDevice();
+
+	if (isMobile && isSafari) return Mobile();
+	else return Web();
+}
diff --git a/src/lib/context/DeviceContext.tsx b/src/lib/context/DeviceContext.tsx
index 89a50b7..42967a4 100644
--- a/src/lib/context/DeviceContext.tsx
+++ b/src/lib/context/DeviceContext.tsx
@@ -5,7 +5,8 @@ import * as rdd from "react-device-detect";
 
 interface DeviceContextProps {
     isSafari: boolean;
-    isMobile: boolean;
+    isMobile: boolean;  
+    session: any | null;
 }
 
 const DeviceContext = createContext<DeviceContextProps | undefined>(undefined);
@@ -13,14 +14,28 @@ const DeviceContext = createContext<DeviceContextProps | undefined>(undefined);
 export const DeviceProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
     const [isSafari, setIsSafari] = useState<boolean>(false);
     const [isMobile, setIsMobile] = useState<boolean>(false);
+    const [session, setSession] = useState<any>(null);
 
     useEffect(() => {
         setIsSafari(rdd.isSafari);
         setIsMobile(rdd.isMobile);
+
+        const checkAuthentication = async () => {
+            const res = await fetch("/auth/session");
+            const data = await res.json();
+
+            if (res.ok) {
+                setSession(data.session);
+            } else {
+                console.error("Error fetching session:", data);
+            }
+        };
+
+        checkAuthentication();
     }, []);
 
     return (
-        <DeviceContext.Provider value={{ isSafari, isMobile }}>
+        <DeviceContext.Provider value={{ isSafari, isMobile, session }}>
             {children}
         </DeviceContext.Provider>
     );