DEV Community

Using Firebase with React Hooks

Ben McMahen on March 30, 2019

This tutorial demonstrates the use of hooks in your react application to better integrate firebase authentication and firestore data fetching. Befo...

Read full post

Niko Montana • Aug 21 '19 • Edited

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!

Ben McMahen • Aug 21 '19

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.

Niko Montana • Aug 21 '19

Didn´t thought that you would response that fast :D

I have updated my comment!

Ben McMahen • Aug 21 '19

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.

Niko Montana • Aug 27 '19

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!

Ben McMahen • Aug 30 '19

Ah, bummer. Too bad. I do think there are strategies to improving this, though. Maybe a topic for another blog post...

Bulletninja • May 3 '20

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

TomasB • Jan 3 '20

I think this:

      // returning the unsubscribe function will ensure that
      // we unsubscribe from document changes when our id
      // changes to a different value.
      return () => unsubscribe()

should be like that:

return unsubscribe;

Or am I missing something here?

your opinions, brought to you by AI • Jun 2 '19

Great write-up! Looks like there's a typo, should be onAuthStateChanged, not onAuthStateChange. Thanks!

Ben McMahen • Jun 2 '19

Great catch. Thanks!

Michael Lustig - halfjew22@gmail.com • Sep 26 '19

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.

kiwipedro • Mar 16 '20

Thanks for this Ben, got me out of a hole!

angie.cortez • Jul 12 '19

Hi Ben, did you tried to do a phone authentification with firebase and react hooks

Ben McMahen • Jul 12 '19

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.

angie.cortez • Jul 13 '19

I hope you will help me, thank you

Martini • Oct 18 '19

unsubscribe is not a function

stoddabr • Oct 29 '19

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.