🔐 Authentication with Clerk

Complete authentication integration using Clerk for user management, sign-in flows, and protected routes. This template demonstrates production-ready auth patterns with graceful fallback when not configured.

Auth Enabled

Current Auth State

🔓

Not Signed In

Click the "Sign In" button in the navbar or use the components below.

Clerk Components

Explore the pre-built authentication components. These are fully customisable and handle all auth flows automatically.

Protected Routes

This template includes protected demo pages that require authentication. Try visiting them to see route protection in action.

📊

Dashboard

A protected dashboard page showing user information.

Protected 👤

Profile

User profile management with Clerk's UserProfile component.

Protected

Quick Implementation Guide

1

Install Package

npm install svelte-clerk
2

Add Environment Variables

PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
3

Create hooks.server.ts

import { withClerkHandler } from 'svelte-clerk/server';
export const handle = withClerkHandler();
4

Wrap Layout with ClerkProvider

<ClerkProvider>
  <!-- Your app content -->
</ClerkProvider>