Not working with SvelteKit and cloudflare adapter

[andrejohansson]

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?

[andrejohansson]

Follow up, I re-wrote as hooks and am trying to get it to work, see post at cloudflare community: https://community.cloudflare.com/t/simple-password-protection-in-sveltekit-with-hooks-not-working/426412

[Wobbley]

Follow up, I re-wrote as hooks and am trying to get it to work, see post at cloudflare community: https://community.cloudflare.com/t/simple-password-protection-in-sveltekit-with-hooks-not-working/426412

Did you ever get this resolved? Was thinking of using this to password protect my own deploy

[TheSynt4x]

I've not gotten it to work either. Has anyone figured it out yet? For me when using hooks.server.js it completely crashes and gives me 500 internal errors on every page. +page.server.js load functions() are also occasionally giving 500 internal errors. I have no idea why.

[major-mayer]

For me the problem is, that when I execute npx wrangler pages dev .svelte-kit/cloudflare -b CFP_PASSWORD=test I always get an error 404 no matter which URL I want to open. The directory .svelte-kit/cloudflare exists tho and also contains a _worker.js file.

Any ideas why this could be the case?

[andrejohansson]

@TheSynt4x @major-mayer I have got it to work. I do not have the code available now but I do think it resolved itself for me when I updated svelte. I had some old version of svelte installed. So I removed my node-modules, updated it to latest and ran npm install.

Here is the code and location of my hook:

import { CFP_COOKIE_MAX_AGE } from '$lib/login/constants';
import { sha256, getCookieKeyValue } from '$lib/login/utils';

/** @type {import('./$types').RequestHandler} */
export async function POST({ request, platform }) {
    const cfp_password =
        platform?.env?.CFP_PASSWORD?.toLowerCase()
        ?? process?.env['CFP_PASSWORD']?.toLowerCase();
	const body = await request.formData();
	const { password } = Object.fromEntries(body);
	const hashedPassword = await sha256(password?.toLowerCase().toString());
	const hashedCfpPassword = await sha256(cfp_password);

  if (hashedPassword === hashedCfpPassword) {
		// Valid password. Redirect to home page and set cookie with auth hash.
		const cookieKeyValue = await getCookieKeyValue(cfp_password);

		return new Response('', {
			status: 302,
			headers: {
                'Set-Cookie': `${cookieKeyValue}; Max-Age=${CFP_COOKIE_MAX_AGE}; Path=/; HttpOnly; Secure`,
				'Cache-Control': 'no-cache',
				Location: '/'
			}
		});
	} else {
		// Invalid password. Redirect to login page with error.
		return new Response('', {
			status: 302,
			headers: {
				'Cache-Control': 'no-cache',
				Location: '/?error=1'
			}
		});
	}
}