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

Glad to hear! Thanks for your support!

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

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

Glad to read that!

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

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

Thanks for your support and subscribed!

Welcome!

Thank you for this comment!

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

@@topfeature4492 sorry. I mean localStorage.

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

Thanks for your comment!

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.

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.

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

I guess I can try!