Improve Supabase password recovery flow handling

Enhances password recovery by listening for PASSWORD_RECOVERY events and redirecting users to the reset password page. Refines session detection and token parsing in ResetPassword.vue, updates redirect logic in useSupabase.ts, and adds router guard for malformed recovery token URLs. Prevents duplicate handling in Auth.vue for recovery flows.

Author: Frederick-S

src/App.vue

@@ -92,7 +92,7 @@ import ImportExpenses from './components/ImportExpenses.vue'
 import ToastContainer from './components/ToastContainer.vue'
 import { type Expense } from './types'
 
-const { user, loading, signOut, initAuth } = useSupabase()
+const { user, loading, signOut, initAuth, supabase } = useSupabase()
 const { refreshTrigger } = useExpenseManagement()
 const { showForm, editingExpense, openFormForNew, openFormForEdit } = useExpenseForm()
 const router = useRouter()
@@ -104,6 +104,13 @@ const showExport = ref(false)
 // Initialize auth on app load
 onMounted(async () => {
   await initAuth()
+
+  // Listen for password recovery event
+  supabase.auth.onAuthStateChange((event, session) => {
+    if (event === 'PASSWORD_RECOVERY') {
+      router.push('/reset-password')
+    }
+  })
 })
 
 const handleLogout = async () => {

src/components/Auth.vue

@@ -236,6 +236,11 @@ const handleSubmit = async () => {
 onMounted(async () => {
   // Check if this is an email confirmation redirect
   const fullPath = route.fullPath
+  // Ignore password recovery flows (handled by App.vue)
+  if (fullPath.includes('type=recovery')) {
+    return
+  }
+
   if (fullPath.includes('access_token=') || fullPath.includes('refresh_token=')) {
     loading.value = true
     try {

src/components/ResetPassword.vue

@@ -96,34 +96,35 @@ const sessionError = ref('')
 // Check if user has valid session from reset link
 onMounted(async () => {
   try {
+    // First check if we already have a session (e.g. handled by Supabase client or redirected from App.vue)
+    const { data: { session } } = await supabase.auth.getSession()
+    
+    if (session) {
+      console.log('Session already established:', session.user?.email)
+      checkingSession.value = false
+      return
+    }
+
+    // Fallback: Try to parse tokens from URL if session not yet established
     // The hash contains both the route and the auth tokens
     // Format: #/reset-password#access_token=...&refresh_token=...
     const fullHash = window.location.hash
     console.log('Full hash:', fullHash)
     
     // Extract the auth params after the second #
     const hashParts = fullHash.split('#')
-    const authHash = hashParts.length > 2 ? hashParts[2] : hashParts[1]
+    // If we have multiple parts, the last one is likely the auth hash
+    const authHash = hashParts.length > 1 ? hashParts[hashParts.length - 1] : ''
     
     console.log('Auth hash:', authHash)
     
-    const hashParams = new URLSearchParams(authHash)
-    const hasAccessToken = hashParams.has('access_token')
-    const tokenType = hashParams.get('type')
-    
-    console.log('Hash params:', {
-      hasAccessToken,
-      tokenType,
-      accessToken: hashParams.get('access_token')?.substring(0, 20) + '...'
-    })
-    
-    if (!hasAccessToken) {
-      sessionError.value = '重置链接无效。请从邮件中点击完整的重置链接。'
-      checkingSession.value = false
-      return
+    if (!authHash) {
+       sessionError.value = '无法检测到有效的会话或重置令牌。'
+       checkingSession.value = false
+       return
     }
     
-    // Manually set the session using the tokens from URL
+    const hashParams = new URLSearchParams(authHash)
     const accessToken = hashParams.get('access_token')
     const refreshToken = hashParams.get('refresh_token')
     
@@ -144,6 +145,7 @@ onMounted(async () => {
         console.log('Session established successfully:', data.session.user?.email)
       }
     } else {
+      // Only show error if we really don't have a session and no tokens
       sessionError.value = '重置链接缺少必要的令牌。'
     }
   } catch (err) {

src/composables/useSupabase.ts

@@ -113,7 +113,9 @@ export function useSupabase() {
   const resetPasswordForEmail = async (email: string) => {
     // Use current origin for redirect, fallback to env variable
     const baseUrl = import.meta.env.VITE_SUPABASE_REDIRECT_URL || window.location.origin
-    const redirectUrl = baseUrl.endsWith('/') ? `${baseUrl}#/reset-password` : `${baseUrl}/#/reset-password`
+    // Note: We don't append #/reset-password here because Supabase redirect validation often fails with hash fragments.
+    // Instead, we rely on the onAuthStateChange event listener in App.vue to detect PASSWORD_RECOVERY and redirect.
+    const redirectUrl = baseUrl
 
     const { data, error } = await supabase.auth.resetPasswordForEmail(email, {
       redirectTo: redirectUrl

src/router/index.ts

@@ -49,8 +49,28 @@ const router = createRouter({
 
 // Route guard for authentication
 router.beforeEach(async (to, _from, next) => {
-  const { user, loading, initAuth } = useSupabase()
+  const { user, loading, initAuth, supabase } = useSupabase()
 
+  // Handle malformed hash redirection from Supabase (access_token interpreted as path)
+  if (to.fullPath.includes('access_token=') && to.fullPath.includes('type=recovery')) {
+    console.log('Detected recovery token in path, handling manual redirect...')
+    // Extract parameters from the path/hash
+    // The path might look like /access_token=...&type=recovery...
+    const paramsString = to.fullPath.startsWith('/') ? to.fullPath.substring(1) : to.fullPath
+    const params = new URLSearchParams(paramsString)
+    
+    const accessToken = params.get('access_token')
+    const refreshToken = params.get('refresh_token')
+    
+    if (accessToken && refreshToken) {
+      await supabase.auth.setSession({
+        access_token: accessToken,
+        refresh_token: refreshToken
+      })
+      return next('/reset-password')
+    }
+  }
+
   // Allow access to reset password page without auth check (session comes from URL)
   if (to.path === '/reset-password') {
     return next()