firebase.auth().currentUser is null

Question

I'm trying to retrieve the UID of the current logged-in firebase user in my Angular 4 app. Though, if I'm logging 'firebase.auth().currentUser' to the console I get a 'null'. So 'firebase.auth().currentUser.uid' gives an 'Cannot read property 'uid' of null' error.

According to this article https://firebase.google.com/docs/auth/web/manage-users that would mean that I'm currently not logged in. Though, I am, since I can read data from my database (my rules do not allow unauthenticated users), and the login method did not gave any errors.

I can also see that the user with uid 1 is logged in in the firebase console (.../u/1/project/my-project/authentication/users)

My database rules:

{
  "rules": {
    "users": {
      "$uid": {
        ".write": "$uid === auth.uid",
        ".read": "$uid === auth.uid"
      }
    }
   }
}

Note: I'm not using any of the Firebase login methods. I'm using my php back-end to verify users and generate a custom token for firebase, exactly as described here: https://firebase.google.com/docs/auth/admin/create-custom-tokens.

Angular 4 login code:

constructor(private afAuth: AngularFireAuth) {
    this.login();
}

login() {
    console.log('We are logging in on Firebase :)');
    firebase.auth().signInWithCustomToken(localStorage.getItem('firebase_token')).catch(function (error) {
        console.log(error.message);
        console.log('You are not logged in!');
    });
    this.user = firebase.auth().currentUser;
    console.log(firebase.auth().currentUser);
    console.log(firebase.auth().currentUser.uid);
}

Console output:

chat.service.ts:59 We are logging in on Firebase :)
chat.service.ts:65 null
ChatComponent_Host.html:1 ERROR TypeError: Cannot read property 'uid' of null
    at ChatService.Array.concat.ChatService.login (chat.service.ts:66)
    at new ChatService (chat.service.ts:23)
    at _createClass (core.es5.js:9572)
    at _createProviderInstance$1 (core.es5.js:9544)
    at resolveNgModuleDep (core.es5.js:9529)
    at NgModuleRef_.get (core.es5.js:10615)
    at resolveDep (core.es5.js:11118)
    at createClass (core.es5.js:10971)
    at createDirectiveInstance (core.es5.js:10802)
    at createViewNodes (core.es5.js:12230)
    at createRootView (core.es5.js:12125)
    at callWithDebugContext (core.es5.js:13506)
    at Object.debugCreateRootView [as createRootView] (core.es5.js:12823)
    at ComponentFactory_.create (core.es5.js:9916)
    at ComponentFactoryBoundToModule.create (core.es5.js:3333)

Answer 1

You are using the currentUser variable when firebase still has not loaded data from local. So, in order to know when the currentUser variable is initiated you can check the callback for onAuthStateChanged.

var currentUser;
firebase.auth().onAuthStateChanged(function(user){
    // user holds the reference to currentUser variable.
});