如何在Nuxt、Nuxt-VueFire与VueFire中正确调用Firebase Auth函数？

核心问题及修复步骤 #

1. 响应式Auth实例需通过.value访问 #

useFirebaseAuth()返回的是响应式Ref对象，不是直接的Firebase Auth实例，必须通过.value获取真实实例才能调用认证方法。同时要注意，初始化阶段auth.value可能为null，需要先做判断：

<script setup>
const auth = useFirebaseAuth()
const email = ref('')
const password = ref('')

const login = () => {
  if (!auth.value) return
  auth.value.signInWithEmailAndPassword(email.value, password.value)
}

const create = () => {
  if (!auth.value) return
  auth.value.createUserWithEmailAndPassword(email.value, password.value)
}
</script>

2. 必须在Firebase控制台启用邮箱/密码登录 #

即使Nuxt配置了auth: true，如果Firebase后台未开启对应登录方式，也会导致Auth实例异常：

• 打开Firebase控制台 → 进入「认证」模块 → 切换到「登录方法」标签页
• 找到「邮箱/密码」选项，点击启用

3. 排查服务端配置干扰（可选） #

如果你的项目暂时不需要服务端Admin功能，可以先注释掉Nuxt配置中的admin部分，排除服务端初始化对前端Auth实例的影响：

export default defineNuxtConfig({
    modules: [
        'nuxt-vuefire'
    ],
    vuefire: {
        auth: true,
        config: {
            apiKey: "...",
            authDomain: "...",
            projectId: "...",
            storageBucket: "...",
            messagingSenderId: "...",
            appId: "...",
            measurementId: "..."
        },
        // 暂时注释，优先保证前端认证正常
        // admin: {
        //     serviceAccount: '...json',
        // }
    }
})

内容的提问来源于stack exchange，提问作者sonicblis