Why is implementing authentication on my react app not working-CodePudding

I'm trying to implement authentication in a react app using the context API and Firebase's auth service and I'm halfway through, except for the fact that I'm not getting the desired results.

For example, if I click on the submit button without typing anything, it's supposed to throw an auth error of invalid email and show a post error message to firebase in the console. The same goes for if I type a password that's less than 6 characters. But, as it is, nothing is working. No error's showing in the console either, so, I can't seem to figure out where the problem is. I attached my app.js and UserAuthContext.js files below.

My SignUp code

import { useState } from "react";
import { useUserAuth } from "./context/UserAuthContext";
import { UserAuthContextProvider } from "./context/UserAuthContext";

function SignUp() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError ] = useState("")
  const {signUp} = useUserAuth ();

  const handleSubmit = async (e) => {
    e.preventDefault();
    try{
      await signUp(email, password);
    } catch (err){
    }
  } 

// React code omitted
}

and my UserAuthContext.js file:

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

const userAuthContext = createContext();

export function UserAuthContextProvider({ children }) {
  const [user, setUser] = useState("");

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

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

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    return () => {
      unsubscribe();
    };
  }, []);
  return (
    <userAuthContext.Provider value={{ user, signUp }}>
      {children}
    </userAuthContext.Provider>
  );
}

export function useUserAuth() {
  return useContext(userAuthContext);
}

I attached my firebase.js file, just in case

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

const firebaseConfig = {
  // Settings for init app
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export default app;

CodePudding user response：

After some questions, I think I understand your problem, when calling the createUserWithEmailAndPassword function, you are forgetting to pass the auth instance as the first parameter.

I suggest you make the following changes to the SignUp. Note that I am using the function directly from firebase and not from the React Context.

import {
    auth
} from "../firebase";
import {
  createUserWithEmailAndPassword,
} from "firebase/auth";

const handleSubmit = async (e) => {
    e.preventDefault();
    if (email && password) {
        createUserWithEmailAndPassword(auth, email, password)
            .then(() => console.log("Created!"))
            .catch((err) => console.log("Error!", err))
    }
}