Trying to implement user authentication using firebase into my react app. I have a firebase.js file where the register/login/logout functions are defined and then imported into the login/register screens. I don't have any errors until I actually try to register a user, then I get the error in the title.

import { useState } from 'react';
import { Link } from "react-router-dom";
import register from "../firebase";
import "../css/RegisterScreen.css";

function RegisterScreen() {

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (password == '') {
        setError("Empty Password");
    } else {
        setEmail("");
        setPassword("");
        const res = await register(email, password);
        if (res.error) setError(res.error)
    }
  };

  return (
    <div className="register">
        <h2>Sign Up</h2>
        <div className="registerContainer">
            {error ? <div>{error}</div>: null}
            <form onSubmit={handleSubmit}>
                <input 
                    type="email"
                    className="registerBox" 
                    value={email}
                    placeholder="Email Address"
                    onChange={(event) => {
                        setEmail(event.target.value);
                    }}
                />
                <input 
                    type="password" 
                    className="registerBox" 
                    value={password}
                    placeholder="Password"
                    onChange={(event) => {
                        setPassword(event.target.value);
                    }}
                />
                <button 
                    className="registerButton"
                    type="submit">
                    Register
                </button>
            </form>
            <div>
                Already registered? <Link to="/login">Login</Link>
            </div>
        </div>
    </div>
  )
}

export default RegisterScreen

This line of code in particular is where the error occurs

        const res = await register(email, password);

Here is the firebase.js file and the register function created there

import { initializeApp } from "firebase/app";
import {
     getAuth,
     createUserWithEmailAndPassword,
     signInWithEmailAndPassword,
     signOut,
 } from "firebase/auth";
 import {
     getFirestore,
     addDoc,
     collection
 } from "firebase/firestore";

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

const register = async (email, password) => {
    try {
        const userCredential = await createUserWithEmailAndPassword(auth, email, password);
        const user = userCredential.user;
        await addDoc(collection(db, "users"), {
            uid: user.uid,
            email: user.email,
        });
        return true
    } catch (error) {
        return {error: error.message}
    }
};

const login = async (email, password) => {
    try {
        const userCredential = await signInWithEmailAndPassword(auth, email, password);
        const user = userCredential.user;
        return true
    } catch (error) {
        return {error: error.message}
    }
};

const logOut = async() => {
    try {
        await signOut(auth)
        return true
    } catch (error) {
        return false
    }
};

export default {
    register,
    login,
    logOut,
    db,
    auth,
}

CodePudding user response：

You are not exporting any function from firebase.js but trying to import register function. Instead try exporting the Firebase services and defining the function in the register screen or export the function itself. Try:

// firebase.js
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

export { auth, db } // no default 

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

const handleSubmit = async (e) => {
  e.preventDefault();
  if (password == '') {
    setError("Empty Password");
  } else {
    setEmail("");
    setPassword("");
    try {
      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
      const user = userCredential.user;
      await addDoc(collection(db, "users"), {
        uid: user.uid,
        email: user.email,
      });
      console.log("User created", user)
    } catch (error) {
      console.log(error.message)
    }
  }
};