Firebase retrieve the user data stored in local storage as firebase:authUser:

Question

I am working with Firebase and AngularJS. I am using Auth authentication for google login and i completed the process.Now i need to retrieve the user data that is stored in local storage like firebase:authUser:.

Once i login with google account in local storage you have firebase:authUser:.created and i need to fetch these details.

I used the following method to store user data

firebase.database().ref('users/' + user.uid).set
({
     name: user.displayName,
     email: user.email,
     token: token
});

Solution 1

The documentation for the Web SDK does not mention that upon successfully authentication, Firebase sets the User object in localStorage. The API reference does not mention this either. I discovered this the same way you have by examining localStorage while trying to configure my Vue app with Firebase.

To retrieve the user from localStorage, you can do the following:

const authUser = Object.keys(window.localStorage)
  .filter(item => item.startsWith('firebase:authUser'))[0]

You could have multiple entries in localStorage so that's the reason for filter()

Edit: See Metallica's answer below.

---

Update (2018-02-21): It seems there is now a section (Web) Authentication State Persistence . Unsure if this was there when I originally posted my answer, but I'm updating this answer to link it since this questions gets moderate attention.

Update 2 (2018-02-21): As stated under Overview of persistence behavior :

If no user is signed in and no persistence is specified, the default setting will be applied (local in a browser app).

So localStorage is the default which confirms my original answer before the Firebase JS SDK was open sourced.

Solution 2

Just to augment @Franciso Mateo's answer: the mentioned filtering, just returns the key (string) with which the serialized user object is stored in local storage. To get the actual deserialized user object, we need to read the item with this key from local storage:

const userKey = Object.keys(window.localStorage)
  .filter(it => it.startsWith('firebase:authUser'))[0];
const user = userKey ? JSON.parse(localStorage.getItem(userKey)) : undefined;

Solution 3

To get a user's profile information, use the properties of an instance of User. For example:

var user = firebase.auth().currentUser;
var name, email, photoURL, uid;

    if(user != null) {
       name = user.displayName;
       email = user.email;
       photoUrl = user.photoURL;
       uid = user.uid;
    }

If you'd like to learn more about how to manage users in Firebase using Web SDK, visit this documentation.

Comments

[Abraham]

I already tried this but it return null for currentUser. But i find data stored in local storage as with key firebase:authUser: val For more clarification **Please note that am using gmail authentication and saving the values received after that **

[dsl101]

Note this has changed recently to use indexedDB: groups.google.com/forum/#!topic/firebase-talk/wgSvjniKPQI

[Yogi]

I just tried with auth persistence set to SESSION and user data is stored to sessionStorage and not localStorage (which makes sense). So it's important to know which type of auth persistences (NONE,SESSION,LOCAL) is in use. up vote..

[anasqadrei]

How secure tokens are when they're stored locally (LOCAL persistence)?

[Cisco]

@anasqadrei I don't think security particularly matters in this case (session vs local) since you should still validate the authenticity of the token server side. How you application is intended to be used determines which storage behavior to use.

[Jonathan]

There are several ways to check this via a promise: stackoverflow.com/a/67046722/271450