Firebase9.0.2导入signInUserWithEmailAndPassword导出错误问题咨询

问题原因 #

该问题是Firebase 9模块化SDK的API命名规范调整导致的，你使用了错误的API名称：firebase/auth 包中从未导出过名为 signInUserWithEmailAndPassword 的方法，正确的邮箱密码登录方法名为 signInWithEmailAndPassword，你多写了冗余的User字段。

需要修改的两处代码 #

• 第一处：调整导入语句的方法名，删除多余的User字段
• 第二处：调用方法时传入正确的参数，不要直接传ref对象，要取ref对应DOM的输入值current.value

修正后的完整代码 #

import React, { useRef } from "react";
import "./SignUpScreen.css";
import auth from "../firebase";
import {
    createUserWithEmailAndPassword,
    signInWithEmailAndPassword,
} from "firebase/auth";

const SignUpScreen = () => {
    const emailRef = useRef(null);
    const passwordRef = useRef(null);

    const signIn = (e) => {
        e.preventDefault();
        // 修正方法名+传入正确的输入值参数
        signInWithEmailAndPassword(auth, emailRef.current.value, passwordRef.current.value)
            .then((userCredential) => {
                // Signed in
                const user = userCredential.user;
                // ...
            })
            .catch((error) => {
                alert(error);
            });
    };

    return (
        <div className='signupScreen'>
            <form>
                <h1>Sign In</h1>
                <input
                    ref={emailRef}
                    className='signin'
                    type='email'
                    placeholder='Email'
                />
                <input
                    ref={passwordRef}
                    className='signin'
                    type='password'
                    placeholder='Password'
                />
                <button onClick={signIn} className='signin' type='submit'>
                    Sign In
                </button>
            </form>
        </div>
    );
};

export default SignUpScreen;

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