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.

Getting started

1. Install the package :

$ npm i static-auth -s

# or
$ yarn add static-auth

2. Use it :

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

with Vercel

• demo
• source

with Node's HTTP module

index.js

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

auth(url, validator, [options])

Required :

• url (String) : The base url to protect with Basic Authentication. Use / to restrict access to the whole website, or /<path> (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).