Firebase登录时signInWithEmailAndPassword未定义报错如何解决？

报错触发原因 #

当前使用的是Firebase v9及以上版本的模块化SDK，signInWithEmailAndPassword是firebase/auth模块内置的登录认证API，由于你在JavaScript代码的导入语句中未引入该方法，调用时就会触发未定义的引用类错误。

Uncaught ReferenceError: signInWithEmailAndPassword is not defined at HTMLFormElement. (index.js:42)

修复方案 #

第一步：补充导入缺失的API #

修改index.js文件顶部的firebase/auth导入语句，将signInWithEmailAndPassword加入导入列表：

// 修改前
import { getAuth, onAuthStateChanged, signOut } from "firebase/auth";

// 修改后
import { getAuth, onAuthStateChanged, signOut, signInWithEmailAndPassword } from "firebase/auth";

第二步：可选逻辑优化（非强制，可避免后续逻辑异常） #

signInWithEmailAndPassword执行成功后返回的是UserCredential实例，需要主动从中取出user属性才能获取登录用户对象，原有逻辑直接使用返回值判断会存在隐式问题，可调整登录提交的回调逻辑如下：

form.addEventListener('submit', (event) => {
    event.preventDefault();
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
        const user = userCredential.user;
        if (user) {
          alert('登录成功')
        }
    })
    .catch((error) => {
        console.log('error',error)
    });
})

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