fix: update Firebase initialization and runtime config for environment variables

app/components/LoginModal.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
-const { signInWithEmail, signInWithGoogle, error, isLoading } = useAuth()
+const { signInWithEmail, signInWithGoogle, error } = useAuth()
 
 const isOpen = defineModel<boolean>()
 const email = ref('')
 const password = ref('')
 const loginError = ref<string | null>(null)
+const isSubmitting = ref(false)
 
 const handleEmailLogin = async () => {
   try {
     loginError.value = null
+    isSubmitting.value = true
     await signInWithEmail(email.value, password.value)
     isOpen.value = false
     // Reset form
@@ -16,27 +18,33 @@ const handleEmailLogin = async () => {
     password.value = ''
   } catch (err) {
     loginError.value = 'Login failed. Please check your credentials.'
+  } finally {
+    isSubmitting.value = false
   }
 }
 
 const handleGoogleLogin = async () => {
   try {
     loginError.value = null
+    isSubmitting.value = true
     await signInWithGoogle()
     isOpen.value = false
   } catch (err) {
     loginError.value = 'Google login failed. Please try again.'
+  } finally {
+    isSubmitting.value = false
   }
 }
 </script>
 
 <template>
-  <div
+  <Teleport to="body">
-    v-if="isOpen"
+    <div
-    class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+      v-if="isOpen"
-    @click.self="isOpen = false"
+      class="fixed left-0 top-0 z-50 flex min-h-screen w-full items-center justify-center bg-black/60 px-4"
-  >
+      @click.self="isOpen = false"
-    <div class="w-full max-w-md rounded-lg bg-slate-900 p-6 shadow-xl">
+    >
+      <div class="w-full max-w-md rounded-lg bg-slate-900 p-6 shadow-xl">
       <h2 class="mb-6 text-2xl font-bold text-white">Sign In</h2>
       
       <form @submit.prevent="handleEmailLogin" class="space-y-4">
@@ -62,10 +70,10 @@ const handleGoogleLogin = async () => {
         
         <button
           type="submit"
-          :disabled="isLoading"
+          :disabled="isSubmitting"
           class="w-full rounded-md bg-sky-600 px-4 py-2 text-white hover:bg-sky-700 disabled:opacity-50"
         >
-          {{ isLoading ? 'Signing in...' : 'Sign In' }}
+          {{ isSubmitting ? 'Signing in...' : 'Sign In' }}
         </button>
       </form>
 
@@ -77,7 +85,7 @@ const handleGoogleLogin = async () => {
 
       <button
         @click="handleGoogleLogin"
-        :disabled="isLoading"
+        :disabled="isSubmitting"
         class="w-full rounded-md border border-slate-700 bg-slate-800 px-4 py-2 text-white hover:bg-slate-700 disabled:opacity-50"
       >
         Sign in with Google
@@ -87,12 +95,13 @@ const handleGoogleLogin = async () => {
         {{ loginError || error }}
       </div>
       
-      <button
+        <button
-        @click="isOpen = false"
+          @click="isOpen = false"
-        class="mt-4 text-sm text-slate-400 hover:text-white"
+          class="mt-4 text-sm text-slate-400 hover:text-white"
-      >
+        >
-        Cancel
+          Cancel
-      </button>
+        </button>
+      </div>
     </div>
-  </div>
+  </Teleport>
 </template>

app/composables/useAuth.ts

@@ -17,17 +17,21 @@ export const useAuth = () => {
   const config = useRuntimeConfig()
 
   // Initialize Firebase if not already initialized
-  const initializeFirebase = () => {
+  const initializeFirebase = async () => {
     if (process.client && getApps().length === 0) {
+      console.log('Initializing Firebase with config:')
       const firebaseConfig = {
         apiKey: config.public.firebaseApiKey,
         authDomain: config.public.firebaseAuthDomain,
         projectId: config.public.firebaseProjectId,
         storageBucket: config.public.firebaseStorageBucket,
         messagingSenderId: config.public.firebaseMessagingSenderId,
-        appId: config.public.firebaseAppId
+        appId: config.public.firebaseAppId,
+        ...(config.public.firebaseMeasurementId
+          ? { measurementId: config.public.firebaseMeasurementId }
+          : {})
       }
-      initializeApp(firebaseConfig)
+      await initializeApp(firebaseConfig)
     }
   }
 

nuxt.config.ts

@@ -10,13 +10,14 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     public: {
-      firebaseApiKey: process.env.FIREBASE_API_KEY,
+      firebaseApiKey: process.env.NUXT_PUBLIC_FIREBASE_API_KEY,
-      firebaseAuthDomain: process.env.FIREBASE_AUTH_DOMAIN,
+      firebaseAuthDomain: process.env.NUXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
-      firebaseProjectId: process.env.FIREBASE_PROJECT_ID,
+      firebaseProjectId: process.env.NUXT_PUBLIC_FIREBASE_PROJECT_ID,
-      firebaseStorageBucket: process.env.FIREBASE_STORAGE_BUCKET,
+      firebaseStorageBucket: process.env.NUXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
-      firebaseMessagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
+      firebaseMessagingSenderId: process.env.NUXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
-      firebaseAppId: process.env.FIREBASE_APP_ID,
+      firebaseAppId: process.env.NUXT_PUBLIC_FIREBASE_APP_ID,
-      backendUrl: process.env.BACKEND_URL || 'http://localhost:3000'
+      firebaseMeasurementId: process.env.NUXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
+      backendUrl: process.env.NUXT_PUBLIC_BACKEND_URL || 'http://localhost:3000'
     }
   }
 });