This post showcases a quick and easy way to make a Firebase-authenticated user available throughout your React web app.
We are using here plain Re...
For further actions, you may consider blocking this person and/or reporting abuse
From the point of view of the person who does it for the first time, it's the most accessible learning material I have found. It's worth noting, for people who, like me read this article over a year later, that in version 9 of firebase, the onAuthStateChanged function takes the Auth instance as the first parameter.
What's the benefit of implementing this Context in contrast to using the
useAuthState
hook that comes with the firebase dependency? github.com/CSFrequency/react-fireb...I was unaware of this package. The benefit from my point of view is not having an extra dependency for this simple topic, but this is certainly a debatable point. I could imagine that there is no benefit from a functional perspective, but I haven't yet looked into the package you mentioned.
Anyway, thanks for pointing out the hooks package! After working on a small Firebase app, I wrote this post where this simple hook described here came up almost incidentally.
You certainly have a good point about having extra dependencies. Admittedly I haven't explored the react-firebase-hooks in detail (i.e firestore, storage etc..). However I will say that a benefit to the Context approach is containing other side effects when the Auth state does change, for example solving the problem where auth.currentUser is
null
when the app starts and private routesJust so you know, there's a reddit user reposting this content as his own on multiple subs:
reddit.com/r/reactjs/comments/nr8i...
Oh no, he spammed a lot of sub-reddits with my post. I'll report him.
Thx for letting me know. Seems that the reddit post has been deleted in the meantime...
Thank you for the post. Very clear and helpful!
for some reason i get a warning saying i am using a hook inside a useEffect. i am using typescript.
Thanks a lot @dchowitz but I need to use the user.uid in an API call before the render in useEffect() - how can I do this?
Hi Will, there are different options here. You could make the
useEffect
which wraps the API call dependent onuser.id
like this:This calls the effect every time the
user.id
changes... Hope this helps!I don't know why but for some strange reason, I have to login again after I refresh. Is anyone facing the same issue..
It looks like my onAuthStateChanged not calling after signIn or signUp. May I know possible reason for the same.
What is purpose of
(React.createContext < ContextState) | (undefined > undefined);