JS functions error using Firebase and React

Question

Thanks for your patience. I'm implementing Firebase on my site but when I call the signup function in FormUp.js (declared in AuthContext.js) it doesn't refer to the function definition. This causes the function called in FormUp.js, not to call its own function defined in AuthContext.js, but falls into the catch branch ('Failed to create an account'). I don't understand why. Hope someone can help me, thanks! Error:

TypeError: _firebase__WEBPACK_IMPORTED_MODULE_1__.auth.createUserWithEmailAndPassword is not a function
    at signup (bundle.js:4226:56)
    at handleSubmit (bundle.js:2575:13)
    at HTMLUnknownElement.callCallback (bundle.js:41062:18)
    at Object.invokeGuardedCallbackDev (bundle.js:41111:20)
    at invokeGuardedCallback (bundle.js:41171:35)
    at invokeGuardedCallbackAndCatchFirstError (bundle.js:41186:29)
    at executeDispatch (bundle.js:45421:7)
    at processDispatchQueueItemsInOrder (bundle.js:45453:11)
    at processDispatchQueue (bundle.js:45466:9)
    at dispatchEventsForPlugins (bundle.js:45477:7)

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at Navbar (http://localhost:3000/static/js/bundle.js:3361:76)
    at Home

Code:

AuthContext.js

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

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);
  }

  function logout() {
    return auth.signOut();
  }

  function resetPassword(email) {
    return auth.sendPasswordResetEmail(email);
  }

  function updateEmail(email) {
    return currentUser.updateEmail(email);
  }

  function updatePassword(password) {
    return currentUser.updatePassword(password);
  }

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setCurrentUser(user);
      setLoading(false);
    });

    return unsubscribe;
  }, []);

  const value = {
    currentUser,
    login,
    signup,
    logout,
    resetPassword,
    updateEmail,
    updatePassword,
  };

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

firebase.js

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

const firebaseConfig = {
  //Hidden
};

const app = initializeApp(firebaseConfig);
const auth = getAuth();
export { app, auth };

FormUp.js

import React, { useRef, useState } from "react";
import { Link } from "react-router-dom";
import {
  FormUser,
  Input,
  Label,
  Subtitle,
  TextWrapper,
  TopLine,
  FormButton,
  Credentials,
  HomePage,
  SignInLink,
  SignInText,
  RedirectSignIn,
  Credential,
} from "./Form.elements";
import { FaAngleLeft } from "react-icons/fa";
import { useAuth } from "../../contexts/AuthContext";
import { Alert } from "bootstrap";

const FormUp = ({
  primary,
  lightBg,
  lightTopLine,
  lightTextDesc,
  buttonLabel,
  description,
  topLine,
}) => {
  const emailRef = useRef();
  const passwordRef = useRef();
  const passwordConfirmRef = useRef();
  const { signup } = useAuth();
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e) {
    e.preventDefault();

    if (passwordRef.current.value !== passwordConfirmRef.current.value) {
      return setError("Password do not match");
    }

    try {
      setError("");
      setLoading(true);
      await signup(emailRef.current.value, passwordRef.current.value);
    } catch {
      setError("Failed to create an account");
    }

    setLoading(false);
  }

  return (
    <>
      <style>
        @import
        url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
      </style>
      <FormUser lightBg={lightBg} onSubmit={handleSubmit}>
        <TextWrapper>
          <HomePage href="/">
            <FaAngleLeft />
            <TopLine lightTopLine={lightTopLine}>{topLine}</TopLine>
          </HomePage>
          <Subtitle lightTextDesc={lightTextDesc}>{description}</Subtitle>
          {error && (
            <h5 style={{ color: "red", paddingBottom: "30px" }}>{error}</h5>
          )}
          <Credentials>
            <Credential id="email">
              <Label>Email</Label>
              <Input
                ref={emailRef}
                required
                type="email"
                placeholder="Email..."
              ></Input>
            </Credential>
            <Credential id="password">
              <Label>Password</Label>
              <Input
                ref={passwordRef}
                required
                type="password"
                placeholder="Password..."
              ></Input>
            </Credential>
            <Credential id="password-confirm">
              <Label>Password confirmation</Label>
              <Input
                ref={passwordConfirmRef}
                required
                type="password"
                placeholder="Password confirmation..."
              ></Input>
            </Credential>
          </Credentials>

          <FormButton disabled={loading} type="submit" big primary={primary}>
            {buttonLabel}
          </FormButton>

          <RedirectSignIn>
            <SignInText>Already have an account?</SignInText>
            <SignInLink href="/sign-in">Log in</SignInLink>
          </RedirectSignIn>
        </TextWrapper>
      </FormUser>
    </>
  );
};

export default FormUp;

Answer 1

Well, the problem here is, as the error message suggest, that auth does not have a property called createUserWithEmailAndPassword. What you are searching for is not part of auth. Your code should be something like

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

instead of

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

Check this (if you are using version 8 of the SDK, then you need to use a different approach)

https://firebase.google.com/docs/auth/web/password-auth#create_a_password-based_account

My suggestion is to add a linter to your project to easily catch these issues. In this case the issue would have been immediately visible since the import of createUserWithEmailAndPassword is not used.