From 6fadd63336c604afcf70bc4438219420ce374906 Mon Sep 17 00:00:00 2001
From: Mplan <mplan_@outlook.com>
Date: Sun, 24 May 2026 16:25:26 +0800
Subject: [PATCH] fix: resolve auth initialization race and username flicker on
 login

Always initialize auth before mounting the app so loading state completes
and onAuthStateChange is registered on every route. Gate header auth UI
on !loading to avoid flicker during email confirm and password reset
flows. Load profile before setting user ref so displayUsername shows the
correct name immediately instead of flashing the email.
---
 src/components/layout/AppHeader.vue | 70 +++++++++++++++--------------
 src/main.ts                         |  9 +---
 src/stores/auth.ts                  | 26 +++++++----
 3 files changed, 55 insertions(+), 50 deletions(-)

diff --git a/src/components/layout/AppHeader.vue b/src/components/layout/AppHeader.vue
index 414e90b..4375cf4 100644
--- a/src/components/layout/AppHeader.vue
+++ b/src/components/layout/AppHeader.vue
@@ -179,20 +179,21 @@ async function handleLogout() {
           </nav>
 
           <NSpace align="center" :size="8" class="shrink-0 md:[&_.n-button]:px-4">
-            <RouterLink
-              v-if="authStore.isLoggedIn"
-              to="/upload"
-              class="no-underline"
-            >
-              <span
-                class="inline-flex h-8 items-center border border-sky-200 bg-sky-100 px-3 text-sm font-medium uppercase tracking-[0.12em] text-sky-800 shadow-[4px_4px_0_0_rgba(14,165,233,0.14)] transition-colors hover:bg-sky-50 hover:text-sky-900 md:h-10 md:px-4"
-                :class="route.name === 'upload' ? 'ring-1 ring-sky-300' : ''"
+            <template v-if="!authStore.loading">
+              <RouterLink
+                v-if="authStore.isLoggedIn"
+                to="/upload"
+                class="no-underline"
               >
-                上传
-              </span>
-            </RouterLink>
+                <span
+                  class="inline-flex h-8 items-center border border-sky-200 bg-sky-100 px-3 text-sm font-medium uppercase tracking-[0.12em] text-sky-800 shadow-[4px_4px_0_0_rgba(14,165,233,0.14)] transition-colors hover:bg-sky-50 hover:text-sky-900 md:h-10 md:px-4"
+                  :class="route.name === 'upload' ? 'ring-1 ring-sky-300' : ''"
+                >
+                  上传
+                </span>
+              </RouterLink>
 
-            <template v-if="authStore.isLoggedIn">
+              <template v-if="authStore.isLoggedIn">
               <div
                 class="relative"
                 @mouseenter="openAccountCard"
@@ -281,29 +282,30 @@ async function handleLogout() {
               </div>
             </template>
 
-            <template v-else>
-              <RouterLink
-                to="/login"
-                class="no-underline"
-              >
-                <span
-                  class="inline-flex h-8 items-center border border-slate-200 bg-white/80 px-3 text-sm font-medium text-slate-700 shadow-[3px_3px_0_0_rgba(15,23,42,0.06)] transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-800 md:h-10 md:px-4"
-                  :class="route.name === 'login' ? 'bg-teal-50 ring-1 ring-teal-200 text-teal-800' : ''"
+              <template v-else>
+                <RouterLink
+                  to="/login"
+                  class="no-underline"
                 >
-                  登录
-                </span>
-              </RouterLink>
-              <RouterLink
-                to="/register"
-                class="no-underline"
-              >
-                <span
-                  class="inline-flex h-8 items-center border border-sky-200 bg-sky-100 px-3 text-sm font-medium text-sky-800 shadow-[4px_4px_0_0_rgba(14,165,233,0.14)] transition-colors hover:bg-sky-50 hover:text-sky-900 md:h-10 md:px-4"
-                  :class="route.name === 'register' ? 'ring-1 ring-sky-300' : ''"
+                  <span
+                    class="inline-flex h-8 items-center border border-slate-200 bg-white/80 px-3 text-sm font-medium text-slate-700 shadow-[3px_3px_0_0_rgba(15,23,42,0.06)] transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-800 md:h-10 md:px-4"
+                    :class="route.name === 'login' ? 'bg-teal-50 ring-1 ring-teal-200 text-teal-800' : ''"
+                  >
+                    登录
+                  </span>
+                </RouterLink>
+                <RouterLink
+                  to="/register"
+                  class="no-underline"
                 >
-                  注册
-                </span>
-              </RouterLink>
+                  <span
+                    class="inline-flex h-8 items-center border border-sky-200 bg-sky-100 px-3 text-sm font-medium text-sky-800 shadow-[4px_4px_0_0_rgba(14,165,233,0.14)] transition-colors hover:bg-sky-50 hover:text-sky-900 md:h-10 md:px-4"
+                    :class="route.name === 'register' ? 'ring-1 ring-sky-300' : ''"
+                  >
+                    注册
+                  </span>
+                </RouterLink>
+              </template>
             </template>
           </NSpace>
         </div>
@@ -338,7 +340,7 @@ async function handleLogout() {
             图鉴
           </RouterLink>
           <RouterLink
-            v-if="authStore.isLoggedIn"
+            v-if="!authStore.loading && authStore.isLoggedIn"
             to="/profile"
             class="shrink-0 px-3 py-2 text-sm font-medium tracking-[0.12em] uppercase transition-colors"
             :class="route.name === 'profile' ? activeNavClass : inactiveNavClass"
diff --git a/src/main.ts b/src/main.ts
index db7ff14..8cc76a3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -14,12 +14,7 @@ app.use(pinia)
 
 const authStore = useAuthStore()
 
-if (['/auth/confirm', '/auth/reset-password'].includes(window.location.pathname)) {
+authStore.initialize().then(() => {
   app.use(router)
   app.mount('#app')
-} else {
-  authStore.initialize().then(() => {
-    app.use(router)
-    app.mount('#app')
-  })
-}
+})
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index 5bd1902..cc0fcab 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -12,12 +12,13 @@ export const useAuthStore = defineStore('auth', () => {
   const isLoggedIn = computed(() => !!user.value)
   const isAdmin = computed(() => profile.value?.role === 'admin')
 
-  async function fetchProfile() {
-    if (!user.value) return
+  async function fetchProfile(userId?: string) {
+    const id = userId ?? user.value?.id
+    if (!id) return
     const { data } = await supabase
       .from('profiles')
       .select('*')
-      .eq('id', user.value.id)
+      .eq('id', id)
       .single()
     if (data) {
       profile.value = data as Profile
@@ -53,8 +54,8 @@ export const useAuthStore = defineStore('auth', () => {
       }
       throw error
     }
+    await fetchProfile(data.user.id)
     user.value = data.user
-    await fetchProfile()
   }
 
   async function register(email: string, password: string, username: string) {
@@ -122,14 +123,21 @@ export const useAuthStore = defineStore('auth', () => {
 
   async function initialize() {
     const { data: { session } } = await supabase.auth.getSession()
-    user.value = session?.user ?? null
-    if (user.value) await fetchProfile()
+    const initialUser = session?.user ?? null
+    if (initialUser) await fetchProfile(initialUser.id)
+    user.value = initialUser
     loading.value = false
 
     supabase.auth.onAuthStateChange((_event, session) => {
-      user.value = session?.user ?? null
-      if (user.value) fetchProfile()
-      else profile.value = null
+      const nextUser = session?.user ?? null
+      if (nextUser) {
+        fetchProfile(nextUser.id).then(() => {
+          user.value = nextUser
+        })
+      } else {
+        user.value = null
+        profile.value = null
+      }
     })
   }