Inital Frontend Code

2025-03-29 12:22:57 -04:00
parent 08e574daf6
commit 04c2c57fc7
19 changed files with 489 additions and 0 deletions
--- a/React/src/app/favicon.ico
+++ b/React/src/app/favicon.ico
--- a/React/src/app/globals.css
+++ b/React/src/app/globals.css
@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
--- a/React/src/app/layout.tsx
+++ b/React/src/app/layout.tsx
@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+	variable: "--font-geist-sans",
+	subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+	variable: "--font-geist-mono",
+	subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+	title: "Create Next App",
+	description: "Generated by create next app",
+};
+
+export default function RootLayout({
+	children,
+}: Readonly<{
+	children: React.ReactNode;
+}>) {
+	return (
+		<html lang="en">
+			<body
+				className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+				suppressHydrationWarning={true}
+			>
+				{children}
+			</body>
+		</html>
+	);
+}
--- a/React/src/app/page.tsx
+++ b/React/src/app/page.tsx
@@ -0,0 +1,37 @@
+import { auth0 } from "../lib/auth0";
+
+export default async function Home() {
+	const session = await auth0.getSession();
+
+	console.log("Session:", session?.user);
+
+	// If no session, show sign-up and login buttons
+	if (!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">
+					<a href="/auth/login?screen_hint=signup">
+						<button>Sign up</button>
+					</a>
+					<a href="/auth/login">
+						<button>Log in</button>
+					</a>
+				</main>
+			</div>
+		);
+	}
+
+	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>Welcome, {session.user.name}!</h1>
+				<p>
+					<a href="/auth/logout">
+						<button>Log out</button>
+					</a>
+				</p>
+			</main>
+		</div>
+	);
+}
--- a/React/src/lib/auth0.ts
+++ b/React/src/lib/auth0.ts
@@ -0,0 +1,3 @@
+import { Auth0Client } from "@auth0/nextjs-auth0/server";
+
+export const auth0 = new Auth0Client();
--- a/React/src/middleware.ts
+++ b/React/src/middleware.ts
@@ -0,0 +1,18 @@
+import type { NextRequest } from "next/server";
+import { auth0 } from "./lib/auth0";
+
+export async function middleware(request: NextRequest) {
+  return await auth0.middleware(request);
+}
+
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico, sitemap.xml, robots.txt (metadata files)
+     */
+    "/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
+  ],
+};