From 89b3dada4ac2f9c55ebb24f66d231195e74db767 Mon Sep 17 00:00:00 2001
From: le king fu <lekingfu@protonmail.com>
Date: Wed, 8 Apr 2026 14:31:04 -0400
Subject: [PATCH] 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>
---
 web/src/app/auth/page.tsx      | 5 ++---
 web/src/components/Header.tsx  | 4 ++--
 web/src/components/Sidebar.tsx | 4 ++--
 web/src/lib/auth.ts            | 5 +++--
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/web/src/app/auth/page.tsx b/web/src/app/auth/page.tsx
index ca163e6..c726112 100644
--- a/web/src/app/auth/page.tsx
+++ b/web/src/app/auth/page.tsx
@@ -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>
   );
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index f932bbb..31c7f2a 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -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>
             </>
           )}
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index 517fa3c..4bae51c 100644
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -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>
   );
diff --git a/web/src/lib/auth.ts b/web/src/lib/auth.ts
index 85eeb4e..0907cfb 100644
--- a/web/src/lib/auth.ts
+++ b/web/src/lib/auth.ts
@@ -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;
   }
-}
+});