Firebase Authentication in React: A Step-by-Step Guide with Protected Routes

EXCLUSIVE CONTENT: bit.ly/3Oj8aCI
In this video tutorial, I will show you how to make an Authentication process in React JS using Firebase 9 and React Router 6.
⏱️ Timestamps:
00:00 - Intro
00:13 - Project setup
01:57 - Form creating
03:08 - Firebase setup
04:38 - Work with .env
05:15 - Creating Sign Up and Sign In methods
08:08 - Protected route
12:53 - Creating Sign Out method
Recommended Content:
useCallback and React.memo tutorial: • Learn UseCallback and ...

[@topfeature4492]

Source code here: bit.ly/3N9AbMl
Subscribe if you like our content!

[@joeythompson4530]

Best tutorial I have seen for this! Quick and easy!

[@topfeature4492]

Glad to hear!
Thanks for your support!

[@topfeature4492]

Timestamps:
00:00 - Intro
00:13 - Project setup
01:57 - Form creating
03:08 - Firebase setup
04:38 - Work with .env
05:15 - Creating Sign Up and Sign In methods
08:08 - Protected route
12:53 - Creating Sign Out method

[@mr.artist486]

You saved my day! this is perhaps the best tutorial I have ever seen on this topic!! Thanks a lot!!!!! ❤❤

[@topfeature4492]

I'm really glad to read that!
And I appreciate your support!

[@mr.artist486]

@@topfeature4492 If possible, can you release a video tutorial on SSDLC (secure software development life cycle) best practices?

[@sethurk]

Pretty good. Short and precise. Thank you. subbed..

[@topfeature4492]

Thanks for your support and subscribed!

[@ViciaiaTutorial]

you explained very simple and clear, thanks you for the tutorial!!!!

[@topfeature4492]

I'm so happy you found it useful. Thanks!

[@ViciaiaTutorial]

@@topfeature4492 wait to see more from you ^w^

[@GenosoftTeamGen]

Great work thank you this is super neat

[@topfeature4492]

Thank you for this comment!

[@Mohit-rl4ct]

Amazing

[@topfeature4492]

Thanks for your comment!

[@DiogoLScarmagnani]

Great tutorial, very quick and simple. It works a lot. Got subscribed. I have just one question, please: Don't we need to persist access token in storage for Firebase Authentication?

[@topfeature4492]

Glad to be helpful!
What exactly storage did you mean?

[@DiogoLScarmagnani]

@@topfeature4492 sorry. I mean localStorage.

[@xczm225]

how you guys deal with view flashes when you are logged out and trying to get to any private route? for me it renders component for 0.1 sec and sends you back to '/'

[@topfeature4492]

Hi!
I tried to reproduce this behavior using my codebase, and everything seems to work correctly.
You can compare your code with the following example github.com/from-dev-to-prod/react-firebase-auth
Or, please, provide an example and I may be able to help.

[@user-ul9km8jh1h]

Hey, great video btw, how to change path when sign in true? For example email and password is true then when i click the button, how to show private page directly

[@topfeature4492]

Hi! Thanks for your support!
If I got you right, the explanation starts here: 12:09.
You need to add to your homepage (or any other public page with Login form) an extra condition to check if a user already logged in (=== if the user exists).
If so, Navigate the user to the private page, like this: return
UPD
Or you can do it directly in the Auth handler function I guess.
You can simply create an instance like: const browserHistory = createBrowserHistory()
And then just call browserHistory.push(location) after successful login

[@placek2390]

how isfetching works? i dont understand why adding this magically solve the problem with rendering private page

[@topfeature4492]

We render a private route based on the user's existence, and the ProtectedRoute component receives it from the parent component as a prop. The default user value is null, so if we try to access the private page, we will be redirected to the home page because there is no user.
After that, let's imagine, the user was successfully set on the state.
As we know, this state is defined outside the Routes tree. It means, that the state change will NOT lead to a re-render routes tree. The tree will only update after URL changes.
Because of that, the user value inside ProtectedRoute will always be null (withour re-rendering it could not get a new prop value). Even after state changing on the top level.
So, my solution here is to render the routes tree only when the user already exists. While we're fetching users asynchronously (isFetching === true) we want to return the loading component (not the routes tree).
When the user is fetched we set it to state, then, set isFetching === false, and only after that we are returning a routes tree.
It will be the first render and the user value will be correct at this moment.

[@peacemelodi1145]

Nice content are you on Instagram sir

[@topfeature4492]

Thank you! Not at the moment, but I’ll post a link when I do

[@ig_strawhats_]

please can you make vedio of user and admin login in one project

[@topfeature4492]

I guess I can try!