Hackathons/Bitcamp-2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Session Management

Browse Source
This commit is contained in:
GamerBoss101
2025-04-12 15:14:58 -04:00
parent 75e5f765a4
commit b5b268fda3
3 changed files with 81 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/auth/session/route.ts
View File

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

93
src/app/page.tsx
View File

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

19
src/lib/context/DeviceContext.tsx
View File

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