0

According to the official firebase docs for implementation of google login, you create a listener/observer (onAuthStateChanged) that will emit a user once your user has successfully gone through the login process.

When signing in, this works very well. You do signInWithPopup or the full-screen variant and google takes care of collecting the relevant information and doing the login. If successful, onAuthStateChanged will emit the User object. From there, you have everything at your fingertips. It's very cool and I am super appreciative of the process here.

However, I am having trouble wrapping my brain around what happens when a user has logged in already and that logged-in user refreshes or re-approaches your app in whatever way. onAuthStateChanged will fire up, but this is an asynchronous process, meaning that, for some time, the observer will emit nothing, but that lack of response could mean two different things. This brings me to my question:

How can you prevent visually displaying that you don't know whether the user is logged in or not? Is there some part of this implementation that I don't understand?

If, for example, I wait on that user object and then assign it to some redux store stuff, don't I always have a moment at the beginning of the app where I cannot possibly know whether a user is authenticated? I have to display the login page, even if I assume we're checking because the outcome may be that the user is not logged in. There's no signal to differentiate waiting for response and there being no response (because a user is not logged in)

You only have two options from the observer:

  1. A user is emitted because the user is signed in
  2. A user is not emitted because the request hasn't been completed or they're just simply not logged in.

That last one being two different possibilities is the problem, at least in my thinking.

Any advice?

telestrial
  • 19
  • 4
  • Does this answer your question? [how can i wait for firebase to check the user is valid before sending a POST request with reactjs?](https://stackoverflow.com/questions/73627530/how-can-i-wait-for-firebase-to-check-the-user-is-valid-before-sending-a-post-req) – Marc Anthony B Oct 31 '22 at 22:22
  • @MarcAnthonyB Unfortunately, no. I will edit my post to point out that I am using onAuthStateChanged to listen for a user. The problem is that nothing is emitted in two cases: 1) A user is not logged in and 2) a user's login has not been received, yet. It's that indeterminate moment I am trying to find a solution to in order to reduce visual flashes. Thank you so much for taking the time to try to find something, though. – telestrial Oct 31 '22 at 23:07

1 Answers1

1

The answer I found for this came from another thread.

It is not possible to tell whether a user will be signed when a page starts loading, there is a work around though.

You can memorize last auth state to localStorage to persist it between sessions and between tabs.

Then, when page starts loading, you can optimistically assume the user will be re-signed in automatically and postpone the dialog until you can be sure (ie after onAuthStateChanged fires). Otherwise, if the localStorage key is empty, you can show the dialog right away.

The thread has example code, but, basically, you set a localstorage piece on successful login. Then, you can reasonably assume they will be logged in. Obviously, if credentials are revoked, this would mean the user would always see a spinner, but that's probably OK. I may add a timeout that kicks them to the login page if so much time goes by without an emitted user.

telestrial
  • 19
  • 4