Firebase createUserWithEmailAndPassword method returns undefined-CodePudding

I'm trying to signup using the firebase - createUserWithEmailAndPassword method, but it returns undefined when I try to log the returned value.

My config file :

import firebase from "firebase/app"
import "firebase/auth"
import "firebase/firestore"

const firebaseConfig = {
  apiKey: "xxxxxx",
  authDomain: "xxxxx",
  projectId: "xxxxxx",
  storageBucket: "xxxxxx",
  messagingSenderId: "xxxxxx",
  appId: "xxxxxxx",
}

firebase?.initializeApp(firebaseConfig)

const auth = firebase?.auth()
const firestore = firebase?.firestore()

export { auth, firestore }

My signup file:

import React, { useState } from "react"
import { auth } from "../firebase"



function Signup(props: Props) {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  console.log({ email, password })



  
  async function handleSubmit(e) {
    console.log("clicked")
    e.preventDefault()
    const res = await auth?.createUserWithEmailAndPassword(email, password)
    
    console.log(res) -> gives undefined
    
  }

  return (
    <>
      <div>
        <form onSubmit={(e) => handleSubmit(e)}>
          <input value={email} onChange={(e) => setEmail(e.target.value)} />
          <input value={password} onChange={(e) => setPassword(e.target.value)} />
          <button type='submit'>Submit</button>
        </form>
      </div>
    </>
  )
}

export default Signup

I'm using firebase version - 9.6.5

On the Firebase dashboard, I don't see anything getting logged neither I get any error on the console.

I have already read other such answers the solution is mostly around using the right package version/upgrading, deleting node modules or initializing the config carefully. I believe I'm doing these steps right.

I'm not sure what I'm doing wrong, any help in the right direction would be very helpful. thanks!

CodePudding user response：

https://firebase.google.com/docs/auth/web/password-auth#web-version-9

Please check the official Doc for v9. I think your approach corresponds to v8

I am using same approach as yours for v8 and its working Good.

Or you can try to deprecate to v8 and try your code on that.

CodePudding user response：

I've figured out the issue here, v9 documentation changes how we import and use the method,

In the config file,

import { initializeApp } from "firebase/app"
import { getFirestore } from "firebase/firestore"
import { getAuth } from "firebase/auth"

const firebaseConfig = {
  ....
}

// Initialize Firebase
initializeApp(firebaseConfig)

const db = getFirestore()

const auth = getAuth()

export { auth, db }

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


createUserWithEmailAndPassword(auth, email, password).then((i) => console.log(i))