Auth0 Initial Code

src/app/auth/session/route.ts

@@ -0,0 +1,12 @@
+import { NextResponse } from "next/server";
+import { auth0 } from "../../../lib/auth0";
+
+export async function GET() {
+	try {
+		const session = await auth0.getSession();
+		return NextResponse.json({ session });
+	} catch (error) {
+		console.error("Error getting session:", error);
+		return NextResponse.json({ session: null }, { status: 500 });
+	}
+}

src/app/mobile/layout.tsx

@@ -0,0 +1,15 @@
+
+import Footer from "@/lib/components/Footer";
+
+export default function MobileLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<main>
+			{children}
+			<Footer />
+		</main>
+	);
+}

src/app/mobile/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 import Image from "next/image";
 
+
 export default function Home() {
 
 	return (
@@ -9,44 +10,6 @@ export default function Home() {
 				<h1 className="text-3xl sm:text-4xl font-bold tracking-[-.01em] text-center sm:text-left">
 					Welcome to Mobile.s!
 				</h1>
-				<ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-					<li className="mb-2 tracking-[-.01em]">
-						Get started by editing{" "}
-						<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
-							src/app/page.tsx
-						</code>
-						.
-					</li>
-					<li className="tracking-[-.01em]">
-						Save and see your changes instantly.
-					</li>
-				</ol>
-
-				<div className="flex gap-4 items-center flex-col sm:flex-row">
-					<a
-						className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-						href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						<Image
-							className="dark:invert"
-							src="/vercel.svg"
-							alt="Vercel logomark"
-							width={20}
-							height={20}
-						/>
-						Deploy now
-					</a>
-					<a
-						className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-						href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						Read our docs
-					</a>
-				</div>
 			</main>
 		</div>
 	);

src/lib/auth0.ts

@@ -0,0 +1,3 @@
+import { Auth0Client } from "@auth0/nextjs-auth0/server";
+
+export const auth0 = new Auth0Client();

src/lib/components/Footer.tsx

@@ -1,31 +1,33 @@
+"use client";
+
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import { useRouter } from "next/navigation";
 
 const Footer = () => {
-  const navigate = useNavigate();
+	const router = useRouter();
 
-  return (
-    <div className="flex justify-around items-center py-4 bg-gray-100 border-t border-gray-300">
-      <button
-        onClick={() => navigate("/")}
-        className="text-blue-500 text-lg hover:underline"
-      >
-        Home
-      </button>
-      <button
-        onClick={() => navigate("/explore")}
-        className="text-blue-500 text-lg hover:underline"
-      >
-        Explore
-      </button>
-      <button
-        onClick={() => navigate("/profile")}
-        className="text-blue-500 text-lg hover:underline"
-      >
-        Profile
-      </button>
-    </div>
-  );
+	return (
+		<div className="flex justify-around items-center py-10 bg-gray-100 border-t border-gray-300">
+			<button
+				onClick={() => router.push("/")}
+				className="text-blue-500 text-lg hover:underline"
+			>
+				Home
+			</button>
+			<button
+				onClick={() => router.push("/explore")}
+				className="text-blue-500 text-lg hover:underline"
+			>
+				Explore
+			</button>
+			<button
+				onClick={() => router.push("/profile")}
+				className="text-blue-500 text-lg hover:underline"
+			>
+				Profile
+			</button>
+		</div>
+	);
 };
 
-export default Footer;
+export default Footer;

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).*)",
+  ],
+};