Description:

When trying to access an image directly (e.g., ogp.png), even after successfully logging in, I am redirected back to the login screen instead of being able to view the image. It seems like the login process isn't properly handling direct access to images or other static resources.

Steps to Reproduce:

• Attempt to access ogp.png or any other image directly via URL.
• Login when prompted.
• Observe that you are redirected back to the login screen instead of viewing the image.

Expected Behavior: After logging in, I should be able to view the image directly.

Actual Behavior: After logging in, I'm redirected back to the login screen.

Additional Context: I want to enforce authentication for images but still allow access once logged in. However, the current behavior is preventing that.

The error on DOCTYPE!

What's wrong?

First, thank you very much for your work - this kind of password protection is really handy for most cases.

I used the vite-plugin-pwa to make my Vue App as PWA installable. That works locally really well.
But deployed on CF the web.manifest cannot be found correctly, because the new html section is injected and first shows the password prompt.

I already tried to copy the original html head into the injected one, but it does not seem to work.

Is there any way to accomplish this or do the two things (your auth and the pwa functionality) do not work together this way?

This is the PWA plugin I used: https://vite-pwa-org.netlify.app/guide/

Hello,

Thank you for your article and this code. I'm having a bit of a trouble getting it to work though. I'm using SvelteKit with the cloudflare adapter and I experience the following behaviour:

• my first request gets correctly routed to the login page
• if I enter wrong password, I get the error message displayed
• if I enter correct password, I get 404 errors and no pages are found

My svelte.config.js looks like this:

import adapter from '@sveltejs/adapter-cloudflare';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		adapter: adapter({
			platform: 'node'
		}),

		// hydrate the <div id="svelte"> element in src/app.html
		target: '#svelte'
	}
};

export default config;

Could this issue and explanation be related somehow?

Hi, I've noticed it's possible to bypass the login page and to see the page index without authenticating by adding /cfp_login to the url to access the route directly. Is there any possible fix for this? Thanks!

I'd like to be able to send a URL like https://some.pages.dev?auth=password which lets the user bypass the login screen. This feature would help remove some friction when I have a gnarly randomly generated password.

New to this - I simply forked the repo, created a pages instance, set the CFP_PASSWORD and thought it should work - what is the Pages configuration or is there something else that should be done?

Hi, thanks for making this. This is exactly what I was looking for, but I can't make it work. I copied functions folder into root of my site and uploaded zip to cloudflare. I added CFP_PASSWORD into pages environment variable. I tried encrypted an clear text passwords. I tried every posible combination i could think of but I simply can not get login page on my site. Can you give me any hint what else I can try.Thanks.

Hi !
I was wondering if there is a way in the constants file to not choose the path we don't need to protect, but the page we DO need to protect.
I only have the pages with something like /protected/ in the URL.
Or maybe you have a way to do that in another way ?
Thanks !