我有以下连接到firebase的设置,但出于某种原因,在浏览器控制台中,它显示auth.createUserWithEmailAndPassword()不是函数.我的代码有问题吗?这是登录.js

import React, { useState } from 'react';
import './Login.css'
import { Link, useNavigate } from "react-router-dom";
import { auth } from "firebase/auth";


function Login() {
  const navigate = useNavigate();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const signIn = e => {
    e.preventDefault();
//some fancy firebase
  }


  const register = e => {
      e.preventDefault();
      auth
        .createUserWithEmailAndPassword(email, password)
        .then((auth) => {
          // it successfully created a new user with email and password
          if (auth) {
            navigate.push('/')
          }
      })
      .catch(error => alert(error.message))

    }

  return (
    <div className='login'>
            <Link to='/'>
                <img
                    className="login__logo"
                    src='https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/1024px-Amazon_logo.svg.png' alt=" "
                />
            </Link>
        <div className='login__container'>
          <h1>Sign-in</h1>

          <form>
            <h5>E-mail</h5>
            <input type='text' value={email} onChange={e => setEmail(e.target.value)} />

            <h5>Password</h5>
            <input type='password' value={password} onChange={e => setPassword(e.target.value)} />

            <button type='submit' onClick={signIn} className='login__signInButton'>Sign In</button>
          </form>

          <p>
            By signing-in you agree to the AMAZON FAKE CLONE Conditions of Use & Sale. Please
            see our Privacy Notice, our Cookies Notice and our Interest-Based Ads Notice.
          </p>

          <button onClick={register} className='login__registerButton'>Create your Amazon Account</button>

        </div>
    </div>
  )
}

export default Login

我也会发布我的firebase.这里是js

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "Not mentioning my firbase config in and below",
  authDomain: "c",
  projected: " ",
  storageBucket: " ",
  messagingSenderId: " ",
  appId: " ",
  measurementId: " "
};

// const firebaseApp = firebase.initializeApp(firebaseConfig);
const firebaseApp = initializeApp(firebaseConfig);

// const db = firebaseApp.firestore();
const db = getFirestore(firebaseApp);

//const auth = getAuth(app);
//const auth = firebase.auth();
const auth = getAuth(firebaseApp);

export { db, auth };

我删除了auth.来自auth.createUserWithEmailAndPassword(邮箱,密码).然后(cred=&gt;{console.log(cred);现在它给出了浏览器控制台中的当前错误:

Uncaught (in promise) TypeError: Cannot create property '_canInitEmulator' on string 'test1234@gmail.com

try 了以前在stack overflow中使用的所有解决方案,但都不起作用.阅读了firebase v.9.0+新模块的一些文档,但仍不了解.对于firebase与react js的授权,我将不胜感激.

推荐答案

createUserWithEmailAndPassword()是新Firebase Modular SDK的顶级功能.try 导入函数,如下所示:

import { createUserWithEmailAndPassword } from "firebase/auth"
import { auth } from "../firebase.js"; // update path 

const register = (e) => {
  e.preventDefault();

  // auth instance as first param
  createUserWithEmailAndPassword(auth, email, password).then((auth) => {
      // it successfully created a new user with email and password
      if (auth) {
        navigate.push('/')
      }
    })
    .catch(error => alert(error.message))
}

您必须导入从Firebase文件而不是从"firebase/auth" SDK导出的auth个实例.createUserWithEmailAndPassword()中的第一个参数应该是这个auth实例,但现在只有emailpassword个参数.

Javascript相关问答推荐

如何在 cypress 中使用静态嵌套循环

Javascript json定制

为什么useState触发具有相同值的呈现

Ember.js 5.4更新会话存储时如何更新组件变量

如何使用子字符串在数组中搜索重复项

用JS从平面文件构建树形 struct 的JSON

在Java中寻找三次Bezier曲线上的点及其Angular

DOM不自动更新,尽管运行倒计时TS,JS

如何将zoom 变换应用到我的d3力有向图?

自定义图表工具提示以仅显示Y值

在表单集中保存更改时删除';禁用';

Socket.IO在刷新页面时执行函数两次

我的NavLink活动类在REACT-ROUTER-V6中出现问题

bootstrap S JS赢得了REACT中的函数/加载

无法向甜甜圈图表上的ChartJSImage添加可见标签

无限循环,因为变量不断被重新声明为其原始值

需要将源自AJAX的数据添加到表中

如何遍历数组并在json中添加字段

为什么它是Object.hasOwn(x,y)!==Reflect.ownKeys(X).如果x是CSSStyleClaimation对象,而y是像';z-index';这样的连字符属性,则包含(Y)?

如何在Xbox中撤销令牌