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

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

[@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?

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

[@JoshuaIsrael-sl8vt]

Your a live saver, this eaxactly what l needed at the moment

[@topfeature4492]

Glad to read that!

[@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^

[@sethurk]

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

[@topfeature4492]

Thanks for your support and subscribed!

[@proflead]

Nice guide! Thanks!

[@topfeature4492]

Welcome!

[@ZiedMcHarek]

Thanks for the great video. What do you think about using the ternary conditional operator? It makes the code a bit clearer. for example {isSignUpActive? Sign Up : Sign In}

[@GenosoftTeamGen]

Great work thank you this is super neat

[@topfeature4492]

Thank you for this 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.

[@MustafaCanDemir-c4w]

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

[@Mohit-rl4ct]

Amazing

[@topfeature4492]

Thanks for your comment!

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

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

[@peacemelodi1145]

Nice content are you on Instagram sir

[@topfeature4492]

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

[@Abhishek7Shah]

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

[@topfeature4492]

I guess I can try!