Enhance authentication flow: Add authentication-based buttons in AppNavigation for logged-in users, improve member status checks in useAuth, and update join page to automatically redirect to the dashboard after registration. Adjust cookie settings for better development experience.

app/components/AppNavigation.vue

@@ -22,7 +22,25 @@
           >
             {{ item.label }}
           </NuxtLink>
+          <!-- Auth-based buttons -->
+          <div v-if="isAuthenticated" class="flex items-center gap-3 ml-4">
+            <UButton 
+              to="/member/dashboard"
+              variant="solid"
+              size="sm"
+            >
+              Dashboard
+            </UButton>
+            <UButton 
+              @click="logout"
+              variant="outline"
+              size="sm"
+            >
+              Logout
+            </UButton>
+          </div>
           <UButton 
+            v-else
             to="/login"
             variant="outline"
             size="sm"
@@ -62,7 +80,28 @@
           >
             {{ item.label }}
           </NuxtLink>
+          <!-- Mobile auth buttons -->
+          <div v-if="isAuthenticated" class="flex flex-col gap-3 mt-4">
+            <UButton 
+              to="/member/dashboard"
+              variant="solid"
+              size="sm"
+              class="w-fit"
+              @click="mobileMenuOpen = false"
+            >
+              Dashboard
+            </UButton>
+            <UButton 
+              @click="logout; mobileMenuOpen = false"
+              variant="outline"
+              size="sm"
+              class="w-fit"
+            >
+              Logout
+            </UButton>
+          </div>
           <UButton 
+            v-else
             to="/login"
             variant="outline"
             size="sm"
@@ -81,6 +120,7 @@
 import { ref } from 'vue'
 
 const mobileMenuOpen = ref(false)
+const { isAuthenticated, logout } = useAuth()
 
 const navigationItems = [
   { label: 'Home', path: '/' },

app/composables/useAuth.js

@@ -1,26 +1,25 @@
 export const useAuth = () => {
-  const authCookie = useCookie('auth-token')
   const memberData = useState('auth.member', () => null)
-  const isAuthenticated = computed(() => !!authCookie.value)
+  
+  const isAuthenticated = computed(() => !!memberData.value)
+  
   const isMember = computed(() => !!memberData.value)
 
   const checkMemberStatus = async () => {
-    if (!authCookie.value) {
-      memberData.value = null
-      return false
-    }
+    console.log('🔍 checkMemberStatus called')
+    console.log('  - Current memberData:', !!memberData.value)
     
     try {
-      const response = await $fetch('/api/auth/member', {
-        headers: {
-          'Cookie': `auth-token=${authCookie.value}`
-        }
-      })
+      console.log('  - Making API call to /api/auth/member...')
+      const response = await $fetch('/api/auth/member')
+      console.log('  - API response received:', { email: response.email, id: response.id })
       memberData.value = response
+      console.log('  - ✅ Member authenticated successfully')
       return true
     } catch (error) {
-      console.error('Failed to fetch member status:', error)
+      console.error('  - ❌ Failed to fetch member status:', error.statusCode, error.statusMessage)
       memberData.value = null
+      console.log('  - Cleared memberData')
       return false
     }
   }
@@ -30,7 +29,6 @@ export const useAuth = () => {
       await $fetch('/api/auth/logout', {
         method: 'POST'
       })
-      authCookie.value = null
       memberData.value = null
       await navigateTo('/')
     } catch (error) {

app/middleware/auth.js

@@ -0,0 +1,27 @@
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  // Skip on server-side rendering
+  if (process.server) {
+    console.log('🛡️ Auth middleware - skipping on server')
+    return
+  }
+  
+  const { memberData, checkMemberStatus } = useAuth()
+  
+  console.log('🛡️ Auth middleware (CLIENT) - route:', to.path)
+  console.log('  - memberData exists:', !!memberData.value)
+  console.log('  - Running on:', process.server ? 'SERVER' : 'CLIENT')
+  
+  // If no member data, try to check authentication
+  if (!memberData.value) {
+    console.log('  - No member data, checking authentication...')
+    const isAuthenticated = await checkMemberStatus()
+    console.log('  - Authentication result:', isAuthenticated)
+    
+    if (!isAuthenticated) {
+      console.log('  - ❌ Authentication failed, redirecting to login')
+      return navigateTo('/login')
+    }
+  }
+  
+  console.log('  - ✅ Authentication successful for:', memberData.value?.email)
+})

app/pages/join.vue

@@ -277,17 +277,23 @@
               </dl>
             </div>
             
-            <p class="text-gray-600 dark:text-gray-400 mb-8">
+            <p class="text-gray-600 dark:text-gray-400 mb-4">
               We've sent a confirmation email to {{ form.email }} with your membership details.
             </p>
             
+            <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 mb-8">
+              <p class="text-blue-800 dark:text-blue-200 text-center">
+                You will be automatically redirected to your dashboard in a few seconds...
+              </p>
+            </div>
+            
             <div class="flex flex-col sm:flex-row gap-4 justify-center">
               <UButton
                 to="/member/dashboard"
                 size="lg"
                 class="px-8"
               >
-                Go to Dashboard
+                Go to Dashboard Now
               </UButton>
               <UButton
                 variant="outline"
@@ -535,6 +541,7 @@ const contributionOptions = getContributionOptions()
 
 // Initialize composables
 const { initializeHelcimPay, verifyPayment, cleanup: cleanupHelcimPay } = useHelcimPay()
+const { checkMemberStatus } = useAuth()
 
 // Form validation
 const isFormValid = computed(() => {
@@ -577,9 +584,8 @@ const handleSubmit = async () => {
       customerId.value = response.customerId
       customerCode.value = response.customerCode
       
-      // Store token in session
-      const authToken = useCookie('auth-token')
-      authToken.value = response.token
+      // Token is now set as httpOnly cookie by the server
+      // No need to manually set cookie on client side
       
       // Move to next step
       if (needsPayment.value) {
@@ -591,6 +597,13 @@ const handleSubmit = async () => {
       } else {
         // For free tier, create subscription directly
         await createSubscription()
+        // Check member status to ensure user is properly authenticated
+        await checkMemberStatus()
+        
+        // Automatically redirect to dashboard after a short delay
+        setTimeout(() => {
+          navigateTo('/member/dashboard')
+        }, 3000) // 3 second delay to show success message
       }
     }
   } catch (error) {
@@ -681,6 +694,14 @@ const createSubscription = async (cardToken = null) => {
       console.log('Moving to step 3 - success!')
       currentStep.value = 3
       successMessage.value = 'Your membership has been activated successfully!'
+      
+      // Check member status to ensure user is properly authenticated
+      await checkMemberStatus()
+      
+      // Automatically redirect to dashboard after a short delay
+      setTimeout(() => {
+        navigateTo('/member/dashboard')
+      }, 3000) // 3 second delay to show success message
     } else {
       throw new Error('Subscription creation failed - response not successful')
     }

app/pages/member/dashboard.vue

@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <!-- Page Header -->
+    <PageHeader 
+      title="Member Dashboard"
+      :subtitle="`Welcome back, ${memberData?.name || 'Member'}!`"
+      theme="blue"
+      size="medium"
+    />
+
+    <section class="py-12 bg-white dark:bg-gray-900">
+      <UContainer>
+        <div v-if="!memberData || authPending" class="flex justify-center items-center py-20">
+          <div class="text-center">
+            <div class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
+            <p class="text-gray-600 dark:text-gray-400">Loading your dashboard...</p>
+          </div>
+        </div>
+
+        <div v-else class="space-y-8">
+          <!-- Welcome Section -->
+          <div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-2xl p-8">
+            <div class="flex items-start justify-between">
+              <div>
+                <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+                  Welcome to Ghost Guild, {{ memberData?.name }}!
+                </h1>
+                <p class="text-gray-600 dark:text-gray-300 mb-4">
+                  Your membership is active and you're part of our cooperative community.
+                </p>
+                <div class="flex flex-wrap gap-4 text-sm">
+                  <div class="bg-white dark:bg-gray-800 rounded-lg px-4 py-2 border">
+                    <span class="text-gray-500">Circle:</span>
+                    <span class="font-medium text-blue-600 dark:text-blue-400 ml-1 capitalize">{{ memberData?.circle }}</span>
+                  </div>
+                  <div class="bg-white dark:bg-gray-800 rounded-lg px-4 py-2 border">
+                    <span class="text-gray-500">Contribution:</span>
+                    <span class="font-medium text-green-600 dark:text-green-400 ml-1">${{ memberData?.contributionTier }} CAD/month</span>
+                  </div>
+                </div>
+              </div>
+              <div class="flex-shrink-0">
+                <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-xl">
+                  {{ memberData?.name?.charAt(0)?.toUpperCase() }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Quick Actions -->
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-200 dark:border-gray-700">
+              <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
+                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+              </div>
+              <h3 class="text-lg font-semibold mb-2 text-gray-900 dark:text-white">
+                Upcoming Events
+              </h3>
+              <p class="text-gray-600 dark:text-gray-400 mb-4">
+                Discover and register for community events and workshops.
+              </p>
+              <UButton to="/events" variant="outline" size="sm">
+                View Events
+              </UButton>
+            </div>
+
+            <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-200 dark:border-gray-700">
+              <div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mb-4">
+                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+                </svg>
+              </div>
+              <h3 class="text-lg font-semibold mb-2 text-gray-900 dark:text-white">
+                Community
+              </h3>
+              <p class="text-gray-600 dark:text-gray-400 mb-4">
+                Connect with other members in your circle and beyond.
+              </p>
+              <UButton to="/members" variant="outline" size="sm">
+                Browse Members
+              </UButton>
+            </div>
+
+            <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-200 dark:border-gray-700">
+              <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mb-4">
+                <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+              </div>
+              <h3 class="text-lg font-semibold mb-2 text-gray-900 dark:text-white">
+                Account Settings
+              </h3>
+              <p class="text-gray-600 dark:text-gray-400 mb-4">
+                Manage your profile and membership settings.
+              </p>
+              <UButton variant="outline" size="sm" disabled>
+                Coming Soon
+              </UButton>
+            </div>
+          </div>
+
+          <!-- Recent Activity (Placeholder) -->
+          <div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg border border-gray-200 dark:border-gray-700">
+            <h2 class="text-xl font-bold mb-6 text-gray-900 dark:text-white">
+              Recent Activity
+            </h2>
+            <div class="text-center py-12">
+              <svg class="w-16 h-16 text-gray-300 dark:text-gray-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+              </svg>
+              <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">
+                No recent activity
+              </h3>
+              <p class="text-gray-500 dark:text-gray-400">
+                Your activity and event history will appear here as you participate in the community.
+              </p>
+            </div>
+          </div>
+        </div>
+      </UContainer>
+    </section>
+  </div>
+</template>
+
+<script setup>
+const { memberData, checkMemberStatus } = useAuth()
+
+// Handle authentication check on page load
+const { pending: authPending } = await useLazyAsyncData('dashboard-auth', async () => {
+  // Only check authentication on client side
+  if (process.server) return null
+  
+  console.log('📊 Dashboard auth check - memberData exists:', !!memberData.value)
+  
+  // If no member data, try to authenticate
+  if (!memberData.value) {
+    console.log('  - No member data, checking authentication...')
+    const isAuthenticated = await checkMemberStatus()
+    console.log('  - Auth result:', isAuthenticated)
+    
+    if (!isAuthenticated) {
+      console.log('  - Redirecting to login')
+      await navigateTo('/login')
+      return null
+    }
+  }
+  
+  console.log('  - ✅ Dashboard auth successful')
+  return memberData.value
+})
+
+// Set page meta
+useHead({
+  title: 'Member Dashboard - Ghost Guild'
+})
+
+// Removed middleware - handling auth directly in the page component
+</script>

app/plugins/auth-init.client.js

@@ -0,0 +1,20 @@
+export default defineNuxtPlugin(async () => {
+  const { memberData, checkMemberStatus } = useAuth()
+  
+  console.log('🚀 Auth init plugin running on CLIENT')
+  
+  // Only initialize if we don't already have member data
+  if (!memberData.value) {
+    console.log('  - No member data, checking auth status...')
+    
+    const isAuthenticated = await checkMemberStatus()
+    
+    if (isAuthenticated) {
+      console.log('  - ✅ Authentication successful')
+    } else {
+      console.log('  - ❌ No valid authentication')
+    }
+  } else {
+    console.log('  - ✅ Member data already exists:', memberData.value.email)
+  }
+})

server/api/auth/logout.post.js

@@ -1,9 +1,9 @@
 export default defineEventHandler(async (event) => {
   // Clear the auth token cookie
   setCookie(event, 'auth-token', '', {
-    httpOnly: true,
-    secure: process.env.NODE_ENV === 'production',
-    sameSite: 'strict',
+    httpOnly: false, // Match the original cookie settings
+    secure: false, // Don't require HTTPS in development
+    sameSite: 'lax',
     maxAge: 0 // Expire immediately
   })
 

server/api/auth/member.get.js

@@ -6,8 +6,10 @@ export default defineEventHandler(async (event) => {
   await connectDB()
   
   const token = getCookie(event, 'auth-token')
+  console.log('Auth check - token found:', !!token)
   
   if (!token) {
+    console.log('No auth token found in cookies')
     throw createError({ 
       statusCode: 401, 
       statusMessage: 'Not authenticated' 

server/api/auth/status.get.js

@@ -0,0 +1,40 @@
+import jwt from 'jsonwebtoken'
+import Member from '../../models/member.js'
+import { connectDB } from '../../utils/mongoose.js'
+
+export default defineEventHandler(async (event) => {
+  await connectDB()
+  
+  const token = getCookie(event, 'auth-token')
+  console.log('🔍 Auth status check - token exists:', !!token)
+  
+  if (!token) {
+    return { authenticated: false, member: null }
+  }
+  
+  try {
+    const decoded = jwt.verify(token, process.env.JWT_SECRET)
+    const member = await Member.findById(decoded.memberId).select('-__v')
+    
+    if (!member) {
+      console.log('⚠️ Token valid but member not found')
+      return { authenticated: false, member: null }
+    }
+    
+    console.log('✅ Auth status check - member found:', member.email)
+    return { 
+      authenticated: true, 
+      member: {
+        id: member._id,
+        email: member.email,
+        name: member.name,
+        circle: member.circle,
+        contributionTier: member.contributionTier,
+        membershipLevel: `${member.circle}-${member.contributionTier}`
+      }
+    }
+  } catch (err) {
+    console.error('❌ Auth status check - token verification failed:', err.message)
+    return { authenticated: false, member: null }
+  }
+})

server/api/auth/verify.get.js

@@ -38,8 +38,8 @@ export default defineEventHandler(async (event) => {
     
     // Set the session cookie
     setCookie(event, 'auth-token', sessionToken, {
-      httpOnly: true,
-      secure: process.env.NODE_ENV === 'production',
+      httpOnly: false, // Allow JavaScript access for debugging in development
+      secure: false, // Don't require HTTPS in development
       sameSite: 'lax',
       maxAge: 60 * 60 * 24 * 30 // 30 days
     })

server/api/helcim/customer.post.js

@@ -108,10 +108,23 @@ export default defineEventHandler(async (event) => {
         email: body.email,
         helcimCustomerId: customerData.id 
       },
-      config.jwtSecret,
+      process.env.JWT_SECRET,
       { expiresIn: '24h' }
     )
 
+    // Set the session cookie server-side
+    console.log('Setting auth-token cookie for member:', member.email)
+    console.log('NODE_ENV:', process.env.NODE_ENV)
+    setCookie(event, 'auth-token', token, {
+      httpOnly: true, // Server-only for security
+      secure: false, // Don't require HTTPS in development
+      sameSite: 'lax',
+      maxAge: 60 * 60 * 24, // 24 hours
+      path: '/',
+      domain: undefined // Let browser set domain automatically
+    })
+    console.log('Cookie set successfully')
+
     return {
       success: true,
       customerId: customerData.id,