Github repo: https://github.com/aidanandrews22/daps_simulation
In my nuxt.config.ts I’m using runtimeConfig.public.firebase i’m getting all of the config info from my .env which is located in my frontend folder (github repo) and using useRuntimeConfig() to access that data in my firebase-manual.ts file. With Firestore and Storage it works completely fine. But with Authentication it works only when HARDCODING the config information in the runtimeConfig.public.firebase. It is weird because whenever I console.log in nuxt config file and in firebase-manual.ts all of the API keys are being shown in console, which means that they work in both scenarios (while the config is hardcoded or the config is imported from .env file). But authentication works only when hardcoded. How to fix it?
——-nuxt.config.ts——-
<code>dotenv.config({ path: path.resolve(__dirname, './.env') })
import * as dotenv from 'dotenv'
import { defineNuxtConfig } from 'nuxt/config'
import * as path from 'path'
import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'
import { getAuth } from 'firebase/auth'
console.log('Firebase config in nuxt.config.ts:', {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
// ... other config values
export default defineNuxtConfig({
src: `https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_MAPS_API_KEY}&callback=initMap`,
GOOGLE_MAPS_API_KEY: process.env.GOOGLE_MAPS_API_KEY,
modules: ['@unocss/nuxt'],
css: ['./assets/css/main.css'],
googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY,
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.FIREBASE_APP_ID,
measurementId: process.env.FIREBASE_MEASUREMENT_ID,
plugins: ['~/plugins/firebase-manual.ts'],
<code>dotenv.config({ path: path.resolve(__dirname, './.env') })
import * as dotenv from 'dotenv'
import { defineNuxtConfig } from 'nuxt/config'
import * as path from 'path'
import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'
import { getAuth } from 'firebase/auth'
console.log('Firebase config in nuxt.config.ts:', {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
// ... other config values
})
export default defineNuxtConfig({
head: {
script: [
{
src: `https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_MAPS_API_KEY}&callback=initMap`,
async: true,
defer: true,
},
],
},
env: {
GOOGLE_MAPS_API_KEY: process.env.GOOGLE_MAPS_API_KEY,
},
modules: ['@unocss/nuxt'],
css: ['./assets/css/main.css'],
build: {
postcss: {
postcssOptions: {
plugins: {
'postcss-import': {},
'unocss/postcss': {},
autoprefixer: {},
},
},
},
},
runtimeConfig: {
public: {
googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY,
firebase: {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.FIREBASE_APP_ID,
measurementId: process.env.FIREBASE_MEASUREMENT_ID,
},
},
},
plugins: ['~/plugins/firebase-manual.ts'],
})
</code>
dotenv.config({ path: path.resolve(__dirname, './.env') })
import * as dotenv from 'dotenv'
import { defineNuxtConfig } from 'nuxt/config'
import * as path from 'path'
import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'
import { getAuth } from 'firebase/auth'
console.log('Firebase config in nuxt.config.ts:', {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
// ... other config values
})
export default defineNuxtConfig({
head: {
script: [
{
src: `https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_MAPS_API_KEY}&callback=initMap`,
async: true,
defer: true,
},
],
},
env: {
GOOGLE_MAPS_API_KEY: process.env.GOOGLE_MAPS_API_KEY,
},
modules: ['@unocss/nuxt'],
css: ['./assets/css/main.css'],
build: {
postcss: {
postcssOptions: {
plugins: {
'postcss-import': {},
'unocss/postcss': {},
autoprefixer: {},
},
},
},
},
runtimeConfig: {
public: {
googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY,
firebase: {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.FIREBASE_APP_ID,
measurementId: process.env.FIREBASE_MEASUREMENT_ID,
},
},
},
plugins: ['~/plugins/firebase-manual.ts'],
})
——-firebase-manual.ts——-
<code>import { getApps, initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore'
import { getStorage } from 'firebase/storage'
export default defineNuxtPlugin((nuxtApp) => {
const config = useRuntimeConfig()
console.log(config.public.firebase.apiKey)
const firebaseApp = apps.length === 0 ? initializeApp(config.public.firebase) : apps[0]
const auth = getAuth(firebaseApp)
const firestore = getFirestore(firebaseApp)
const storage = getStorage(firebaseApp)
nuxtApp.provide('firebase', { firebaseApp, auth, firestore, storage })
<code>import { getApps, initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore'
import { getStorage } from 'firebase/storage'
export default defineNuxtPlugin((nuxtApp) => {
const config = useRuntimeConfig()
console.log(config.public.firebase.apiKey)
const apps = getApps()
const firebaseApp = apps.length === 0 ? initializeApp(config.public.firebase) : apps[0]
const auth = getAuth(firebaseApp)
const firestore = getFirestore(firebaseApp)
const storage = getStorage(firebaseApp)
nuxtApp.provide('firebase', { firebaseApp, auth, firestore, storage })
})
</code>
import { getApps, initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore'
import { getStorage } from 'firebase/storage'
export default defineNuxtPlugin((nuxtApp) => {
const config = useRuntimeConfig()
console.log(config.public.firebase.apiKey)
const apps = getApps()
const firebaseApp = apps.length === 0 ? initializeApp(config.public.firebase) : apps[0]
const auth = getAuth(firebaseApp)
const firestore = getFirestore(firebaseApp)
const storage = getStorage(firebaseApp)
nuxtApp.provide('firebase', { firebaseApp, auth, firestore, storage })
})