web-app/src/App.vue
padreug 4feb5459cc Refactor authentication architecture to eliminate dual auth complexity
This major refactor consolidates the authentication system to use a single
source of truth, eliminating timing issues and architectural complexity
that was causing chat and payment functionality problems.

Key Changes:
• Remove old global useAuth composable and replace with useAuthService wrapper
• Update all 25+ files to use consistent auth pattern via dependency injection
• Eliminate dual auth detection workarounds from services (ChatService, PaymentService, etc.)
• Fix TypeScript errors and add proper Uint8Array conversion for Nostr private keys
• Consolidate auth state management to AuthService as single source of truth

Benefits:
• Resolves chat peer loading and message subscription timing issues
• Fixes wallet detection problems for Lightning payments
• Eliminates race conditions between global and injected auth
• Maintains API compatibility while improving architecture
• Reduces code complexity and improves maintainability

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-07 00:47:02 +02:00

83 lines
2.6 KiB
Vue

<script setup lang="ts">
import { onMounted, ref, computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import Navbar from '@/components/layout/Navbar.vue'
import Footer from '@/components/layout/Footer.vue'
import LoginDialog from '@/components/auth/LoginDialog.vue'
import { Toaster } from '@/components/ui/sonner'
import 'vue-sonner/style.css'
import { useMarketPreloader } from '@/modules/market/composables/useMarketPreloader'
import { auth } from '@/composables/useAuthService'
import { toast } from 'vue-sonner'
const route = useRoute()
const showLoginDialog = ref(false)
// Initialize preloader
const marketPreloader = useMarketPreloader()
// Relay hub initialization is now handled by the base module
// Hide navbar on login page
const showNavbar = computed(() => {
return route.path !== '/login'
})
async function handleLoginSuccess() {
showLoginDialog.value = false
toast.success('Welcome back!')
// Trigger preloading after successful login
marketPreloader.preloadMarket()
// Chat initialization is now handled by the chat module
}
onMounted(async () => {
// Initialize authentication
try {
await auth.initialize()
} catch (error) {
console.error('Failed to initialize authentication:', error)
}
// Relay hub initialization is handled by the base module
})
// Watch for authentication changes and trigger preloading
watch(() => auth.isAuthenticated.value, async (isAuthenticated) => {
if (isAuthenticated) {
if (!marketPreloader.isPreloaded.value) {
console.log('User authenticated, triggering market preload...')
marketPreloader.preloadMarket()
}
// Chat connection is now handled by the chat module automatically
}
}, { immediate: true })
</script>
<template>
<div class="min-h-screen bg-background font-sans antialiased">
<div class="relative flex min-h-screen flex-col"
style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)">
<header
v-if="showNavbar"
class="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<nav class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 flex h-14 lg:h-16 xl:h-20 items-center justify-between">
<Navbar />
</nav>
</header>
<main class="flex-1">
<router-view />
</main>
<Footer v-if="showNavbar" />
</div>
<!-- Toast notifications -->
<Toaster />
<!-- Login dialog -->
<LoginDialog v-model:is-open="showLoginDialog" @success="handleLoginSuccess" />
</div>
</template>