Firebase邮箱密码认证出现auth/admin-restricted-operation错误求解决

我在个人项目中用Firebase实现邮箱密码认证，提交表单时遇到如下错误：

FirebaseError: Firebase: Error (auth/admin-restricted-operation).
at createErrorInternal (assert.ts:136:55)
at _fail (assert.ts:65:9)
at _performFetchWithErrorHandling (index.ts:177:9)
at async _performSignInRequest (index.ts:195:27)
at async createUserWithEmailAndPassword (email_and_password.ts:230:20)
at async handleSubmit (Signup.tsx:13:7)

AuthContext.tsx 组件代码 #

import { createContext, useContext, useEffect, useState } from "react";
import { auth } from "../firebase";
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  onAuthStateChanged,
} from "firebase/auth";

interface IUserData {
  email: string;
  password: string;
}

interface IContext {
  signUp: any;
  logIn: any;
  logOut: any;
  user: any;
}

const AuthContext = createContext<IContext | null>(null);

export function AuthContextProvider({ children }: any) {
  const [user, setUser]: any = useState({});

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

  function logIn({ email, password }: IUserData) {
    return signInWithEmailAndPassword(auth, email, password);
  }

  function logOut({}) {
    return signOut(auth);
  }

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    return () => {
      unsubscribe();
    };
  });

  return (
    <AuthContext.Provider value={{ signUp, logIn, logOut, user }}>
      {children}
    </AuthContext.Provider>
  );
}

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

Signup.tsx 注册表单代码 #

import React from "react";
import { Link } from "react-router-dom";
import { UserAuth } from "../../context/AuthContext";

export default function Signup() {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const { user, signUp }: any = UserAuth();

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    try {
      await signUp(email, password);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div>
      <img
        src="img.jpg"
        alt="background-image"
      />
      <div>
        <div className="max-w-[450px] h-[500px] mx-auto bg-black/75 text-white">
          <div className="max-w-[320px] mx-auto py-16">
            <h1 className="text-3xl font-bold">Sign Up</h1>
            <form onSubmit={handleSubmit} className="w-full flex flex-col py-4">
              <input
                type="email"
                placeholder="Email or phone number"
                className="p-3 my-2 bg-gray-700 rounded"
                onChange={(e) => setEmail(e.target.value)}
              />
              <input
                type="password"
                placeholder="Password"
                className="p-3 my-2 bg-gray-700 rounded"
                onChange={(e) => setPassword(e.target.value)}
              />
              <button className="bg-red-600 my-4 py-3 font-bold">
                Sign Up
              </button>
              <div className="flex justify-between text-sm text-gray-500">
                <p>
                  <input type="checkbox" className="mr-2" />
                  Remember me
                </p>
                <p>Need help ?</p>
              </div>
              <p className="py-8">
                <span className="text-gray-600">
                  Already subscribed to Filmeon?
                </span>
                <Link to="/login" className="mx-2">
                  Sign In
                </Link>
              </p>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}

此前查论坛有人建议启用匿名认证，但我需要邮箱密码认证，求解决这个错误。

这个错误主要由两个原因导致，按以下步骤逐一修复：

1. 启用Firebase邮箱/密码登录方式 #

• 打开Firebase控制台，进入你的项目
• 左侧菜单选择「Authentication」→「登录方法」
• 找到「邮箱/密码」选项，点击「启用」并保存设置

2. 修复代码参数传递不匹配问题 #

你的AuthContext中signUp函数要求接收一个包含email和password的对象，但Signup组件调用时直接传了两个独立参数，导致请求异常：
修改Signup.tsx中的handleSubmit函数：

const handleSubmit = async (e: any) => {
  e.preventDefault();
  try {
    // 改为传递对象，匹配AuthContext的signUp定义
    await signUp({ email, password });
  } catch (error) {
    console.log(error);
  }
};

3. 排查安全规则（可选） #

如果以上两步完成后仍报错，检查Firebase Auth的用户操作权限：

• 控制台「Authentication」→「设置」→「用户操作」
• 确保「创建用户」权限未设置为仅管理员

完成以上步骤后，重新测试注册功能即可解决问题。

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