🚀 sveltekit-supabase 🚀

Description

A SvelteKit starter app with email/password login, and some other nice bells & whistles!

Technologies

• SvelteKit: A framework for building web applications with Svelte
• TypeScript: A typed superset of JavaScript that compiles to plain JavaScript
• Supabase: An open-source Firebase alternative
• Zod: A TypeScript-first schema declaration and validation library
• svelte-persisted-state: Svelte 5 state runes persisted to localStorage, sessionStorage, or cookies
• vite-plugin-kit-routes: Automatically generates a ROUTES.ts file in SvelteKit projects that facilitates type-safe href routing to avoid broken links
• Tailwind CSS: A utility-first CSS framework
• DaisyUI: A "collection of CSS class names", like an extension of Tailwind with easy theming options
• Iconify: A unified icon framework using icons from icones.js

Features

• Supabase Authentication (PKCE flow)
  • Sign up/in/out
  • hCaptcha spam prevention
  • Change/recover password
  • Server-side redirects for protecting routes
• Drizzle + Postgres + Zod for storing additional account data
• SvelteKit SuperForms + Zod for form parsing, validation, progressive enhancement, and reactive submitting/delayed state handling
• Light/dark mode stored reactively in cookies with svelte-persisted-state
  • Set reactively client-side
  • Set proactively server-side by transforming HTML in hooks.server.ts to prevent FOUC!
  • Ready to extend to store/load arbitrary site-wide settings!
• Custom site-wide reactive toast messaging system

Getting Started

1. Clone this repo

   git clone https://github.com/jacksonthall22/sveltekit-supabase
   cd sveltekit-supabase

2. Install dependencies

   pnpm i

3. Create a Supabase project. The default settings and free tier are fine! Save your Database password for later.

4. Set up in Supabase:

   1. Disable Legacy API Keys: Project Settings > API Keys > Legacy API Keys tab > Disable legacy API keys.

   2. Generate publishable/secret keys: Project Settings > API Keys > API Keys tab > Create new API keys

   3. Password settings: Authentication > Sign In / Providers > Email

   4. Turn off Confirm email (optional): Authentication > Sign In / Providers > Confirm email (off)

   5. Email auth settings (recommended): Authentication > Sign In / Providers > Email:

      • Secure email change: on
      • Secure password change: on
      • Minimum password length: 14
      • Password Requirements: Lowercase, uppercase letters, digits and symbols
      • Email OTP Length: 6
      • Save

   6. Enable hCaptcha verification: Authentication > Attack Prevention > Enable Captcha protection

   7. Change Authentication > URL Configuration > Site URL: http://localhost:5173

   8. Update email templates for sign up / password reset flows (original docs): Authentication > Emails > ...:

      1. Confirm sign up:

         <h2>Confirm your signup</h2>
         
         <p>Follow this link to confirm your user:</p>
         <p>
           <a
             href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email&next={{ .RedirectTo }}"
             >Confirm your email</a
           >
         </p>

      2. Reset password:

         <h2>Reset Password</h2>
         <p>Follow this link to reset the password for your user:</p>
         <p>
           <a
             href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=recovery&next=/account/update-password"
             >Reset Password</a
           >
         </p>

5. Create a .env based on .env.example:

   cp .env.example .env

6. Fill in your own Supabase keys in .env. In your Supabase project, click and find the four vars:

   • PUBLIC_SUPABASE_URL / PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY:
   • PRIVATE_DATABASE_URL:
   • PRIVATE_SUPABASE_SECRET_KEY: From earlier step, Project Settings > API Keys > API Keys tab > Secret Keys > default

7. Create an hCaptcha site. Copy the sitekey and generate a secret key, then paste in .env (no need to install any plugins for step 3, just click Done).

8. Push database schema to Supabase with Drizzle

   drizzle-kit push

9. Start your app

   pnpm dev

10. Navigate to http://localhost:5173 to see your app running!

Troubleshooting

_{(Feel free to open issues with any questions about missing steps here!)}

• Might need to update the redirect URL sent in change-password emails in Supabase project settings - I think after deploying to vercel, the live site might still try to redirect to localhost

Deploying to Vercel

_{(TODO: verify these are all the steps needed)}

1. Create a new project in the Vercel dashboard

2. Install the Vercel CLI

   pnpm add -g vercel

3. Build

   pnpm build

4. Deploy!

   vercel --prod

Contributing

Contributions are welcome! Please feel free to submit a PR or open issues.

Thanks

Shout out to Davis Media for building the base-base template for this project! 🤙

Shout out to engageintellect for building the base template for this project! 🤙