Делаю проект в котором хочу реализовать возможность регистарции и входа используя 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:
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);
}
Компонент с формой регистрации:
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>
);
}
Читал форумы и там некоторые советуют включить возможность анонимной аунтентификации, я это попробовал и да - действительно работает но это не то что мне нужно. Нужно реализовать это через имейли пароль. Буду благодарен за обьяснение как исправить эту ошибку