Adding a simple password validation step to a dashboard that only a select few would access. The data is not highly sensitive, but some basic protection is desired to limit unauthorized access. While not expecting targeted attacks from hackers, the goal is to create sufficient security measures.
A secret environment variable with a password was set on Vercel and hashed in getStaticProps(), then passed as a prop to the page. On the client side, user-entered passwords are hashed for comparison. However, a potential flaw exists where one could manipulate the flag determining if hashes match.
The main concern is this security vulnerability. Are there additional obfuscation steps or frontend-only/serverless methods that could enhance security? As a frontend developer without expertise in backend authentication, options are limited. Most guides focus on full-fledged user account systems, which are excessive for this project. Vercel offers password protection at a high cost, which is unsuitable for the current scope.
Although acknowledged as insecure, given the non-critical nature of the data, some level of risk acceptance is justified. The approach may not be foolproof, but it serves the purpose adequately for now.
Snippet from /pages/index.js:
import React, { useState } from "react";
var crypto = require("crypto");
const IndexPage = ({ pwHash }) => {
// Code for handling entered passwords
};
export async function getStaticProps() {
// Code for creating password hash
}
export default IndexPage;