loading...
Play Button Pause Button

Firebase React Authentication Tutorial For Beginners - Private Route With Hooks

satansdeer profile image Maksim Ivanov Updated on ・1 min read

React Firebase (4 Part Series)

1) Firebase React Authentication Tutorial For Beginners - Private Route With Hooks 2) Firebase React CRUD tutorial. How to use Firebase Firestore with ReactJS. 3) Hosting Multiple Sites With Firebase - Separate React Apps For Admin and Public Pages 4) React Firebase App Complete Tutorial - Upload and Download Images From Firestore

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

React Firebase (4 Part Series)

1) Firebase React Authentication Tutorial For Beginners - Private Route With Hooks 2) Firebase React CRUD tutorial. How to use Firebase Firestore with ReactJS. 3) Hosting Multiple Sites With Firebase - Separate React Apps For Admin and Public Pages 4) React Firebase App Complete Tutorial - Upload and Download Images From Firestore

Posted on by:

satansdeer profile

Maksim Ivanov

@satansdeer

I write tutorials for developers at https://maksimivanov.com

Discussion

markdown guide
 

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!

 

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

 

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

 

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

 

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!

 

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.

 
 

Support issues for my account accept permission.

 
 

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