SvelteKit Setup

This guide installs Auth UI (self-hosted user & organization management) in a SvelteKit + Convex app.
All UI code is copied into your project (shadcn-style) from Convex-Better-Auth-UI, so you own every component and flow.

Time estimate

  • New projects: typically ~5 minutes.
  • Existing projects: depends on your current setup and may require additional integration work.

Use this guide for:

  • New projects: follow everything from top to bottom.
  • Existing projects: skip the SvelteKit scaffold and start with Install Auth UI.

1. (Optional) Create a new SvelteKit app

If you’re starting a fresh project:

Note When answering the interactive prompts, select:

  • Tailwind CSS
  • Forms (tailwindcss)

Existing projects can skip this step if Tailwind + Tailwind Forms are already set up.

2. Install Auth UI (CLI)

The CLI scaffolds all required Auth files (Convex functions, Svelte components, themes, hooks, SSR wiring) and keeps them up to date.

During jsrepo init @auth/svelte:

  • Press Enter to accept all default paths.

During jsrepo add:

  • Confirm each Would you like to apply these changes? prompt with yes. (You can review everything afterwards through Git.)

3. Configure Convex

Set up your dev deployment

Running npx convex dev will:

  • Log you into Convex
  • Create a project
  • Generate the deployment + URLs
  • Keep syncing your functions while developing

Add Convex environment variables

Generate the secret for encryption and hashing:

Set your local dev URL (SITE_URL):

Update the .env.local file created by npx convex dev:

.env.local

Next, choose which auth features you want to enable (email verification, organizations, etc.) and follow the guides below.