Implement multi-step registration process: Add step indicators, error handling, and payment processing for membership registration. Enhance form validation and user feedback with success and error messages. Refactor state management for improved clarity and maintainability.

app/composables/useAuth.js

@@ -0,0 +1,48 @@
+export const useAuth = () => {
+  const authCookie = useCookie('auth-token')
+  const memberData = useState('auth.member', () => null)
+  const isAuthenticated = computed(() => !!authCookie.value)
+  const isMember = computed(() => !!memberData.value)
+
+  const checkMemberStatus = async () => {
+    if (!authCookie.value) {
+      memberData.value = null
+      return false
+    }
+
+    try {
+      const response = await $fetch('/api/auth/member', {
+        headers: {
+          'Cookie': `auth-token=${authCookie.value}`
+        }
+      })
+      memberData.value = response
+      return true
+    } catch (error) {
+      console.error('Failed to fetch member status:', error)
+      memberData.value = null
+      return false
+    }
+  }
+
+  const logout = async () => {
+    try {
+      await $fetch('/api/auth/logout', {
+        method: 'POST'
+      })
+      authCookie.value = null
+      memberData.value = null
+      await navigateTo('/')
+    } catch (error) {
+      console.error('Logout failed:', error)
+    }
+  }
+
+  return {
+    isAuthenticated: readonly(isAuthenticated),
+    isMember: readonly(isMember),
+    memberData: readonly(memberData),
+    checkMemberStatus,
+    logout
+  }
+}