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

@@ -179,6 +179,7 @@ async function handleLogout() {
           </nav>
 
           <NSpace align="center" :size="8" class="shrink-0 md:[&_.n-button]:px-4">
+            <template v-if="!authStore.loading">
               <RouterLink
                 v-if="authStore.isLoggedIn"
                 to="/upload"
@@ -305,6 +306,7 @@ async function handleLogout() {
                   </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"

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

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() {
+  async function fetchProfile(userId?: string) {
-    if (!user.value) return
+    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
+    const initialUser = session?.user ?? null
-    if (user.value) await fetchProfile()
+    if (initialUser) await fetchProfile(initialUser.id)
+    user.value = initialUser
     loading.value = false
 
     supabase.auth.onAuthStateChange((_event, session) => {
-      user.value = session?.user ?? null
+      const nextUser = session?.user ?? null
-      if (user.value) fetchProfile()
+      if (nextUser) {
-      else profile.value = null
+        fetchProfile(nextUser.id).then(() => {
+          user.value = nextUser
+        })
+      } else {
+        user.value = null
+        profile.value = null
+      }
     })
   }