Session Management

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 });

src/app/page.tsx

@@ -1,33 +1,66 @@
-import { auth0 } from "@/lib/auth0";
+"use client";
-import './globals.css';
 
-export default async function Home() {
+import "./globals.css";
-  // Fetch the user session
+import { useDevice } from "@/lib/context/DeviceContext";
-  const session = await auth0.getSession();
 
-  // If no session, show sign-up and login buttons
+function Mobile() {
-  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>
-    );
-  }
 
-  // If session exists, show a welcome message and logout button
+	const { session } = useDevice();
-  return (
+
-    <main>
+	return (
-      <h1>Welcome, {session.user.name}!</h1>
+		<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)]">
-      <p>
+			<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <a href="/auth/logout">
+				<h1 className="text-3xl sm:text-4xl font-bold tracking-[-.01em] text-center sm:text-left">
-          <button>Log out</button>
+					Welcome to {session?.name || "NULL"} !!
-        </a>
+				</h1>
-      </p>
+
-    </main>
+				<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();
+}

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>
     );