Firebase邮箱密码认证报错auth/admin-restricted-operation求助

问题详情 #

• 已实现Firebase邮箱密码登录认证功能，登录成功但无论操作成功与否都会抛出错误
• 错误信息：

Firebase: This operation is restricted to administrators only. (auth/admin-restricted-operation).

• 补充说明：邮箱已在Firebase中正常注册，但signUp函数返回400 (Bad Request)

相关代码 #

firebase.js

import firebase from "firebase/compat/app";
import "firebase/compat/firestore";
import "firebase/compat/auth";

const firebaseApp = firebase.initializeApp ({
 ...
});

const db = firebaseApp.firestore();
const auth = firebase.auth();

export { db, auth };

AuthContext.js

import React, { useContext, useEffect, useState } from 'react';
import { auth } from "../firebase";

const AuthContext = React.createContext();

export function useAuth() {
  return useContext(AuthContext);
}

export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState();
  const [loading, setLoading] = useState(true);

  function signUp(email, password) {
    return auth.createUserWithEmailAndPassword(email, password);
  }

  function login(email, password) {
    return auth.signInWithEmailAndPassword(email, password)
  }

  const value = {
    currentUser,
    signUp,
    login
  };

  useEffect(() => {
    auth.onAuthStateChanged((user) => {
      setCurrentUser(user);
      setLoading(false)
    });
  }, []);

  return <AuthContext.Provider value={value}>
    {!loading && children}
  </AuthContext.Provider>
}

SignUp.js

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { Button, Input } from "@mui/material";
import { useAuth } from '../contexts/AuthContext.js';
import { validationSchema } from '../utils/validationSchema.ts';
import { zodResolver } from '@hookform/resolvers/zod';
import { Link, useNavigate } from "react-router-dom";

const SignUp = () => {
  const {
    register,
    handleSubmit,
    formState: { errors, isDirty, isValid }
  } = useForm({
    mode: 'onChange',
    resolver: zodResolver(validationSchema),
  });

  const [error, setError] = useState("");

  const navigation = useNavigate();

  const { signUp } = useAuth();

  const onSubmit = async (data) => {
    try {
      await signUp(data.email, data.password);
      navigation("/main");
    } catch (error) {
      if (error.code === "auth/email-already-in-use") {
        setError("すでに登録されているメールアドレスです");
      } else {
        console.log(error.message);
      }
    }
  };

  return (
    <div className="form_container">
      <h1 className="title">アカウントを作成</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="form_item">
          <Input
            style={{
              width: "100%",
              fontSize: "16px",
              fontWeight: "500",
            }}
            type="email"
            id="email"
            name="email"
            placeholder="abc@sample.com"
            {...register('email')}
          />
          <p className="error_txt">{errors.email?.message}</p>
          <p className="error_txt">{error}</p>
        </div>
        <div className="form_item">
          <Input
            style={{
              width: "100%",
              fontSize: "16px",
              fontWeight: "500",
            }}
            type="password"
            id="password"
            name="password"
            placeholder="パスワード"
            {...register('password')}
          />
          <p className="error_txt">{errors.password?.message}</p>
        </div>
        <div className="form_item">
          <Input
            style={{
              width: "100%",
              fontSize: "16px",
              fontWeight: "500",
            }}
            type="password"
            id="passwordConfirm"
            name="passwordConfirm"
            placeholder="パスワード（確認用）"
            {...register('passwordConfirm')}
          />
          <p className="error_txt">{errors.passwordConfirm?.message}</p>
        </div>
        <Button
          style={{
            marginTop: "20px",
          }}
          type="submit"
          disabled={!isDirty || !isValid}
          variant="contained"
          onClick={onSubmit}
        >
          サインイン
        </Button>
      </form>
      <p className="back_txt"><Link to="/">Homeに戻る</Link></p>
    </div>
  );
}

export default SignUp;

解决方法 #

这个错误是因为Firebase控制台限制了普通用户创建账户的权限，或邮箱/密码登录方式未正确启用，按以下步骤操作：

1. 打开Firebase控制台，进入你的项目
2. 点击左侧菜单的Authentication（认证），切换到登录方式标签页
3. 找到邮箱/密码选项，确认它的状态是已启用
4. 检查该选项下是否有“仅允许管理员创建账户”之类的限制设置，若有则取消勾选
5. 确认项目初始化配置（firebase.js中的参数）是Web应用的公开配置，而非服务账户密钥（服务账户密钥仅用于后端管理员操作）

内容的提问来源于stack exchange，提问作者とんすけ