reactjs - Prevent LocalStorage Manipulation for 2FA Authentication in Admin Panel - Stack Overflow

admin管理员组

文章数量:1398814

I am building an admin panel where users must complete a two-factor authentication (2FA) process after logging in. The flow works as follows:

User logs in successfully.

They are redirected to the 2FA verification page.

Upon successful 2FA verification, they are redirected to the home page.

To manage this process, I store authentication-related flags in localStorage:

is2FAPending: "Yes" or "No" (Indicates whether the user is in the 2FA process)

is2FAFinish: "Yes" or "No" (Indicates whether the 2FA process is completed)

Once the user successfully enters the 2FA code, I update these values and redirect them to the home page:

localStorage.setItem("is2FAPending", "No");
localStorage.setItem("is2FAFinish", "Yes");
window.location.href = "/home";

The Problem: Since these values are stored in localStorage, a user can manually update them in the browser console (e.g., setting is2FAPending to "No" and is2FAFinish to "Yes") without completing the 2FA process. This allows them to bypass authentication and access the home page.

My Question: How can I prevent users from modifying localStorage values to bypass 2FA? What is the best approach to securely track 2FA authentication without relying on client-side storage?

Possible Solutions I Considered: Move authentication state to HTTP-only cookies or session storage (but not sure how to implement this properly).

Verify 2FA completion from the backend on every protected page load.

Use JWT tokens to track authentication state instead of relying on localStorage.

What would be the best and most secure approach? Any guidance would be greatly appreciated!

I am building an admin panel where users must complete a two-factor authentication (2FA) process after logging in. The flow works as follows:

User logs in successfully.

They are redirected to the 2FA verification page.

Upon successful 2FA verification, they are redirected to the home page.

To manage this process, I store authentication-related flags in localStorage:

is2FAPending: "Yes" or "No" (Indicates whether the user is in the 2FA process)

is2FAFinish: "Yes" or "No" (Indicates whether the 2FA process is completed)

Once the user successfully enters the 2FA code, I update these values and redirect them to the home page:

localStorage.setItem("is2FAPending", "No");
localStorage.setItem("is2FAFinish", "Yes");
window.location.href = "/home";

The Problem: Since these values are stored in localStorage, a user can manually update them in the browser console (e.g., setting is2FAPending to "No" and is2FAFinish to "Yes") without completing the 2FA process. This allows them to bypass authentication and access the home page.

My Question: How can I prevent users from modifying localStorage values to bypass 2FA? What is the best approach to securely track 2FA authentication without relying on client-side storage?

Possible Solutions I Considered: Move authentication state to HTTP-only cookies or session storage (but not sure how to implement this properly).

Verify 2FA completion from the backend on every protected page load.

Use JWT tokens to track authentication state instead of relying on localStorage.

What would be the best and most secure approach? Any guidance would be greatly appreciated!

• reactjs
• authentication
• local-storage
• storage
• dashboard

Share Improve this question Follow asked Mar 26 at 22:41 Vugar abdurahmanovVugar abdurahmanov 111 bronze badge 3

• Preventing the user from accessing data in their own browser is probably a non-starter. But this part sounds telling… ”This allows them to bypass authentication and access the home page.” - How? If the user is able to access restricted resources without having authenticated then it sounds like the authentication/authorization system isn’t working in the first place. How have you set this up such that a restricted page is accessible without logging in? – David Commented Mar 27 at 0:15
• I am not setting up the backend part. I am just trying to set up the frontend client side part. Since I have little experience in these parts, I do not know exactly what the backend should do, how I should guide it, and how I should control the frontend correctly. – Vugar abdurahmanov Commented Mar 27 at 7:42
• But the backend is where the security would be enforced. When the user makes a request for /home to the server, and if that page is restricted, then the backend needs to determine if the user is authenticated/authorized before returning that page to the user. Keeping the authentication entirely client-side means that the server has no way of knowing whether the user is logged in. So if the server always returns the data that's been requested, regardless of authentication, what then would be the point of logging in at al? – David Commented Mar 27 at 11:48

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I would strongly recommend moving the authentication state away from client-side storage like localStorage.

Client-side storage like localStorage and sessionStorage can be manipulated easily by users, which is why relying on them for sensitive information like authentication status is not secure.

My opinion, if you're starting, try implementing cookies for 2FA AuthManagement.

After successful completion of first layer authentication, set a flag like 'is2FAPending' and set it to true in initialState. This should be set in the backend cookies. Then redirect to the 2FA Page.

I don't know the backend technology you're using, but if you are using Express.js, you can set the cookie inside session().

You can refer this guide to setup:
https://www.geeksfeeks./how-to-manage-sessions-and-cookies-in-express-js/

After successful completion of 2FA set the flag to false and redirect to a Protected Layout which sends a request and check the cookie/session for the state of is2FAPending == false/true

Hope this answers your question!

本文标签： reactjsPrevent LocalStorage Manipulation for 2FA Authentication in Admin PanelStack Overflow