anubhavmishra / cloudflare-pages-auth

Basic Authentication for Cloudflare Pages

cloudflare-pages-auth

Static site that is password-protected when deployed to Cloudflare Pages. This is a SvelteKit project, but the password-protection works independently of the framework you use.

🚀 Getting Started

If you want to password-protect your own Cloudflare Pages site, you'll need to:

1. Copy the contents of the functions directory from this repo into your own project.
2. Add a CFP_PASSWORD environment variable to your Cloudflare Pages dashboard with the password you want to use.

The next time you deploy your site, it will be password-protected! 🎉

🛠 Running Locally

Since this is a SvelteKit project, first run the build command to generate the static site:

npm run build

Then, you'll need to use the wrangler CLI to run the site (with functions) locally:

npx wrangler pages dev build -b CFP_PASSWORD=test

Notice that you'll need to pass the CFP_PASSWORD environment variable when running the CLI command. If you don't pass it, the site will not be password-protected.

💅 Customization

• The functions/template.ts file contains the HTML template of the login page. You can customize it to your liking.
• The functions/constants.ts contains some other things you can customize, like the expiration of the auth cookie, or the list of paths that don't require authentication.