Question 250099 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Can't catch errors with createUserWithEmailAndPassword() in firebase

I couldn’t debug the thing that’s why my code doesn’t catch the error such as creating a user with the same email as he has registered before and it created a user with the same email and such. It does give the answer but not the ones that I expect like firebase/email-in-use. It gives an error in console but it has undefined to it. Here is the code:

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

export default function Content() {
   const emailSignIn = async () =>{
      try{
        createUserWithEmailAndPassword(auth, email, password)
      }catch(error){
        console.log(error)
      }
    }
    return (
    <div className="h-[5vh]">
      <input type="text" placeholder="Email address" onChange={(e)=> setEmail(e.target.value)}     className="w-full border-2 h-[4vh] border-[#e4ebe4] rounded-2xl font-normal text-base p-3 pl-5"/>
    </div>
    <div className="h-[5vh]">
       <input type="text"
    placeholder="Password (8 or more characters)" onChange={(e)=> setPassword(e.target.value)} className="w-      full border-2 h-[4vh] border-[#e4ebe4]  rounded-2xl font-normal text-base p-3 pl-5"/>
    </div>

The error in console looks like:-

app-index.js:31 undefined
window.console.error @ app-index.js:31
console.error @ hydration-error-info.js:45
emailSignIn @ content.js:24
callCallback @ react-dom.development.js:19443
invokeGuardedCallbackImpl @ react-dom.development.js:19492
invokeGuardedCallback @ react-dom.development.js:19567
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:19581
executeDispatch @ react-dom.development.js:30621
processDispatchQueueItemsInOrder @ react-dom.development.js:30653
processDispatchQueue @ react-dom.development.js:30666
dispatchEventsForPlugins @ react-dom.development.js:30677
eval @ react-dom.development.js:30867
batchedUpdates$1 @ react-dom.development.js:23747
batchedUpdates @ react-dom.development.js:27583
dispatchEventForPluginEventSystem @ react-dom.development.js:30866
dispatchEvent @ react-dom.development.js:28639
dispatchDiscreteEvent @ react-dom.development.js:28610

I have tried using error.code and error.message properties of the error but nothing works. I did also try searching for if the user with the email exists with some firebase functions but I couldn’t get the .then structure and async function behavior in Javascript. By the way, this is written in next.js 13.

Tags:

2

Answers


  1. 0

    createUserWithEmailAndPassword is async, need "await" before. Try this:

          await createUserWithEmailAndPassword(auth, email, password)
    Login or Signup to reply.
  2. 0

    Consider createUserWithEmailAndPassword() firebase method as a js promise

    Instead of

    try{
   createUserWithEmailAndPassword(auth, email, password)
}catch(error){
   console.log(error)
}

    Try to use:

    createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    console.log(error);
    // ..
  });

    Please see https://firebase.google.com/docs/auth/web/password-auth for more info

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search