firebase__webpack_imported_module_2__.auth.createuserwithemailandpassword is not a function.?

Question

I have the following setup to connect to firebase but for some reason in the browser console it shows that auth.createUserWithEmailAndPassword() is not a function. Is there something wrong with my code? this is login.js

import React, { useState } from 'react';
import './Login.css'
import { Link, useNavigate } from "react-router-dom";
import { auth } from "firebase/auth";


function Login() {
  const navigate = useNavigate();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const signIn = e => {
    e.preventDefault();
//some fancy firebase
  }


  const register = e => {
      e.preventDefault();
      auth
        .createUserWithEmailAndPassword(email, password)
        .then((auth) => {
          // it successfully created a new user with email and password
          if (auth) {
            navigate.push('/')
          }
      })
      .catch(error => alert(error.message))

    }

  return (
    <div className='login'>
            <Link to='/'>
                <img
                    className="login__logo"
                    src='https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/1024px-Amazon_logo.svg.png' alt=" "
                />
            </Link>
        <div className='login__container'>
          <h1>Sign-in</h1>

          <form>
            <h5>E-mail</h5>
            <input type='text' value={email} onChange={e => setEmail(e.target.value)} />

            <h5>Password</h5>
            <input type='password' value={password} onChange={e => setPassword(e.target.value)} />

            <button type='submit' onClick={signIn} className='login__signInButton'>Sign In</button>
          </form>

          <p>
            By signing-in you agree to the AMAZON FAKE CLONE Conditions of Use & Sale. Please
            see our Privacy Notice, our Cookies Notice and our Interest-Based Ads Notice.
          </p>

          <button onClick={register} className='login__registerButton'>Create your Amazon Account</button>

        </div>
    </div>
  )
}

export default Login

Also I will post my firebase.js here

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "Not mentioning my firbase config in and below",
  authDomain: "c",
  projected: " ",
  storageBucket: " ",
  messagingSenderId: " ",
  appId: " ",
  measurementId: " "
};

// const firebaseApp = firebase.initializeApp(firebaseConfig);
const firebaseApp = initializeApp(firebaseConfig);

// const db = firebaseApp.firestore();
const db = getFirestore(firebaseApp);

//const auth = getAuth(app);
//const auth = firebase.auth();
const auth = getAuth(firebaseApp);

export { db, auth };

I removed auth. from auth.createUserWithEmailAndPassword(email, password).then(cred => { console.log(cred); and now it is giving me the current error in console of browser as inspect:

Uncaught (in promise) TypeError: Cannot create property '_canInitEmulator' on string '[email protected]

Tried all solutions that were previously here in stack overflow but none worked also read through some docs of new firebase v.9.0+ modules but nothing understood yet. I would appreciate some great help for this authorization of firebase with react js.

Answer 1

The createUserWithEmailAndPassword() is a top level function in the new Firebase Modular SDK. Try importing the function as shown below:

import { createUserWithEmailAndPassword } from "firebase/auth"
import { auth } from "../firebase.js"; // update path 

const register = (e) => {
  e.preventDefault();

  // auth instance as first param
  createUserWithEmailAndPassword(auth, email, password).then((auth) => {
      // it successfully created a new user with email and password
      if (auth) {
        navigate.push('/')
      }
    })
    .catch(error => alert(error.message))
}

You must import auth instance that is getAuth() exported from Firebase file and not from "firebase/auth" SDK. The first param in createUserWithEmailAndPassword() should be this auth instance but you only have email and password params right now.