jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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.

Browse source
This commit is contained in:
Jennie Robinson Faber 2025-09-03 16:55:01 +01:00
parent 2ca290d6e0
commit 600fef2b7c
11 changed files with 347 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

40
app/components/AppNavigation.vue
View file

@ -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: '/' },

26
app/composables/useAuth.js
View file

@ -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) {

27
app/middleware/auth.js Normal file
View file

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

31
app/pages/join.vue
View file

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

161
app/pages/member/dashboard.vue Normal file
View file

@ -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>

20
app/plugins/auth-init.client.js Normal file
View file

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