DEV Community

Cover image for React + Firebase: A Simple Context-based Authentication Provider

React + Firebase: A Simple Context-based Authentication Provider

Denny Christochowitz on May 29, 2021

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...
Read full post
Collapse
 
patryksztuczka profile image
Patryk Sztuczka • • Edited

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.

Collapse
 
tomzacchia profile image
tomzacchia •

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...

Collapse
 
dchowitz profile image
Denny Christochowitz •

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.

Collapse
 
tomzacchia profile image
tomzacchia •

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 routes

Collapse
 
mahamoti1129 profile image
Mahamoti1129 •

Just so you know, there's a reddit user reposting this content as his own on multiple subs:

reddit.com/r/reactjs/comments/nr8i...

Collapse
 
dchowitz profile image
Denny Christochowitz •

Oh no, he spammed a lot of sub-reddits with my post. I'll report him.

Collapse
 
dchowitz profile image
Denny Christochowitz •

Thx for letting me know. Seems that the reddit post has been deleted in the meantime...

Collapse
 
digizeph profile image
Mingwei Zhang •

Thank you for the post. Very clear and helpful!

Collapse
 
theooliveira profile image
Theo Oliveira • • Edited

for some reason i get a warning saying i am using a hook inside a useEffect. i am using typescript.

Collapse
 
willuk profile image
Will Halling •

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?

Collapse
 
dchowitz profile image
Denny Christochowitz •

Hi Will, there are different options here. You could make the useEffect which wraps the API call dependent on user.id like this:

React.useEffect(() => {
  if (user.id) {
    // perform API call
  }
}, [user.id]);
Enter fullscreen mode Exit fullscreen mode

This calls the effect every time the user.id changes... Hope this helps!

Collapse
 
shreeshivpatel profile image
Shreeshiv Patel •

I don't know why but for some strange reason, I have to login again after I refresh. Is anyone facing the same issue..

Collapse
 
shreeshivpatel profile image
Shreeshiv Patel •

It looks like my onAuthStateChanged not calling after signIn or signUp. May I know possible reason for the same.

Collapse
 
shreeshivpatel profile image
Shreeshiv Patel •

What is purpose of
(React.createContext < ContextState) | (undefined > undefined);