1

Fala, pessoal. Tudo bem?

Estou desenvolvendo uma aplicação web com o Firebase e como o método auth() só aceita e-mail e senha, estou atualizando o displayName e salvando o restando dos dados (cpf, por exemplo) no Firestore, no momento de criação do usuário.

Até aí, tudo certo. Porém, empaquei ao tentar redirecioná-lo para à nova página, APÓS esses processos (displayName e Firestore).

Primeiro, chamei as funções de displayName, Firestore e redirecionamento (usei o window.location.href) no .then do auth().createUserWithEmailAndPassword(email, password), mas redirecionava antes de realizar os processos.

Depois tentei encadeá-los em promises, mas não deu muito certo.

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');
    }

})

Essa é a função para salvar os dados complementares no 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');
}

Essa é a função para atualizar o valor displayName

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);
        });
}

E por último, essa é a para redirecionar o usuário

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

Passei o dia tentando resolver isso, li sobre encadeamento de promises, promises.all, async/await, tentei usar um if/else...mas como estudo Javascript há pouco tempo, muitos assuntos ainda são complexos e, por isso, não consegui resolver.

Já agradeço a atenção, pessoal. Abraços

4 Respostas 4

1

Tente colocar uma função dentro da outra. Deixando a função que deve ser realizada por último mais internamente.

    this.one().then(() => {
          this.two().then(() => { 
        });
    });
3
  • Fala, Edson. Beleza? Um colega me ajudou hoje e chegou a essa conclusão `` firebase.auth().createUserWithEmailAndPassword(email, password) .then(() => saveFirestore()) .then(() => addDisplayName()) .then(() => redirectSignUp()) .catch(err => { console.log(err); }); `` Funcionou perfeitamente 7/06/2019 às 2:56
  • 1
    Muito legal que conseguiu resolver, parece uma boa solução. Infelizmente não consegui ajudá-lo. 7/06/2019 às 2:59
  • Imagina, me ajudou sim...as dicas que você deu aqui serviram de base pra gente chegar nessa. Brigadão pela ajuda. Abração 7/06/2019 às 3:52
1

Olá, Edson. Obrigado pela resposta.

Segui sua dica e o código ficou dessa forma

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

Quando fui executá-lo, obtive essa resposta: "saved firestore main.js:14 TypeError: Cannot read property 'then' of undefined at main.js:8 at r.g (auth.esm.js:17) at 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)"

Tentei adicionar as duas funções que precisam ser executadas primeiro, em uma promise.all, ficando com o código assim:

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

Dessa forma, as 3 funções foram executadas, mas a redirectSignup ainda foi realizada antes das 3 finalizarem (troquei o window.location.href por um console.log(), para ver quando ela seria chamada).

Tem alguma ideia do que pode estar acontecendo ou uma nova abordagem que possa usar para resolver esse problema?

Obrigado

1

Você poderia tentar fazer da seguinte maneira cada uma das funções:

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

RESOLVIDO

Um colega me ajudou à chegar em uma conclusão. Espero que ajude mais pessoas.

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .