feat: add sign in/dashboard links to header navigation

- 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>
This commit is contained in:
Ajax Davis 2026-01-01 20:55:55 +10:00
parent 6060492169
commit ed3a215ee8
3 changed files with 48 additions and 2 deletions

View file

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

View file

@ -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">

View file

@ -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',
}),