Svelte Clerk

Svelte Clerk provides a set of UI components that mirror the Clerk React SDK but utilize Svelte Snippets for content rendering.

Available components include:

• Authentication: <SignIn>, <SignUp>, <GoogleOneTap>, <Waitlist />
• User Management: <UserButton>, <UserAvatar>, <UserProfile>
• Organization Management: <OrganizationList>, <OrganizationProfile>, <OrganizationSwitcher>, <CreateOrganization>
• Control/Loading: <Show>, <ClerkLoaded>, <ClerkLoading>
• Other: <PricingTable />, <APIKeys />

For detailed prop definitions for each component, refer to the official Clerk UI components documentation.

Add your Clerk API keys to your .env file. You can find these in your Clerk Dashboard under the API Keys section.

Required keys:

• PUBLIC_CLERK_PUBLISHABLE_KEY: The public key for client-side operations.
• CLERK_SECRET_KEY: The secret key for server-side operations.

PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxxxxxxx
CLERK_SECRET_KEY=sk_test_xxxxxxx

To enable Server-Side Rendering (SSR) support, pass the initial authentication state from your server load function to the client using buildClerkProps.

// src/routes/+layout.server.ts
import { buildClerkProps } from 'svelte-clerk/server';
import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = ({ locals }) => {
	return {
		...buildClerkProps(locals.auth())
	};
};

You can host Clerk's <SignIn /> component on a custom SvelteKit route to allow users to sign in or switch to sign up within a single flow.

To implement this, you must create a rest route to support Clerk's internal sub-routes (like multi-step authentication) and configure the appropriate environment variables so svelte-clerk knows where to redirect users.

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

<SignIn />

Install the Svelte Clerk SDK using npm to access prebuilt components, runes, and authentication helpers.

npm install svelte-clerk

To protect specific routes on the server, check for the existence of userId within the locals.auth() object in your SvelteKit load function. If no userId is present, redirect the user to your sign-in page.

import { redirect } from '@sveltejs/kit';

export const load = async ({ locals }) => {
	const { userId } = locals.auth();

	if (!userId) {
		return redirect(307, '/sign-in');
	}

	return {
		userId
	};
};

Use the withClerkHandler() helper to integrate Clerk authentication and authorization into your SvelteKit application via hooks. This is typically exported from your src/hooks.server.ts file. While it accepts an optional options object, it is recommended to configure Clerk using environment variables instead.

import { withClerkHandler } from 'svelte-clerk/server';

export const handle = withClerkHandler();

To ensure the locals added by the Clerk handler are properly typed throughout your application, add the svelte-clerk/env reference to your src/app.d.ts file.

/// <reference types="svelte-clerk/env" />

declare global {
	namespace App {...}
}

To support Clerk's internal sub-routes (such as multi-step auth paths), create a rest route in SvelteKit at src/routes/sign-in/[...sign-in]/+page.svelte and render the <SignIn /> component.

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

<SignIn />

Wrap your application in the <ClerkProvider> component within your root layout. This component provides the active session and user context required by all Clerk runes and components.

<script lang="ts">
	import type { Snippet } from 'svelte';
	import { ClerkProvider } from 'svelte-clerk';

	const { children }: { children: Snippet } = $props();
</script>

<ClerkProvider>
	{@render children()}
</ClerkProvider>

In SvelteKit, use withClerkHandler in your hooks.server.ts file. This handler authenticates incoming requests and populates event.locals.auth() with the Clerk Auth object, making it available in server loaders and actions.

// hooks.server.ts
import { withClerkHandler } from 'svelte-clerk/server';

export const handle = withClerkHandler();