CODEWITHSUNDEEP
javascriptfirebasefirebase-realtime-databasefirebase-authentication
Milind Mohapatra
Milind Mohapatra

Reputation: 83

Firebase web realtime database not updating

I am trying to update my firebase realtime database with user info when I am creating new user through firebase password authentication. And on successful sign in I am moving to another page. The problem is that my database is not getting updated in the above scenario however if stay in the login page and don't change to any other url; the database gets updated.

Here's my create user code

firebase
    .auth()
    .createUserWithEmailAndPassword(email, password)
    .then((userCredential) => {
        // Signed in
        var user = userCredential.user;
        if (user !== null) {
            const db = firebase.database();
            db.ref("/").set({
                uid: user.uid,
            });
        }
        // ...
    })
    .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log(errorCode, errorMessage);
        // ..
    });

And here's where I'm switching to another page,

firebase.auth().onAuthStateChanged((user) => {
    if (user) {
        // User is signed in, see docs for a list of available properties
        // https://firebase.google.com/docs/reference/js/firebase.User
        var uid = user.uid;
        console.log(user);
        //If I remove the below line, database is updated
        window.location.href = "../html/home.html";
        // ...
    } else {
        // User is signed out
        // ...
        console.log("not logged in");
    }
});

Upvotes: 1

Views: 734

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 598837

This calls is asynchronous:

db.ref("/").set({
  uid: user.uid,
});

That means that the code continues to run after the set() function returns, and asynchronously sends the data to the database. But when you change window.location, it interrupts this write operation. That's also why it works when you don't send the user to a new location: the write operation can then complete without interruption.

A quick simple fix is to flag when you're updating the database:

isCreatingUser = true; // 👈 Flag that we're creating a user
firebase
    .auth()
    .createUserWithEmailAndPassword(email, password)
    .then((userCredential) => {
        var user = userCredential.user;
        if (user !== null) {
            const db = firebase.database();
            db.ref("/").set({
                uid: user.uid,
            }).then(() => {
                isCreatingUser = false; // 👈 We're done
                window.location.href = "../html/home.html";  // 👈 Navigate away
            }).catch((e) => {
                isCreatingUser = false; // 👈 We're done
                throw e;
            })
        }
        // ...
    })
    .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log(errorCode, errorMessage);
        // ..
        isCreatingUser = false; // 👈 We're done
    });

And then:

firebase.auth().onAuthStateChanged((user) => {
    if (user && !isCreatingUser) {
        ...

You'll probably need some more synchronization, but that's the gist of it.

Upvotes: 1

Related Questions