Checking if the user's browser has a token

[bkg...@gmail.com]

I'd like to check if the user is authenticated before loading an authorized page. I'm trying to make use of react-router's onEnter hook and, if unauthenticated, redirect to signin from a ref that's hooked up in the target page component. Otherwise, continue loading the page. I'm not exactly sure how to go about this using firebase.

From what I read, Auth.currentUser may return null, so I'm trying to avoid it at all cost. However, previously without firebase, I could check if the user is authenticated by seeing if they have a token in local storage, but firebase seems to encode the key which makes this almost impossible. One way that could work is by setting a custom key-value pair in local storage and listening to Auth.onAuthStateChanged to set it after signin (and remove it after signout), and then checking it in react-router's onEnter hook. But I was wondering if there's a simpler way to do this.

Suggestions? 

[Kato Richardson]

Hello,

I'm not sure why you'd avoid currentUser at all cost? It returns null when not authenticated. It's a nice synchronous way to check the state right now (e.g. when routing to a secured page).

Using onAuthStateChanged() is definitely the way to go in the long run. Also, from experience, I'd recommend tying this functionality into your routes. It's much more elegant from my experiences and avoids a lot of needless coupling. Although I'm not a React buff, so I can't walk you through best practices for doing so.

☼, Kato

--
You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-talk+unsubscribe@googlegroups.com.
To post to this group, send email to fireba...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/58d5cd56-5e73-4ac4-bef7-866b9a605814%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Kato Richardson |

Developer Programs Eng |

kato...@google.com |

775-235-8398

[gunby]

According to the docs: currentUser might also be null because the auth object has not finished initializing. If you use an observer to keep track of the user's sign-in status, you don't need to handle this case. https://firebase.google.com/docs/auth/web/manage-users

I also tried it myself, and there seems to be a ~1.0s delay before the currentUser is populated. This is a problem when, say, the user manually types in the complete url path (on a different domain) to the secure page they should have access to. There's a way to add your suggestion to react-router, but I would like to immediately load page-specific data once the page has rendered. Data loading is specific to each page.

I'm less concerned about who the current user is, or if they're still authenticated. As long as they were authenticated (and/or verified) during the last time they were on the site, I'd like to attempt loading the page-specific data and possibly redirect to the signin page if the fetch fails. However, I'd like to redirect without a fetch if possible.

Currently, I'm going through the local storage whose key starts with "firebase:authUser". If it doesn't exist, fail quickly. Of course, behind the scenes I have onAuthStateChanged to update the user's token. A bit of a code smell, but it gets the job done. I was wondering maybe there's a better way that I'm not aware of. 

On Wednesday, August 24, 2016 at 12:15:54 PM UTC-5, Kato Richardson wrote:

Hello,

I'm not sure why you'd avoid currentUser at all cost? It returns null when not authenticated. It's a nice synchronous way to check the state right now (e.g. when routing to a secured page).

Using onAuthStateChanged() is definitely the way to go in the long run. Also, from experience, I'd recommend tying this functionality into your routes. It's much more elegant from my experiences and avoids a lot of needless coupling. Although I'm not a React buff, so I can't walk you through best practices for doing so.

☼, Kato

On Wed, Aug 24, 2016 at 12:53 AM, <bkg...@gmail.com> wrote:

I'd like to check if the user is authenticated before loading an authorized page. I'm trying to make use of react-router's onEnter hook and, if unauthenticated, redirect to signin from a ref that's hooked up in the target page component. Otherwise, continue loading the page. I'm not exactly sure how to go about this using firebase.

From what I read, Auth.currentUser may return null, so I'm trying to avoid it at all cost. However, previously without firebase, I could check if the user is authenticated by seeing if they have a token in local storage, but firebase seems to encode the key which makes this almost impossible. One way that could work is by setting a custom key-value pair in local storage and listening to Auth.onAuthStateChanged to set it after signin (and remove it after signout), and then checking it in react-router's onEnter hook. But I was wondering if there's a simpler way to do this.

Suggestions? 

--
You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.

To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.

To post to this group, send email to fireba...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/58d5cd56-5e73-4ac4-bef7-866b9a605814%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Ryan Mills]

Have you tried using the latest Firebase JS library? 

The onAuthStateChanged() async response time is ~300ms in my app.

It used to be ~1s but it looks like they did some work on this.

Ryan

[gunby]

Apologies, ~1.0s is flat out wrong. It's more like 30ms for me. Even then, this operation is amortized. I also noticed that firebase doesn't attempt to retrieve the account info if there is no token in local storage. It looks like wrapping the call in a promise like in angularfire is the best solution.

Thanks.