DEV Community

Play Button Pause Button
Maksim Ivanov
Maksim Ivanov

Posted on • Updated on

Firebase React Authentication Tutorial For Beginners - Private Route With Hooks

Sometimes you just need to make a fast prototype and you don’t want to mess with back end, authentication, authorization and all of that.

Here is where Google’s firebase can help you.

In this tutorial I’ll show you how to connect your react app with Firebase authentication module.

It is Javascript tutorial for beginners. We are using React with hooks, React Router, React Router Dom and Firebase.

We’ll use Firebase Authentication module to handle login/sign up and React router to manage routing.

Code for this tutorial: https://github.com/satansdeer/react-firebase-auth
Discord Server: https://discord.gg/KPh8Vvb
Free React Testing Checklist: http://eepurl.com/c_8tzP

Subscribe to the channel: http://bit.ly/2QZ2UY3

Top comments (10)

Collapse
 
calacianu profile image
Cristi Calacianu

Hi Maksim,
I implemented something similar, I checked the private route component and it's the same. But I have a problem, after I refresh the app I'm redirected to the sign-in page. I think the problem is that when firebase is checking for onAuthStateChanged it takes a bit of time. Have you encountered something similar?

Thank you!

Collapse
 
dowi profile image
Dovi Winberger

I have the same problem, did you manage to find a solution?

Collapse
 
satansdeer profile image
Maksim Ivanov

You can get the authentication status, and if it's unknown - render some loader instead of the application component tree

Collapse
 
kozakrisz profile image
Krisztian Kecskes

I would stay with the Redux solution, but this video is a good refresh. Thanks!

Collapse
 
bbarbour profile image
Brian Barbour

I can't like this video enough. I recently built tbhbeyond.com a month ago and used React with Firebase. A lot of the ideas you have are very similar to what I figured out on my own. Feels good!

Collapse
 
bobmacneal profile image
Bob MacNeal

Very clean. Thank you. I particularly like the lightweight use of React.useContext which makes the currentUser available to every child component wrapped by AuthProvider thus negating the burdensome boilerplate needed using React Redux.

Collapse
 
satansdeer profile image
Maksim Ivanov

Thanks

Collapse
 
koyemanaung profile image
Ye Man Aung

Support issues for my account accept permission.

Collapse
 
draryone profile image
Dr.aryone(yemanaung)

Support for my account.

Collapse
 
satansdeer profile image
Maksim Ivanov

I've released a new video about Firebase and React, where we'll learn to fetch and upload data to Firebase database