Question 282258 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to protect the page from an unauthorized user in React js using Firebase Authentication

I am protecting a page using firebase authentication. If user is logged in then i am showing the page otherwise i am returning user to the login page.

There are many other pages i want to protect from unauthorized users.

I want to ask, the way i am protecting the page is it ok? should i go ahead with the same code or is there any other way that is called best practices.

Here is the code:

import { useState } from "react";
import {auth} from '../dashboard/config';
import {onAuthStateChanged } from "firebase/auth";
import {useNavigate } from 'react-router-dom';


  const [isProtectPage, setIsProtectPage] = useState(false);
  const navigate = useNavigate();

  onAuthStateChanged(auth, (user) => {
    
    if (user) {
      //if user is logged in show component.
      setIsProtectPage(true);

    } 
    
    else {
      //if user is not logged in hide component.
      setIsProtectPage(false);

    //And redirect user to login page.
      setTimeout(() => {
        navigate("/login")
        }, 3000);      
    }

  });

JSX:

{isProtectPage ? ( <DashboardPage /> ) 
                 : 
                 ( <h2> You are not authorized  to access this page. </h2> )
                 
}

thanks

Tags:

2

Answers


  1. 0

    What you’re showing is known as routing: sending the visitor to the correct page for their current state. It does not offer protection, as the code you now have doesn’t do anything to prevent a user from visiting any page by typing its URL int he browser.

    If you want that sort of protection, you’ll need to run some code on the server that also detects the visitors state and allows/prevents access to the page based on that.

    But many client-side web apps don’t need that, as the HTML, CSS JavaScript themselves are not secret and can be safely shared with users. Instead, such apps then protect the data that is shown in any of these pages, as that data is then loaded dynamically (e.g. from Firebase’s Firestore or Realtime Database), and access to that data is then controlled with a server-side mechanism already (e.g. Firebase security rules).

    Login or Signup to reply.
  2. 0

    If I understand correctly,I think that the code you provided is a valid way to protect a page using Firebase authentication. As you know it checks if the user is logged in using onAuthStateChanged and sets the state accordingly. If the user is logged in, the protected component (DashboardPage) is rendered, otherwise, a message indicating that the user is not authorized is displayed. Additionally, the code redirects the user to the login page after a delay of 3 seconds.This approach can be considered as a good practice for protecting pages with Firebase authentication. However, there are some additional best practices you may consider:

    Move the authentication logic to a separate utility or service file for better code organization.

    Implement client-side route guards to prevent unauthorized access to protected routes.

    Consider using Firebase’s built-in route protection mechanisms, such as Firestore security rules or Cloud Functions, for more fine-grained access control.

    Implement error handling for any potential authentication failures or network issues.

    Consider adding additional security measures, such as enforcing strong password policies or enabling multi-factor authentication, to enhance user authentication and authorization.

    By following these best practices, you can ensure better security and maintainability of your protected pages.

    To tell about myself, I am senior full stack developer and I hope to work with you. If you need my help, feel free to reach out to me.
    Thanks

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search