fixes

pages/auth/verify.vue

@@ -121,30 +121,25 @@
 </template>
 
 <script setup lang="ts">
-import { useMobileDetection } from '~/composables/useMobileDetection';
-
 definePageMeta({
   layout: false,
   middleware: 'guest'
 });
 
-// Use unified mobile detection
+// Get route and token immediately
-const mobileDetection = useMobileDetection();
+const route = useRoute();
+const token = route.query.token as string || '';
 
-// Mobile Safari optimization classes
+// Reactive state - keep minimal reactivity
-const containerClasses = computed(() => {
-  const classes = ['verification-page'];
-  if (mobileDetection.isMobile) classes.push('is-mobile');
-  if (mobileDetection.isMobileSafari) classes.push('is-mobile-safari');
-  if (mobileDetection.isIOS) classes.push('is-ios');
-  return classes.join(' ');
-});
-
-// Reactive state
 const verifying = ref(true);
 const error = ref('');
-const route = useRoute();
+
-const token = computed(() => route.query.token as string || '');
+// Flag to prevent multiple verification attempts
+let verificationStarted = false;
+let verificationComplete = false;
+
+// Static container classes - compute once to prevent re-renders
+let containerClasses = 'verification-page';
 
 // Set page title with mobile viewport optimization
 useHead({
@@ -158,11 +153,20 @@ useHead({
   ]
 });
 
-// Verify email function
+// Verify email function - make it idempotent
 const verifyEmail = async () => {
-  if (!token.value) {
+  // Prevent multiple simultaneous verifications
+  if (verificationStarted || verificationComplete) {
+    console.log('[auth/verify] Verification already started or complete, skipping...');
+    return;
+  }
+  
+  verificationStarted = true;
+  
+  if (!token) {
     error.value = 'No verification token provided. Please check your email for the correct verification link.';
     verifying.value = false;
+    verificationComplete = true;
     return;
   }
 
@@ -170,8 +174,10 @@ const verifyEmail = async () => {
     verifying.value = true;
     error.value = '';
 
+    console.log('[auth/verify] Making verification API call...');
+
     // Call the API endpoint to verify the email
-    const response = await $fetch(`/api/auth/verify-email?token=${token.value}`, {
+    const response = await $fetch(`/api/auth/verify-email?token=${token}`, {
       method: 'GET'
     }) as any;
 
@@ -181,6 +187,9 @@ const verifyEmail = async () => {
     const email = response?.data?.email || '';
     const partialSuccess = response?.data?.partialSuccess || false;
     
+    // Mark as complete before navigation
+    verificationComplete = true;
+    
     // Redirect to success page with email info
     let redirectUrl = `/auth/verify-success`;
     const queryParams = [];
@@ -197,7 +206,8 @@ const verifyEmail = async () => {
       redirectUrl += '?' + queryParams.join('&');
     }
     
-    await navigateTo(redirectUrl);
+    // Use replace to prevent back button issues
+    await navigateTo(redirectUrl, { replace: true });
 
   } catch (err: any) {
     console.error('[auth/verify] Email verification failed:', err);
@@ -215,20 +225,48 @@ const verifyEmail = async () => {
     }
     
     verifying.value = false;
+    verificationComplete = true;
   }
 };
 
-// Retry verification
+// Retry verification - reset flags
 const retryVerification = () => {
+  verificationStarted = false;
+  verificationComplete = false;
   verifyEmail();
 };
 
-// Start verification on mount
+// Initialize mobile detection and classes AFTER component is stable
 onMounted(() => {
-  console.log('[auth/verify] Starting email verification with token:', token.value?.substring(0, 20) + '...');
+  // Only set mobile classes once to prevent re-renders
+  if (typeof window !== 'undefined') {
+    const userAgent = navigator.userAgent;
+    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+    const isIOS = /iPad|iPhone|iPod/.test(userAgent) && !(window as any).MSStream;
+    const isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);
+    const isMobileSafari = isIOS && isSafari;
+    
+    const classes = ['verification-page'];
+    if (isMobile) classes.push('is-mobile');
+    if (isMobileSafari) classes.push('is-mobile-safari');
+    if (isIOS) classes.push('is-ios');
+    containerClasses = classes.join(' ');
+  }
   
-  // Start verification process
+  console.log('[auth/verify] Component mounted with token:', token?.substring(0, 20) + '...');
-  verifyEmail();
+  
+  // Start verification process with a small delay to ensure stability
+  setTimeout(() => {
+    verifyEmail();
+  }, 100);
+});
+
+// Prevent re-verification on reactive updates
+onUpdated(() => {
+  console.log('[auth/verify] Component updated - verification state:', { 
+    started: verificationStarted, 
+    complete: verificationComplete 
+  });
 });
 </script>