The most simple way to add Basic Authentication to a static website hosted on Vercel.
npm install static-auth
The most simple way to add Basic Authentication to a static website hosted on Vercel.
I originally created this to add an authentication layer to my projects hosted on Vercel, but it can be used with Node's built-in http module too and should work with Express.
1. Install the package :
``bash
$ npm i static-auth -s
2. Use it :
js
const auth = require('static-auth');// Example with Vercel
module.exports = auth(
'/admin',
(user, pass) => (user === 'admin' && pass === 'admin') // (1)
);
`3. There's no step 3 − it's that easy!
> (1) Checking credentials via the
or === operators makes your code vulnerable to Timing attacks. This can be solved by using the safe-compare package instead.Examples
$3
$3
index.jsjs
const auth = require('static-auth');// create a handler that will check for basic authentication before serving the files
const serveHandler = auth( / ... / );
// start the server
const http = require('http');
const server = http.createServer(serveHandler);
server.listen(4444, () => console.log('Listening on port 4444...'));
`API
Required :
-
(String) : The base url to protect with Basic Authentication. Use / to restrict access to the whole website, or / (e.g. /admin) to restrict access only to a section of your site.
- validator (Function) : A function that accepts two parameters (user and pass) and returns true if the provided login credentials grant access to the restricted area.Optional :
-
[options] (Object) :
- [directory] (String, defaults to process.cwd()) : The base path to serve the static assets from. For example, if a request to my-website.com/app.css should return the content of the file located at ./www/app.css (relative to the Node script), then you should set this to __dirname + '/www', otherwise the script will look for ./app.css − which doesn't exist − and return a 404.
- [onAuthFailed] (Function) : A callback that accepts one parameter (res, an http.ServerResponse object), useful if you want to return a custom error message or HTML page when the provided credentials are invalid.
- [realm] (String, defaults to 'default-realm') : See What is the "realm" in basic authentication (StackOverflow).
- [serveStaticOptions] (Object, defaults to {}`) : Options to pass to the underlying serve-static module that's used to serve the files (see a usage example here).