This tutorial demonstrates the use of hooks in your react application to better integrate firebase authentication and firestore data fetching. Befo...
For further actions, you may consider blocking this person and/or reporting abuse
Good Tutorial!
Just one point - if you would have public accessible sites that doesn´t need auth. you will have to wait for the initialization. That would be a poor UX in my opinion.
I ended up just using the hook and check where necessary for initialization and user.
Anyway thanks!
It should only show the loading on the initial rendering of the app. But i agree that you'd probably want to optimize this to render optimistically either using some local storage solution or simply rendering public pages before requiring the user object.
Didn´t thought that you would response that fast :D
I have updated my comment!
Awesome. Yep, I think your solution is definitely better UX. I'd advocate for a more fine-grained solution for any app mixing public / private routes.
I must admit, my solution is pure nonsence. By implementing my logic I have to wait for every page to initialize firebase until I can access the user and in reality this is even worse UX.
So maybe a good conclusion:
Thanks for your post, you did a great job bud!
Ah, bummer. Too bad. I do think there are strategies to improving this, though. Maybe a topic for another blog post...
Maybe you can put that into a context, and try to get things from localStorage or sessionStorage, if they're not there, initialize, and reuse such context in all your pages
I think this:
should be like that:
Or am I missing something here?
Great write-up! Looks like there's a typo, should be
onAuthStateChanged
, notonAuthStateChange
. Thanks!Great catch. Thanks!
Hey Ben, just learning about the Context API, so I’d like to do a quick sanity check.
In UserProfile I’m this example, assuming we don’t have any routine set up to redirect users to Login / Signup pages, shouldn’t we check that the user is not null and if it is, offer a Login button instead of the Username?
Thanks for your write up.
I may write something that corresponds to React Native land.
Thanks for this Ben, got me out of a hole!
Hi Ben, did you tried to do a phone authentification with firebase and react hooks
Hey Angie, sorry, I don't have any experience with phone authentication. From the looks of the docs it could get pretty complicated. But maybe I'll try adding phone-auth to one of my sample apps and get back to you.
I hope you will help me, thank you
unsubscribe is not a function
Hi Martini,
Ben declared unsubscribe as a function variable. firebase.auth().onAuthStateChanged(*) returns firebase.Unsubscribe which is a function. This is sparsely mentioned in the documentation.