This is an example of how one could use Cloudflare's distributed and fast KV data store together with Cloudflare Pages as a user authentication method.
This is a Proof of concept so DO NOT USE IT FOR PRODUCTION.
Since data is replicated around the world in KV, this method is also not EU GDPR compliant.
Generally it is not recommended to store user's passwords and you should avoid it as much as possible, by instead using OAuth Providers or using E-Mail Sign in with magic-links.
Pages comes with a feature called Pages functions where you can execute server-side code on the edge. The KV data store is directly available to those Pages functions. This projects consists of two root folders:
This folder contains the static html ressources. The forms submit the user data to functions endpoints.
This folder contains the API endpoints for registering a user, logging in and out.
Cloudflare Pages uses file-based routing and creates the endpoints at the specified route. (starting from functions as root).
The /function/protected/_middleware.js function checks for a valid session_id and then forwards the request to the static assets handler if authenticated.
- Fork repository (or create own)
- Create New Pages project in Cloudflare dashboard and connect to repo
- Set Build output directory: to 'public'. Leave Build command blank.
- Generate secure token
openssl rand -base64 32- Create environment variable 'SECRET' in dashboard and paste secure token. You should also hit the encrypt button so not even you but only your functions have access to the secret
- Trigger new Deployment with a commit to the repository or from the dashboard.
Step 0: Clone the repo:
git clone https://github.com/max-elia/poc-kv-auth.gitStep 1: Install wrangler Instructions here
Step 2: Install dependencies
npm install // (or pnpm)Step 3: Create secure token and paste in SECRET variable in .dev.vars file
openssl rand -base64 32Step 4: Run locally
npm run devIf you have any feedback, feel free to open an issue or pull request.