- ⚡️ SvleteKit, Vite, pnpm, esbuild
- 💯 Typescript
- 👷 Eslint + Prettier
- 🎨 UnoCSS - Tailwind/Windi CSS + CSS icons, webfonts + more
- 🏠 Supabase DB via Prisma
- 🤵 Supabase for Auth (magic link, email, oauth)
- Use this template
npx degit kensleDev/svletekit-template-auth project-name
- Go to Supabase
- Sign up for an account
- Create a new project, this will create a database
- In Supabase go to -> Authentication
- Click on URL Configuration
- Change the Site URL and Redirect URL to your localhost port - default: http://localhost:5173
-
Install dependancies with
pnpm install -
Create .env file - can copy .env_example
-
Enter Supabase credentials to .env i.e.
DATABASE_URL="{supabase database connection string}"
PUBLIC_SUPABASE_URL="{project url - found on project page}"
PUBLIC_SUPABASE_ANON_KEY="{prject api key - found on project page}"
- Update Prisma schema and run migragte
- Run dev task
Read the Supabase Sveltekit docs for more information on setup, protecting API routes, protecting actions and general info.
This repo doesn't come with any protected routes but it is setup to protect new routes that start with dashboard:
hooks.server.ts
...
// protect requests to all routes that start with /dashboard
if (event.url.pathname.startsWith('/dashboard')) {
const session = await event.locals.getSession();
if (!session) {
// the user is not signed in
throw redirect(303, '/');
}
}
...
This repo is setup to use Email, Google, Discord and Github as auth providers.
By default only the google button will show, to enable Discord or Github uncomment the buttons in src\routes\login\+page.svelte
To remove an auth provider completly remove it from the array in src\routes\login\+page.server.ts
const OAUTH_PROVIDERS = ['google', 'discord', 'github'];
For a full walkthrough on how to setup OAuth providers see this tutorial
Unit Testing - Vitest, Jest
SvelteKit Auth Tutorial SvelteKit OAuth Tutorial Vitesse
- Generate DB definitions for end2end typescript with Supabase