FIREBASE - Encase Files to redirect page only after saving data to Firestore Firebase and updating Display name

Question

Talk, guys. All right?

I am developing a web application with Firebase and as the auth() method only accepts e-mail and password, I am updating the displayname and saving the remaining data (Cpf, for example) in Firestore, at the time of user creation.

So far, so good. However, I tried to redirect you to the new page, AFTER these processes (displayname and Firestore).

First, I called the functions displayname, Firestore and redirect (I used window.location.href) in auth(’s . then). createUserWithEmailAndPassword(email, password), but redirected before performing the processes.

And then I tried to trap them into Predomises, but it didn’t work out so well.

document.getElementById('buttonSignupUser').addEventListener('click', function() {
    var email = document.getElementById('inputEmail').value;
    var password = document.getElementById('password').value;
    var password2 = document.getElementById('password2').value;

    if (password == password2){
        firebase.auth().createUserWithEmailAndPassword(email, password)
            .then(function() {
                console.log('user created');
                saveFirestore();
            }).then(function(){
                addDisplayName();
            }).then(function(){
                redirectSignup();
            })
            .catch(function(error) {
                if (error.code == 'auth/invalid-email') {
                    console.log('Por favor, digite um e-mail válido');
                } else if (error.code == 'auth/email-already-in-use') {
                    console.log('Esse e-mail já está sendo utilizado');
                } 
            });
    } else {
        console.log('As senhas devem ser iguais');
    }

})

This is the function to save the complementary data in the Firestore:

function saveFirestore(){
    var email = document.getElementById('inputEmail').value;
    var name = document.getElementById('inputName').value;
    var cpf = document.getElementById('inputCPF').value;

    var user = firebase.auth().currentUser;
    var uid;

        if (user != null) {
        uid = user.uid;  
        }

    firebase.firestore().collection('usuario').doc(uid).set({
        CPF: cpf,
        Email: email,
        Nome: name,
        Id: uid
    })
    console.log('saved firestore');
}

This is the function to update the displayname value

function addDisplayName(){
    var name = document.getElementById('inputName').value;
        firebase.auth().currentUser.updateProfile({
        displayName: name
        }).then(function() {
            console.log('Display name added');
        }).catch(function(error) {
            console.log(error);
        });
}

And lastly, this is to redirect the user

function redirectSignup(){
    window.lotacion.href='logado.html'
}

I spent the day trying to solve this, I read about chaining Promises, Promises.all, async/await, I tried to use an if/Else...but as I study Javascript recently, many subjects are still complex and so I could not solve it.

I appreciate the attention, guys. Hugs

Answer 1

Hello, Edson. Thank you for your reply.

I followed your lead and the code went like this

firebase.auth().createUserWithEmailAndPassword(email, password).then(() => { saveFirestore().then(() => { addDisplayName().then(() => { redirectSignup(); }); }); }).catch((error) => { console.log(error); })

When I went to execute him, I got that answer: "saved firestore main.js:14 Typeerror: Cannot read Property 'then' of Undefined at main.js:8 at r.g (auth.esm.js:17) Dt (auth.esm.js:20) At Ct (auth.esm.js:20) at vt.t.Xb (auth.esm.js:19) at pt (auth.esm.js:13)"

I tried to add the two functions that need to be executed first, in a Promise.all, getting the code like this:

firebase.auth().createUserWithEmailAndPassword(email, password).then(() => { Promise.all([addDisplayName(), saveFirestore()]).then(() => { redirectSignup(); }); });

Thus, the 3 functions were executed, but the redirectSignup was still performed before the 3 ended (I switched the window.location.href to a console.log(), to see when it would be called).

Do you have any idea what might be going on or a new approach you can use to solve this problem?

Thank you

Answer 2

You could try to do in the following way each of the functions:

return new Promise((resolve) => {
      resolve(result);
    });

Answer 3

Try to place one function inside the other. Leaving the function that must be performed last more internally.

    this.one().then(() => {
          this.two().then(() => { 
        });
    });

Answer 4

RESOLVED

A colleague helped me to reach a conclusion. I hope it helps more people.

firebase.auth().createUserWithEmailAndPassword(email, password) .then(() => saveFirestore()) .then(() => addDisplayName()) .then(() => redirectSignUp()) .catch(err => { console.log(err); });