fix: replace Link with anchor tags for Logto auth routes

Next.js <Link> components prefetch routes on render/hover. When used
for /api/logto/sign-out, this triggered the sign-out handler during
normal navigation, clearing the session cookie and causing auth loops.

Also: wrap getAuthenticatedUser with React cache() for deduplication,
clean up diagnostic logging.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
le king fu 2026-04-08 14:31:04 -04:00
parent 9933c3678e
commit 89b3dada4a
4 changed files with 9 additions and 9 deletions

View file

@ -1,6 +1,5 @@
"use client";
import Link from "next/link";
import { useTranslation } from "react-i18next";
export default function AuthPage() {
@ -11,12 +10,12 @@ export default function AuthPage() {
<div className="text-center space-y-6 p-8">
<h1 className="text-3xl font-bold text-[#1A1A1A]">{t("app.name")}</h1>
<p className="text-[#6B6B6B]">{t("auth.subtitle")}</p>
<Link
<a
href="/api/logto/sign-in"
className="inline-block px-6 py-3 bg-[#4A90A4] text-white rounded-lg font-medium hover:bg-[#3A7389] transition-colors"
>
{t("auth.signIn")}
</Link>
</a>
</div>
</div>
);

View file

@ -48,14 +48,14 @@ export function Header({ userName }: HeaderProps) {
<div className="px-3 py-2 text-xs text-foreground/50 truncate">
{userName}
</div>
<Link
<a
href="/api/logto/sign-out"
className="flex items-center gap-2 px-3 py-2 text-sm text-rouge hover:bg-rouge/10 transition-colors"
onClick={() => setMenuOpen(false)}
>
<LogOut size={14} />
{t("auth.signOut")}
</Link>
</a>
</div>
</>
)}

View file

@ -137,13 +137,13 @@ export function Sidebar({ lists, tags }: SidebarProps) {
{/* Sign out */}
<div className="p-4 border-t border-border-light dark:border-border-dark">
<Link
<a
href="/api/logto/sign-out"
className="flex items-center gap-2 text-sm text-foreground/60 hover:text-rouge transition-colors"
>
<LogOut size={16} />
{t("auth.signOut")}
</Link>
</a>
</div>
</div>
);

View file

@ -1,7 +1,8 @@
import { cache } from 'react';
import { getLogtoContext } from '@logto/next/server-actions';
import { logtoConfig } from './logto';
export async function getAuthenticatedUser() {
export const getAuthenticatedUser = cache(async () => {
try {
const context = await getLogtoContext(logtoConfig);
@ -18,4 +19,4 @@ export async function getAuthenticatedUser() {
console.error('[auth] getLogtoContext error:', error);
return null;
}
}
});