Clerk SvelteKit

Adapter for using Clerk authentication in SvelteKit.

Demo

The demo site is just this repository, hosted on Cloudflare Pages.

Installation

Install package

# npm
npm i clerk-sveltekit

# pnpm
pnpm i clerk-sveltekit

# yarn
yarn add clerk-sveltekit

# bun
bun i clerk-sveltekit

Set up environment variables

Add these values to your .env (get them from Clerk after creating an application there):

1PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_abcdefg123
2CLERK_SECRET_KEY=sk_test_abcdefg123

The easiest way to get these values is to click "API Keys" in the Clerk dashboard, and then copy the values for Next.js, and change NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY to PUBLIC_CLERK_PUBLISHABLE_KEY.

Note that for production sites using OAuth providers, you will have to do some more setup with Clerk and DNS.

Configure the server hook

Add this to src/hooks.server.ts (or integrate this code with your existing hooks.server.ts file):

1import type { Handle } from '@sveltejs/kit'
2import { sequence } from '@sveltejs/kit/hooks'
3import { handleClerk } from 'clerk-sveltekit/server'
4import { CLERK_SECRET_KEY } from '$env/static/private'
5
6export const handle: Handle = sequence(
7	handleClerk(CLERK_SECRET_KEY, {
8		debug: true,
9		protectedPaths: ['/admin'],
10		signInUrl: '/sign-in',
11	})
12)

Configure the client hook

Add this to src/hooks.client.ts:

1import type { HandleClientError } from '@sveltejs/kit'
2// To use Clerk components:
3import { initializeClerkClient } from 'clerk-sveltekit/client'
4// Or for headless mode:
5// import { initializeClerkClient } from 'clerk-sveltekit/headless'
6import { PUBLIC_CLERK_PUBLISHABLE_KEY } from '$env/static/public'
7
8initializeClerkClient(PUBLIC_CLERK_PUBLISHABLE_KEY, {
9	afterSignInUrl: '/admin/',
10	afterSignUpUrl: '/admin/',
11	signInUrl: '/sign-in',
12	signUpUrl: '/sign-up',
13})
14
15export const handleError: HandleClientError = async ({ error, event }) => {
16	console.error(error, event)
17}

Customize the protected paths, and the various URLs as you like.

[!NOTE] If you use clerk-sveltekit/headless instead of clerk-sveltekit/client, your bundle will be much smaller (by about 1MB), but you will not have access to <SignIn />, <SignUp />, <UserProfile />, <UserButton />, <OrganizationProfile />, <OrganizationSwitcher />, or <CreateOrganization />. Sign-ins will have to happen on your accounts.{TLD} subdomain.

Use the components

Next, put the SignIn component on your sign in page:

1<script lang="ts">
2	import SignIn from 'clerk-sveltekit/client/SignIn.svelte'
3</script>
4
5<div>
6	<SignIn redirectUrl="/admin" />
7</div>

And put the SignUp component on your sign up page:

1<script lang="ts">
2	import SignUp from 'clerk-sveltekit/client/SignUp.svelte'
3</script>
4
5<div>
6	<SignUp redirectUrl="/admin" />
7</div>

Then, where you want to show the signed in user's photo and sign out button (probably in a +layout.svelte file in the header):

1<script lang="ts">
2	import UserButton from 'clerk-sveltekit/client/UserButton.svelte'
3	import SignedIn from 'clerk-sveltekit/client/SignedIn.svelte'
4	import SignedOut from 'clerk-sveltekit/client/SignedOut.svelte'
5</script>
6
7<SignedIn>
8	<UserButton afterSignOutUrl="/" />
9</SignedIn>
10<SignedOut>
11	<a href="/sign-in">Sign in</a> <span>|</span> <a href="/sign-up">Sign up</a>
12	<!-- You could also use <SignInButton mode="modal" /> and <SignUpButton mode="modal" /> here -->
13</SignedOut>

Components

All components can be imported from clerk-sveltekit/client/ComponentName.svelte

• <ClerkLoading /> — Wrapper that shows its contents when Clerk is still loading.
• <ClerkLoaded let:clerk /> — Wrapper that shows its contents (and exposes the clerk object) when Clerk is done loading.
• <SignIn /> — Renders a sign-in form.
• <SignUp /> — Renders a sign-up form.
• <SignedIn let:user /> — Wrapper that shows its contents (and exposes the Clerk user object) when the user is signed in.
• <SignedOut /> — Wrapper that shows its contents when the user is not signed in.
• <UserButton /> — Button that shows the user’s profile photo with log out link when they are signed in.
• <UserProfile /> — Renders the current user’s profile.
• <SignInButton /> — Unstyled sign-in button (can do mode="modal" too).
• <SignUpButton /> — Unstyled sign-up button (can do mode="modal" too).
• <SignOutButton /> — Unstyled sign-out button.
• <OrganizationProfile /> — Renders the organization profile component.
• <OrganizationSwitcher /> — Renders an organization switcher component.
• <CreateOrganization /> — Renders UI for creating an organization.

Note that components should be used for displaying UI, but are not sufficient for protecting routes. To protect a route, use the protectedPaths option passed to handleClerk() in your hooks.server.ts file.

Protected Routes

The protectedPaths option will accept an array of either strings, or functions which accept a SvelteKit event object and return a boolean. When passed strings, any route that starts with that string will be protected. i.e. protecting '/admin' will protect /admin but also /admin/foo.

Using Clerk data on the server

Server-side protected routes will automatically get a Clerk user object injected into locals.session which means you can use it in a load() function, a default action, or a form action.

Thanks

Thanks to Cerbos for their https://github.com/cerbos/sveltekit-clerk-cerbos example repo which got this project started, and to Brian Bug for fixing bugs in that implementation.