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

Comments

[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!

[Dovi Winberger]

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

[Maksim Ivanov]

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

[Krisztian Kecskes]

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

[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!

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

[Maksim Ivanov]

Thanks

[Ye Man Aung]

Support issues for my account accept permission.

[Dr.aryone(yemanaung)]

Support for my account.

[Maksim Ivanov]

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