Build a custom sign-in or sign-up page in SvelteKit

This guide shows you how to host Clerk's <SignIn /> component on a custom SvelteKit route so users can sign in or switch to sign up in a single flow.

1. Create the sign-in route

Create src/routes/sign-in/[...sign-in]/+page.svelte:

<script lang="ts">
	import { SignIn } from 'svelte-clerk';
</script>

<SignIn />

The rest route ([...sign-in]) supports Clerk's internal sub-routes, such as multi-step auth paths.

2. Configure redirect environment variables

Add these values to your .env file:

PUBLIC_CLERK_SIGN_IN_URL=/sign-in
PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/

svelte-clerk reads these public variables automatically when initializing ClerkProvider.

3. Visit your new page

Run your app:

npm run dev

Then open /sign-in to test sign in and sign up in one flow.