Firebase javascript auth user displaying null even though user is signed in

Question

I followed the Firebase docs for web development and I used the user.updateProfile method to add a display name to the user's profile. After signing in, I used console.log(user) and it worked but when I call updateProfile(), the value of user is null. Any solutions?

Here is the relevant code:

var button = document.getElementById("profile-button");
var username = document.getElementById("username-Box").value;

var user = firebase.auth().currentUser;

auth.onAuthStateChanged(user =>{
    console.log(user);
})


function updateProfile(){
    if (user != null){
        user.updateProfile({
        displayName : username
    }).then(user => {
        console.log("Updated Successfully");
        window.location.href="chatpage.html";
    }).catch(err =>{
        console.log(err);
        window.alert(err);
    });
    }else if(user == null){
        console.log("No user signed in");
    }
}

What do you mean by "it returns null"? What returns null? Please edit the question to be specific about what you're observing. — Doug Stevenson, Dec 31 '19 at 17:25
It returns null when there is no user signed in. Your code should be prepared to handle that case. — Doug Stevenson, Dec 31 '19 at 23:13
No, my problem is that after using the "createUserWithEmailAndPassword" method, I made it redirect to this page, and now there is no current user signed in — ishaangupte, Dec 31 '19 at 23:14
It won't contain a value immediately. You should to use the listener approaches in the answers below in order to find it when the user object is first available in the newly loaded page. — Doug Stevenson, Dec 31 '19 at 23:24
https://stackoverflow.com/questions/37883981/cant-get-currentuser-on-load — Doug Stevenson, Dec 31 '19 at 23:24

benbotto · Accepted Answer · 2019-12-31T17:31:38.543

You need to wait for onAuthStateChanged to fire before assigning the user variable, otherwise the Auth object may be in an intermediate state. This is documented:

By using an observer, you ensure that the Auth object isn't in an intermediate state—such as initialization—when you get the current user. When you use signInWithRedirect, the onAuthStateChanged observer waits until getRedirectResult resolves before triggering.

You can also get the currently signed-in user by using the currentUser property. If a user isn't signed in, currentUser is null:

It's worth explicitly pointing out that the user variable you console.log in onAuthStateChanged is not the same user variable that's used in your updateProfile method. While the user maybe "logged in" when onAuthStateChanged fires, they are likely not logged in when you set your outer user variable. Therein lies your problem.

It's not clear from your code where updateProfile is called, but Peter Haddad's answer is likely the solution I would implement. However, note that with the code snippet supplied in that answer you'll also need to change your updateProfile method to accept a user parameter. Another approach would be to assign the user variable inside of onAuthStateChanged.

let user;

auth.onAuthStateChanged(u => user = u);

With that approach your updateProfile method should work as is. Just keep in mind that you may have a race condition depending on when you call updateProfile.

score 1 · Answer 2 · answered Dec 31 '19 at 16:00

1

Since console.log(user) is returning the correct user, then inside the authstatechanged call the updateProfile:

auth.onAuthStateChanged(user =>{
    console.log(user);
    updateProfile(user);
})

answered Dec 31 '19 at 16:00

Peter Haddad

78,874
25
140
134

Pass the value in updateProfile(user) then function updateProfile(user){} – Peter Haddad Dec 31 '19 at 16:50

score 0 · Answer 3 · answered Jan 01 '20 at 07:07

Based on your snippet, I am assuming that updateProfile() is your onClick/onSubmit event handler for clicking your "update profile" button.

Because of this, your user is likely to have logged in by the time they press the button and therefore it is safe to use firebase.auth().currentUser in your event handler rather than maintain a user object in the global scope.

var eleButton = document.getElementById("profile-button");
var eleUsername = document.getElementById("username-Box");

function updateProfile() {
  let user = firebase.auth().currentUser;

  if (!user) {
    alert('Please log in before clicking update profile!')
    return;
  }

  // get current value of '#username-Box'
  let username = eleUsername.value.trim();

  if (!username) {
    alert('Please enter a valid username!')
    return;
  }

  user.updateProfile({
    displayName : username
  }).then(user => {
    console.log("Updated Successfully");
    window.location.href="chatpage.html";
  }).catch(err =>{
    console.log(err);
    window.alert(err);
  });
}

In your original code, you had the following:

var user = firebase.auth().currentUser; // <-- global-scope variable

auth.onAuthStateChanged(user =>{ // <-- function-scope variable
    console.log(user);
})

When onAuthStateChanged fires, it does log the value of user, but it sets and logs it's own version of user, not the user variable in the global-scope.

If you wanted to update the global-scope version, you need to rename the variable used in your onAuthStateChanged handler so that it doesn't shadow the user global-scope variable.

var user = firebase.auth().currentUser; // <-- global-scope variable

auth.onAuthStateChanged(_user =>{ // <-- function-scope variable
    user = _user;
    console.log(user);
})

Also note how I rewrote your `updateProfile()` function to 'fail-fast'. Rather than have `if (condition) { /* ...lots of code... */ } else { throw new Error() }`, it's better to do `if (!condition) { throw new Error() } /*... remainder of code ...*/`. This will make it easier to find what is actually causing an error by putting the failing condition and error right next to each other in your code while also reducing the amount of indentation your code has. — samthecodingman, Jan 01 '20 at 07:23

Firebase javascript auth user displaying null even though user is signed in

3 Answers3

Linked

Related