我正在用Firebase的用户名和密码方法为我的网站编写帐户创建功能.当前的实现不工作,除非我启用匿名用户创建模式,然后只创建匿名用户,这不是我想要的.为什么这段代码没有创建经过身份验证的用户,因为这是Firebase要求代码的实现方式?

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
import { initializeApp } from "firebase/app";

const SignUp = () => {

    const firebaseConfig = {
        apiKey: "{apiKey}",
        authDomain: "{domain}",
        projectId: "{projectID}",
        storageBucket: "{bucket}",
        messagingSenderId: "{id}",
        appId: "{id}",
        measurementId: "{id}"
    };
      
    const app = initializeApp(firebaseConfig);

    const userSignUp = ({ email, password }) => {
        const auth = getAuth(app);
        createUserWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
            const user = userCredential.user;
            console.log(user);
        })
        .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            console.log(errorMessage);
        });
    };

    function handleSignUp(e) {
        e.preventDefault();
        const form = e.target;
        const formData = new FormData(form);
        const formJson = Object.fromEntries(formData.entries());
        console.log(formJson.email + " " + formJson.password)
        userSignUp(formJson.email, formJson.password);
    }

    return(
        <>
            <h1>Sign Up</h1>
            <form method="post" onSubmit={handleSignUp}>
                <label>
                    Email: <input type="email" name="email"/>
                </label>
                <label>
                    Password: <input type="password" name="password"/>
                </label>
                <button type="submit">Submit</button>
            </form>
        </>
    );
}

export default SignUp

这样做的结果就是这个错误:

Jsx:20 POST https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyA4EnTbw40XnyYjHRHYjvWAxJ42STDF3cA 400(Bad Request)

这个控制台消息:

Firebase:错误(auth/admin—restricted—operation).

推荐答案

查看userSignUp的定义,您已经将其定义为解构作为第一个参数传入的对象.

const userSignUp = ({ email, password }) => {
  // ...
}

为了使这一点更清楚,它具有相同的功能,但没有简写:

const userSignUp = (opts) => {
  let { email, password } = opts;
  // ...
}

因为你用userSignUp(formJson.email, formJson.password)调用userSignUp,这意味着你正在解构一个字符串值,而不是你所期望的对象—这意味着emailpassword都将被提取为undefined.

// userSignUp("example@example.com", "someExamplePass") would mean:
let { email, password } = "example@example.com";

// email: undefined (because "".email === undefined)
// password: undefined (because "".password === undefined)

似乎当你调用createUserWithEmailAndPassword(auth, undefined, undefined),Firebase创建了一个匿名用户?这对我来说很奇怪,也是新闻,但我可以在我的Sandbox 里复制它.有趣的是,isAnonymous在该用户上没有设置为true.

您要么需要使用用途:

const userSignUp = (email, password) => { ... }

userSignUp(formJson.email, formJson.password);

const userSignUp = ({ email, password }) => { ... }

userSignUp(formJson);

Reactjs相关问答推荐

NextJS(AppRouter)、Apollo(客户端),在根布局中使用ApolloProvider时出错

有没有办法将在服务器端全局获取的一些数据传递到Next&>13应用程序目录中的客户端组件?

生成Reaction Vite应用程序的停靠容器时无法识别环境变量

FireBase Reaction Native-在呈现视图之前等待响应

在transformResponse中使用来自其他查询的缓存

如何使用 React 获取表单中的所有值?

tRPC/react-query,在所有查询完成之前,组件不会收到任何 useQuery 的结果

React-dom 的钩子调用无效.我能做些什么?

是否可以直接在 jsx 标签上使用 CSS 定义的 colored颜色 ?

无法读取未定义的属性(阅读 'editQuoteModalShown')reactredux

在遵循 react-navigation 的官方文档时收到警告消息

如何测试使用 React.createportal 呈现的组件?

FlatList 不在 React Native 中呈现项目

使用状态与复选框不同步

ReactJS 动态禁用按钮

如何在同一路由路径上重新渲染组件(链接,V6)reactjs

将 ref 转发到所有页面(路由组件)只是为了将其应用于
并具有跳过导航链接(按钮).有没有更好的办法?

React Router v6 - 访问嵌套路由和处理手写 url 的正确方法

你如何使用 refs 访问 React 中映射子项的值?

如何在按钮左下角制作 Material UI 菜单下拉菜单