From ed3a215ee8d8696c8332c975df0db686d9d3accc Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Thu, 1 Jan 2026 20:55:55 +1000
Subject: [PATCH] feat: add sign in/dashboard links to header navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add Sign In button to desktop header (shows Dashboard when logged in)
- Add Sign In/Sign Up links to mobile menu
- Fix auth config to use BETTER_AUTH_SECRET and BETTER_AUTH_URL env vars

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/components/AppHeader.tsx  | 17 +++++++++++++-
 apps/web/src/components/MobileMenu.tsx | 31 +++++++++++++++++++++++++-
 apps/web/src/lib/auth.ts               |  2 ++
 3 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/AppHeader.tsx b/apps/web/src/components/AppHeader.tsx
index e105028..f7688b8 100644
--- a/apps/web/src/components/AppHeader.tsx
+++ b/apps/web/src/components/AppHeader.tsx
@@ -5,6 +5,7 @@ import { Header } from '@tpmjs/ui/Header/Header';
 import { Icon } from '@tpmjs/ui/Icon/Icon';
 import Link from 'next/link';
 import { useState } from 'react';
+import { useSession } from '@/lib/auth-client';
 import { MobileMenu } from './MobileMenu';
 
 /**
@@ -12,6 +13,7 @@ import { MobileMenu } from './MobileMenu';
  */
 export function AppHeader(): React.ReactElement {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const { data: session } = useSession();
 
   return (
     <>
@@ -96,6 +98,19 @@ export function AppHeader(): React.ReactElement {
               >
                 <Icon icon="github" size="md" />
               </a>
+              {session ? (
+                <Link href="/dashboard">
+                  <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
+                    Dashboard
+                  </Button>
+                </Link>
+              ) : (
+                <Link href="/sign-in">
+                  <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
+                    Sign In
+                  </Button>
+                </Link>
+              )}
               <Link href="/publish">
                 <Button variant="default" size="sm">
                   Publish Tool
@@ -118,7 +133,7 @@ export function AppHeader(): React.ReactElement {
       />
 
       {/* Mobile Menu Drawer */}
-      <MobileMenu isOpen={mobileMenuOpen} onClose={() => setMobileMenuOpen(false)} />
+      <MobileMenu isOpen={mobileMenuOpen} onClose={() => setMobileMenuOpen(false)} session={session} />
     </>
   );
 }
diff --git a/apps/web/src/components/MobileMenu.tsx b/apps/web/src/components/MobileMenu.tsx
index 740d15e..ff92b6b 100644
--- a/apps/web/src/components/MobileMenu.tsx
+++ b/apps/web/src/components/MobileMenu.tsx
@@ -8,6 +8,7 @@ import { useEffect } from 'react';
 interface MobileMenuProps {
   isOpen: boolean;
   onClose: () => void;
+  session: { user: { name: string; email: string } } | null;
 }
 
 const navLinks = [
@@ -28,7 +29,7 @@ const socialLinks = [
   { href: 'https://github.com/tpmjs/tpmjs', icon: 'github' as const, label: 'GitHub' },
 ];
 
-export function MobileMenu({ isOpen, onClose }: MobileMenuProps): React.ReactElement | null {
+export function MobileMenu({ isOpen, onClose, session }: MobileMenuProps): React.ReactElement | null {
   // Lock body scroll when menu is open
   useEffect(() => {
     if (isOpen) {
@@ -138,6 +139,34 @@ export function MobileMenu({ isOpen, onClose }: MobileMenuProps): React.ReactEle
           {/* Divider */}
           <div className="my-4 border-t border-border" />
 
+          {/* Auth links */}
+          {session ? (
+            <Link
+              href="/dashboard"
+              className="block px-3 py-3 text-foreground hover:bg-surface rounded-md transition-colors mb-4"
+              onClick={onClose}
+            >
+              Dashboard
+            </Link>
+          ) : (
+            <div className="space-y-1 mb-4">
+              <Link
+                href="/sign-in"
+                className="block px-3 py-3 text-foreground hover:bg-surface rounded-md transition-colors"
+                onClick={onClose}
+              >
+                Sign In
+              </Link>
+              <Link
+                href="/sign-up"
+                className="block px-3 py-3 text-foreground hover:bg-surface rounded-md transition-colors"
+                onClick={onClose}
+              >
+                Sign Up
+              </Link>
+            </div>
+          )}
+
           {/* Publish button */}
           <Link href="/publish" onClick={onClose}>
             <Button variant="default" size="lg" className="w-full">
diff --git a/apps/web/src/lib/auth.ts b/apps/web/src/lib/auth.ts
index 52023d5..caea21b 100644
--- a/apps/web/src/lib/auth.ts
+++ b/apps/web/src/lib/auth.ts
@@ -4,6 +4,8 @@ import { prismaAdapter } from 'better-auth/adapters/prisma';
 import { sendVerificationEmail } from './email';
 
 export const auth = betterAuth({
+  secret: process.env.BETTER_AUTH_SECRET,
+  baseURL: process.env.BETTER_AUTH_URL,
   database: prismaAdapter(prisma, {
     provider: 'postgresql',
   }),