Merge pull request #3 from MythosAI/feature/auth

Feature/auth

src/app/profile/page.tsx

@@ -0,0 +1,24 @@
+import { auth0 } from '@/lib/auth0';
+
+export default async function ProfilePage() {
+  const session = await auth0.getSession();
+
+  if (!session) {
+    return (
+      <main>
+        <h2>❌ Not logged in</h2>
+        <a href="/auth/login">Log in</a>
+      </main>
+    );
+  }
+
+  return (
+    <main>
+      <h2>✅ Logged in as {session.user.name}</h2>
+      <p>Email: {session.user.email}</p>
+      <img src={session.user.picture} alt="avatar" width={100} />
+      <br />
+      <a href="/auth/logout">Log out</a>
+    </main>
+  );
+}

src/components/Navbar.tsx

@@ -3,6 +3,7 @@ import { Message } from './ChatWindow';
 import { useEffect, useState } from 'react';
 import { formatTimeDifference } from '@/lib/utils';
 import DeleteChat from './DeleteChat';
+import ProfileButton from './ProfileButton'; // adjust path if needed
 
 const Navbar = ({
   chatId,
@@ -64,6 +65,7 @@ const Navbar = ({
           className="active:scale-95 transition duration-100 cursor-pointer"
         />
         <DeleteChat redirect chatId={chatId} chats={[]} setChats={() => {}} />
+        <ProfileButton /> {/* 👈 Add this here */}
       </div>
     </div>
   );

src/components/ProfileButton.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface UserProfile {
+  name?: string;
+  email?: string;
+  picture?: string;
+}
+
+export default function ProfileButton() {
+  const [user, setUser] = useState<UserProfile | null>(null);
+
+  useEffect(() => {
+    fetch('/auth/profile')
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => setUser(data?.user))
+      .catch(() => setUser(null));
+  }, []);
+
+  if (!user) return null;
+
+  return (
+    <a href="/auth/logout" title="Log out" className="block p-2">
+      <img
+        src={user.picture}
+        alt="profile"
+        className="rounded-full w-8 h-8 border border-white/20"
+      />
+    </a>
+  );
+}

src/lib/auth0.ts

@@ -0,0 +1,6 @@
+// lib/auth0.ts
+import { Auth0Client } from '@auth0/nextjs-auth0/server';
+
+export const auth0 = new Auth0Client();
+
+console.log('💥 AUTH0_ISSUER_BASE_URL =', process.env.AUTH0_ISSUER_BASE_URL);

src/middleware.ts

@@ -0,0 +1,32 @@
+import { NextRequest, NextResponse } from "next/server"
+
+import { auth0 } from "@/lib/auth0"
+
+export async function middleware(request: NextRequest) {
+  const authRes = await auth0.middleware(request)
+
+  if (request.nextUrl.pathname.startsWith("/auth")) {
+    return authRes
+  }
+
+  const session = await auth0.getSession(request)
+
+  if (!session) {
+    // user is not authenticated, redirect to login page
+    return NextResponse.redirect(new URL("/auth/login", request.nextUrl.origin))
+  }
+
+  // the headers from the auth middleware should always be returned
+  return authRes
+}
+
+// export const config = {
+//   matcher: [
+//     /*
+//      * Match all paths except:
+//      * - public files (_next, images, icons, etc.)
+//      * - auth routes like /auth/login and /auth/callback
+//      */
+//     '/((?!_next/static|_next/image|favicon.ico|auth/.*).*)',
+//   ],
+// };