Environment variables / $env/dynamic/private • Svelte Tutorial

Advanced SvelteKit Environment variables $env/dynamic/private

If you need to read the values of environment variables when the app runs, as opposed to when the app is built, you can use $env/dynamic/private instead of $env/static/private:

src/routes/+page.server

import { redirect, fail } from '@sveltejs/kit';
import { env } from '$env/dynamic/private';

export function load({ cookies }) {
	if (cookies.get('allowed')) {
		redirect(307, '/welcome');
	}
}

export const actions = {
	default: async ({ request, cookies }) => {
		const data = await request.formData();

		if (data.get('passphrase') === env.PASSPHRASE) {
			cookies.set('allowed', 'true', {
				path: '/'
			});

			redirect(303, '/welcome');
		}

		return fail(403, {
			incorrect: true
		});
	}
};

import { redirect, fail } from '@sveltejs/kit';
import { env } from '$env/dynamic/private';

export function load({ cookies }) {
	if (cookies.get('allowed')) {
		redirect(307, '/welcome');
	}
}

export const actions = {
	default: async ({ request, cookies }) => {
		const data = await request.formData();

		if (data.get('passphrase') === env.PASSPHRASE) {
			cookies.set('allowed', 'true', {
				path: '/'
			});

			redirect(303, '/welcome');
		}

		return fail(403, {
			incorrect: true
		});
	}
};

Edit this page on GitHub

previous next

$env/static/private $env/static/public

<script>

	let { form } = $props();

</script>

<form method="POST">

	<label>

		enter the passphrase

		<input name="passphrase" autocomplete="off" />

	</label>

</form>

{#if form?.incorrect}

	<p class="error">wrong passphrase!</p>

{/if}

<style>

	.error {

		color: red;

</style>

show text show editor