无法创建属性“_canInitEmulator”

Question

我在我的 React 应用程序中为登录用户使用 firebase 身份验证。
当我输入我的电子邮件'nxxxxx2@gmail.com'并单击“登录”按钮时，它显示错误：

- Cannot create property '_canInitEmulator' on string 'nxxxxx2@gmail.com'

我需要帮助解决这个错误。

代码示例
Signup.js

- Cannot create property '_canInitEmulator' on string 'nxxxxx2@gmail.com'

认证上下文

import React, { useContext, useRef,useState} from 'react'
import { Form, Button, Card,Alert } from 'react-bootstrap'
import { useAuth } from './AuthContext';
import { AuthProvider } from './AuthContext';
export function Signup() {
    const emailRef=useRef();
    const passwordRef=useRef();
    const passwordConfirmRef=useRef();
    const { signup } =useAuth()
    const [error,setError]=useState('')
    const [loading,setLoading]=useState(false)
    // const{a}=useContext(AuthProvider);
    async function handleSubmit(e){
        e.preventDefault()
        if(passwordRef.current.value!==passwordConfirmRef.current.value)
        {
            return setError("Passwords do not match") 
        }
        try{
            setLoading(true);
            setError("");
            await signup(emailRef.current.value,passwordRef.current.value)
        }  catch(err){
            setError("Failed to create an account")
        }
        setLoading(false);
    }
    return (
       
        <div>
            <Card>
                <Card.Body className="text-center mb-4">
                    <h2>SignUp</h2>
                    {error && <Alert variant="danger">{error}</Alert>}
                    <Form onSubmit={(e)=>{handleSubmit(e)} }>
                        <Form.Group id="email">
                            <Form.Label>Email</Form.Label>
                            <Form.Control type="email" ref={emailRef}>
                            </Form.Control>
                        </Form.Group>
                        <Form.Group id="password">
                            <Form.Label>Password</Form.Label>
                            <Form.Control type="password" ref={passwordRef}>
                            </Form.Control>
                        </Form.Group>
                        <Form.Group id="passwordConfirm">
                            <Form.Label>Password Confirmation</Form.Label>
                            <Form.Control type="password" ref={passwordConfirmRef}>
                            </Form.Control>
                        </Form.Group>
                        <Button disabled={loading} type="submit" className="w-100">Sign Up</Button>
                    </Form>
                </Card.Body>
            </Card>
        </div>
    )
}

export default Signup

火力基地配置

import React,{createContext,useContext,useState,useEffect} from 'react'
import {auth} from '../Firebase'
import { createUserWithEmailAndPassword} from "firebase/auth";
// const AuthContext =React.createContext()
const AuthContext =createContext()
export function useAuth(){
    return useContext(AuthContext)
}
export function AuthProvider({children}) {
    const [currentUser,setCurrentUser]=useState()
    function signup(email,password){
        return createUserWithEmailAndPassword(email,password)
    }
    useEffect(() => {
      const unsuscribe =  auth.onAuthStateChanged(user=>{
            setCurrentUser(user)
        })
      return unsuscribe
    }, [])
    
    const value={
        currentUser,
        signup,
        
    }
    return (
        <div>
            < AuthContext.Provider value={value}>
            {children}
            </AuthContext.Provider>
        </div>
    )
}

export default AuthContext

Answer 1

使用新的 firebase 功能方法，您需要包含如下auth参数：

createUserWithEmailAndPassword(auth, email, password)

Answer 2

在 firebase 9.0^ 中，您尝试使用此方法，在几乎所有方法中，首先插入 auth 方法，然后从您的 firebase 设置导入。

//With your app initialized
import {getAuth} from 'firebase/auth'
...
const auth = getAuth()
return createUserWithEmailAndPassword(auth, email,password)

来源： https: //firebase.google.com/docs/auth/web/password-auth ?hl=pt