Svelte Clerk

https://svelte-clerk.netlify.app/
Admin
Svelte Clerk provides pre-built authentication components and runes for adding user management,...
Tokens:3,608
Snippets:43
Trust Score:7.6
Update:7 months ago
Show doc for...
Tokens:
Raw
### Run Development Server

Source: https://svelte-clerk.netlify.app/svelte/quickstart

Starts the Svelte development server to test the authentication implementation.

```shell
npm run dev
```

--------------------------------

### Initialize ClerkProvider in Root Layout

Source: https://svelte-clerk.netlify.app/svelte/quickstart

Wraps the application root with the ClerkProvider component to provide authentication context. It requires the publishable key as a prop.

```svelte
<script lang="ts">
	import type { Snippet } from 'svelte';
	import { ClerkProvider } from 'svelte-clerk/client';
	import { PUBLIC_CLERK_PUBLISHABLE_KEY } from '$env/static/public';

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

<ClerkProvider publishableKey={PUBLIC_CLERK_PUBLISHABLE_KEY}>
	{@render children()}
</ClerkProvider>
```

--------------------------------

### Install Svelte Clerk SDK

Source: https://svelte-clerk.netlify.app/svelte/quickstart

Installs the necessary svelte-clerk package via npm to enable authentication components and helpers in your Svelte project.

```shell
npm install svelte-clerk
```

--------------------------------

### Implement Authentication UI Components

Source: https://svelte-clerk.netlify.app/svelte/quickstart

Uses the Show component to conditionally render authentication buttons based on the user's signed-in or signed-out status.

```svelte
<script lang="ts">
	import { Show, SignInButton, UserButton } from 'svelte-clerk/client';
</script>

<template>
	<header>
		<Show when="signed-out">
			<SignInButton />
		</Show>
		<Show when="signed-in">
			<UserButton />
		</Show>
	</header>
</template>
```

--------------------------------

### Run SvelteKit Development Server

Source: https://svelte-clerk.netlify.app/guides/custom-sign-in-or-up-page

This command starts the SvelteKit development server. After running this command, you can visit the '/sign-in' route in your browser to test the custom sign-in and sign-up flow.

```shell
npm run dev

```

--------------------------------

### Configure Server Handler with svelte-clerk/server

Source: https://svelte-clerk.netlify.app/kit/quickstart

Sets up the server handler in `hooks.server.ts` using `withClerkHandler` from `svelte-clerk/server`. This handler authenticates requests and makes the `Auth` object available via `event.locals.auth()`.

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

export const handle = withClerkHandler();
```

--------------------------------

### Configure Clerk API Keys

Source: https://svelte-clerk.netlify.app/svelte/quickstart

Sets the required Clerk publishable key in the project environment variables. This key is retrieved from the Clerk Dashboard.

```shell
PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxxxxxxx
```

--------------------------------

### Integrate ClerkProvider in Root Layout

Source: https://svelte-clerk.netlify.app/kit/quickstart

Wraps the application's children with `<ClerkProvider>` in the root layout to provide active session and user context for all Clerk runes and components. Uses Svelte's `$props()` for children.

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

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

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

--------------------------------

### Protect Routes Server-Side with Load Function

Source: https://svelte-clerk.netlify.app/kit/quickstart

Shows how to protect routes server-side by checking for `userId` in the load function. If `userId` is not present, the user is redirected to the sign-in page.

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

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

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

	return {
		userId
	};
};
```

--------------------------------

### Configure Clerk API Keys in .env

Source: https://svelte-clerk.netlify.app/kit/quickstart

Sets the Clerk Publishable Key and Secret Key in the project's .env file. These keys are essential for Clerk authentication and can be found in the Clerk Dashboard.

```shell
PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxxxxxxx
CLERK_SECRET_KEY=sk_test_xxxxxxx
```

--------------------------------

### Add Locals Types for Clerk Handler

Source: https://svelte-clerk.netlify.app/kit/quickstart

Updates `app.d.ts` to ensure proper typing for the locals added by the Clerk handler. This involves referencing the svelte-clerk environment types.

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

declare global {
	namespace App {...}
}
```

--------------------------------

### Protect Pages Client-Side with Show Component

Source: https://svelte-clerk.netlify.app/kit/quickstart

Demonstrates client-side page protection using Clerk's `<Show>` component. It conditionally renders `<SignInButton>` or `<UserButton>` based on the user's authentication state.

```svelte
<script lang="ts">
	import { Show, SignInButton, UserButton } from 'svelte-clerk';
</script>

<template>
	<header>
		<Show when="signed-out">
			<SignInButton />
		</Show>
		<Show when="signed-in">
			<UserButton />
		</Show>
	</header>
</template>
```

--------------------------------

### Enable SSR Support with buildClerkProps

Source: https://svelte-clerk.netlify.app/kit/quickstart

Configures the `+layout.server.ts` file to pass initial auth state to the return object of the load function using `buildClerkProps` from `svelte-clerk/server`. This enables Server-Side Rendering support.

```typescript
// 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())
	};
};
```

--------------------------------

### Access Clerk User Data with clerkClient in SvelteKit

Source: https://svelte-clerk.netlify.app/kit/helpers

The `clerkClient` helper provides an instance of the JavaScript Backend SDK, allowing you to fetch user data on the server. This example shows how to retrieve the user's ID from `locals.auth()`, protect a route, and then use `clerkClient.users.getUser()` to fetch the full Backend User object. It's crucial for server-side data retrieval and route protection.

```typescript
import { redirect } from '@sveltejs/kit';
import { clerkClient } from 'svelte-clerk/server';

export const load = async ({ locals }) => {
	// Use `auth()` local to get the user's ID
	const { userId } = locals.auth();

	// Protect the route by checking if the user is signed in
	if (!userId) {
		return redirect(307, '/sign-in');
	}

	// Use the Backend SDK's `getUser()` method to get the Backend User object
	const user = await clerkClient.users.getUser(userId);

	// Return the Backend User object
	return {
		user: JSON.parse(JSON.stringify(user))
	};
};
```

--------------------------------

### Accessing Authentication State and Session Tokens with useClerkContext

Source: https://svelte-clerk.netlify.app/svelte/helpers

Demonstrates how to use the useClerkContext function to retrieve the current user's authentication state and fetch a session token. It highlights the importance of not destructuring the context object to maintain Svelte reactivity.

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

	// Do not destructure context to avoid losing reactivity
	const ctx = useClerkContext();

	const userId = $derived(ctx.auth.userId);

	const fetchDataFromExternalResource = async () => {
		const token = await ctx.session.getToken();
		const response = await fetch('https://api.example.com/data', {
			headers: {
				Authorization: `Bearer ${token}`
			}
		});
		return response.json();
	};
</script>

{#if userId === undefined}
	<p>Loading...</p>
{:else if userId === null}
	<p>Sign in to view this page</p>
{:else}
	<div>User ID: {userId}</div>
{/if}
```

--------------------------------

### Integrate Clerk Authentication with SvelteKit using withClerkHandler

Source: https://svelte-clerk.netlify.app/kit/helpers

The `withClerkHandler()` helper integrates Clerk authentication and authorization into your SvelteKit application through hooks. It accepts an optional options object, which is recommended to be passed as environment variables. This function is essential for setting up Clerk's server-side handling.

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

export const handle = withClerkHandler();
```

--------------------------------

### Prepare Clerk Client-Side Props for SSR with buildClerkProps

Source: https://svelte-clerk.netlify.app/kit/helpers

The `buildClerkProps()` helper is used to pass authentication state information from the server to the client-side helpers during Server-Side Rendering (SSR) in your SvelteKit application. This function should be used in the root server load function to ensure the client has the necessary authentication context.

```typescript
import { buildClerkProps } from 'svelte-clerk/server';

export const load = async ({ locals }) => {
	return {
		...buildClerkProps(locals.auth())
	};
};
```

--------------------------------

### Protecting Routes and Fetching User Data Server-Side

Source: https://svelte-clerk.netlify.app/guides/read-session-data

Shows how to use event.locals.auth() to protect SvelteKit routes and the clerkClient helper to retrieve full user details from the Clerk Backend API.

```typescript
import { redirect } from '@sveltejs/kit';
import { clerkClient } from 'svelte-clerk/server';

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

	// Protect the route by checking if the user is signed in
	if (!userId) {
		return redirect(307, '/sign-in');
	}

	// Get the user's full `Backend User` object
	const user = await clerkClient.users.getUser(userId);

	return {
		user: JSON.parse(JSON.stringify(user))
	};
};
```

--------------------------------

### Configure Clerk Redirect Environment Variables

Source: https://svelte-clerk.netlify.app/guides/custom-sign-in-or-up-page

This snippet details the environment variables required for Clerk's redirect configuration. These public variables, when added to the .env file, are automatically read by svelte-clerk during ClerkProvider initialization to manage sign-in and sign-up redirect URLs.

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

```

--------------------------------

### Accessing User Authentication State Client-Side

Source: https://svelte-clerk.netlify.app/guides/read-session-data

Demonstrates how to use the useClerkContext hook to track authentication state. It handles loading, signed-out, and signed-in states reactively within a Svelte component.

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

	// Do not destructure context to avoid losing reactivity
	const ctx = useClerkContext();

	const userId = $derived(ctx.auth.userId);
</script>

{#if isLoading}
	<p>Loading...</p>
{:else if userId === null}
	<p>Sign in to view this page</p>
{:else}
	<div>Hello, {userId}!</div>
{/if}
```

--------------------------------

### Create Svelte Sign-in Route

Source: https://svelte-clerk.netlify.app/guides/custom-sign-in-or-up-page

This snippet shows how to create a Svelte component for the sign-in route. It imports and uses the SignIn component from 'svelte-clerk'. The '[...sign-in]' route structure is used to support Clerk's internal sub-routes for multi-step authentication.

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

<SignIn />

```

--------------------------------

### Conditional Rendering with Show Component in Svelte

Source: https://svelte-clerk.netlify.app/svelte/components

The Show component conditionally renders content based on a provided permission or condition. It utilizes Svelte snippets to define a fallback UI when the condition is not met.

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

<template>
	<Show when={{ permission: 'org:invoices:create' }}>
		{#snippet fallback()}
			<p>You do not have the permissions to create an invoice.</p>
		{/snippet}
	</Show>
</template>
```
Tokens:
Raw