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...
Collapse
 
nikomontana profile image
Niko Montana • 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!

Collapse
 
bmcmahen profile image
Ben McMahen

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.

Collapse
 
nikomontana profile image
Niko Montana

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

I have updated my comment!

Thread Thread
 
bmcmahen profile image
Ben McMahen

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.

Thread Thread
 
nikomontana profile image
Niko Montana

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!

Thread Thread
 
bmcmahen profile image
Ben McMahen

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

Thread Thread
 
bulletninja profile image
Bulletninja

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

Collapse
 
tomasb profile image
TomasB

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?

Collapse
 
turpana profile image
your opinions, brought to you by AI

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

Collapse
 
bmcmahen profile image
Ben McMahen

Great catch. Thanks!

Collapse
 
technoplato profile image
Michael Lustig - halfjew22@gmail.com

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.

Collapse
 
kiwipedro profile image
kiwipedro

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

Collapse
 
angiecortez profile image
angie.cortez

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

Collapse
 
bmcmahen profile image
Ben McMahen

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.

Collapse
 
angiecortez profile image
angie.cortez

I hope you will help me, thank you

Collapse
 
marcosmartinim profile image
Martini

unsubscribe is not a function

Collapse
 
stoddabr profile image
stoddabr

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.