feat: google auth with secret manager and testing

src/App.spec.ts

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import App from './App.vue'
+
+describe('Smoke Test', () => {
+    it('mounts properly', () => {
+        const wrapper = mount(App)
+        expect(wrapper.exists()).toBe(true)
+    })
+
+    it('renders header text', () => {
+        const wrapper = mount(App)
+        expect(wrapper.text()).toContain('HAUMDAUCHER')
+    })
+})

src/components/layout/Header.vue

@@ -11,9 +11,15 @@ const emit = defineEmits(['update:theme', 'update:lang', 'open:game'])
 const themes = ['classic', 'unicorn', 'luxury', 'win95', 'nat']
 
 import { useAuth } from '../../composables/useAuth'
-const { user, login, logout } = useAuth()
+import { watch } from 'vue'
+const { user, login, logout, error } = useAuth()
+
+watch(user, (u) => {
+  console.log("👤 Header: User changed:", u ? u.email : "null")
+})
 </script>
 
+
 <template>
   <header class="fancy-glass header-top">
     <div class="container top-content">
@@ -21,6 +27,7 @@ const { user, login, logout } = useAuth()
       <div class="controls">
         <!-- Auth Control -->
         <div class="auth-control">
+          <div v-if="error" class="auth-error" :title="error">⚠️</div>
           <button v-if="!user" @click="login" class="login-btn">
             Login
           </button>
@@ -261,4 +268,11 @@ button.active {
   font-size: 0.7rem;
   opacity: 0.7;
 }
+
+.auth-error {
+  color: #ff4444;
+  margin-right: 8px;
+  cursor: help;
+  font-size: 1.2rem;
+}
 </style>

src/composables/useAuth.ts

@@ -7,9 +7,11 @@ import { doc, onSnapshot } from 'firebase/firestore'
 const user = ref<User | null>(null)
 const isAllowed = ref(false)
 const isLoading = ref(true)
+const error = ref<string | null>(null)
 
 // Watch auth state
 auth.onAuthStateChanged((u) => {
+    console.log("🔥 Auth State Changed:", u ? u.email : "Logged Out")
     user.value = u
     if (!u) {
         isAllowed.value = false
@@ -34,7 +36,7 @@ watchEffect((onCleanup) => {
         }
     }, (err) => {
         console.error("Failed to check allowlist", err)
-        // Don't set isAllowed to false here automatically, maybe retain retry logic? for now default to false
+        error.value = "Failed to check allowlist: " + err.message
         isLoading.value = false
     })
 
@@ -43,22 +45,26 @@ watchEffect((onCleanup) => {
 
 export function useAuth() {
     const login = async () => {
+        error.value = null
         try {
             const provider = new GoogleAuthProvider()
             await signInWithPopup(auth, provider)
-        } catch (e) {
+        } catch (e: any) {
             console.error("Login failed", e)
+            error.value = e.message
             throw e
         }
     }
 
     const logout = async () => {
+        error.value = null
         try {
             await signOut(auth)
             user.value = null
             isAllowed.value = false
-        } catch (e) {
+        } catch (e: any) {
             console.error("Logout failed", e)
+            error.value = e.message
         }
     }
 
@@ -66,6 +72,7 @@ export function useAuth() {
         user,
         isAllowed: computed(() => isAllowed.value),
         isLoading: computed(() => isLoading.value),
+        error: computed(() => error.value),
         login,
         logout
     }