createUserWithEmailAndPassword.then() not working-CodePudding

I was using Firebase to the register part of my project. Yesterday it was working fine, but now, the .then() of the createUserWithEmailAndPassword stop working and I don't understand why.

My code is very simple:

import React from "react";

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

class Register extends React.Component{

    onSubmit = (e) => {
        e.preventDefault();

        createUserWithEmailAndPassword(auth, "[email protected]", "password")
        .then((userCredential)=>{
            console.log(userCredential)
        })
    }

    render(){
                return(
                    <div className="add-form-container">
                        <h1 className="title">Registrarse</h1>
                        <span className="form-container">
                            <span className="input-add">
                                <p className="p-input">Usuario</p>
                                <input className="input-" id="input-user" type="text" />
                            </span>
                            <br />
                            <span className="input-add">
                                <p className="p-input">Correo electrónico</p>
                                <input className="input-" id="input-mail" type="email" />
                            </span>
                            <br />
                            <span className="input-add">
                                <p className="p-input">Contraseña</p>
                                <input className="input-" id="input-pass" type="password" />
                            </span>
                            <br />
                            <button className="add-button" onClick={this.onSubmit} id="post-button">Crear</button>
                        </span>
                    </div>
                );
            }
        }
    }
}

export default  Register;

Basically it return a console.log after create the user. The user is successfully created, but the console.log never shows. I changed it for alert() or another callback, but anything works.

Any solutions?

(I'm using only React and JavaScript)

CodePudding user response：

My guess is that a user with the email address already exists, but to know for certain what's going wrong you should implement catch in addition to then:

createUserWithEmailAndPassword(auth, "[email protected]", "password")
.then((userCredential)=>{
    console.log(userCredential)
})
.catch((error) => {
    console.error(error);
});

CodePudding user response：

Just in case my comment was actually the answer, I'll add it as an answer as well. Try adding a catch block to see if there are any errors when you try creating a new user:

createUserWithEmailAndPassword(auth, "[email protected]", "password")
  .then((userCredential)=>{
    console.log(userCredential)
  })
  .catch(err => console.log({err}))

CodePudding user response：

Using then() callback is cool, but to my experience with JavaScript.. Using await would be better in your case...

onSubmit = async (e) => {
        e.preventDefault();

       let user = await createUserWithEmailAndPassword(auth, "[email protected]", "password");
console.log(user);
}

Try this..