SvelteKit Better Auth Template

A SvelteKit template with Better Auth for OAuth social login, featuring multiple providers, protected routes, and a modern UI.

Features

• Multiple OAuth Providers - Demonstrates 5 providers (GitHub, Google, Discord, Slack, Vercel) as examples, easily extensible to support 30+ providers
• Dynamic Provider Detection - Automatically shows only configured providers based on environment variables
• Protected Routes - Built-in route protection with automatic redirects
• Modern Stack - Svelte 5 with Runes, TypeScript, and Vite
• Clean UI - Responsive design with CSS variables and reusable components

Tech Stack

• SvelteKit 2.x
• Svelte 5
• Better Auth
• TypeScript
• Vite 7

Project Structure

src/
├── lib/
│   ├── server/auth.ts        # Better Auth server configuration
│   ├── auth-client.ts        # Client-side auth utilities (signIn, signOut)
│   └── components/           # Reusable UI components
├── routes/
│   ├── +page.svelte          # Home page
│   ├── dashboard/            # Protected dashboard page
│   └── api/auth/[...all]/    # Better Auth API routes
├── hooks.server.ts           # Auth middleware & route protection
└── app.css                   # Global styles with CSS variables

Quick Start

1. Clone and Install

git clone <repository-url>
cd sveltekit-better-auth-template
npm install

2. Configure Environment Variables

Copy the example file and fill in your credentials:

cp .env.example .env

3. Run Development Server

npm run dev

Visit http://localhost:5173 to see your app.

Environment Variables

Required

OAuth Providers

Configure one or more providers. Only providers with both CLIENT_ID and CLIENT_SECRET will be displayed.

Note: Better Auth supports 30+ OAuth providers including Apple, Microsoft, Twitter, LinkedIn, and more. The 5 providers above are just examples. Refer to the Better Auth documentation for integration guides.

Callback URL

Set the callback URL in each OAuth provider's settings:

http://localhost:5173/api/auth/callback/{provider}

Replace {provider} with: github, google, discord, slack, or vercel.

For production, replace http://localhost:5173 with your domain.

Adding a New Provider

1. Add environment variables to .env:

   NEWPROVIDER_CLIENT_ID=xxx
   NEWPROVIDER_CLIENT_SECRET=xxx
   

2. Add provider config in src/lib/server/auth.ts:

   socialProviders: {
     // ...existing providers
     newprovider: {
       clientId: env.NEWPROVIDER_CLIENT_ID as string,
       clientSecret: env.NEWPROVIDER_CLIENT_SECRET as string,
     }
   }
   

3. Add provider detection in src/routes/+page.server.ts:

   {
     id: 'newprovider',
     name: 'New Provider',
     enabled: !!(env.NEWPROVIDER_CLIENT_ID && env.NEWPROVIDER_CLIENT_SECRET)
   }
   

4. Create icon component in src/lib/components/icons/NewProviderIcon.svelte

5. Register icon in src/lib/components/AuthProviderButton.svelte

Deploy

License

MIT