sveltekit-supabase-auth Svelte Themes

Sveltekit Supabase Auth

Sveltekit supabase auth example based on huntabyte tutorial video

Sveltekit Supabase Authentication

A sample app setup with basic username/password login and Social login via multiple OAuth providers.

Configuration

Create a new project in Supabase

Your project admin dashboard URL will be something like https://supabase.com/dashboard/project/[unique string here]

In the repo copy .env.example sample file to a .env file

Go to /settings/api for your Supabase project

Copy the values for PUBLIC_SUPABASE_URL and PUBLIC_SUPABASE_ANON_KEY from the project to the .env file.

In Supabase, go to Authentication -> URL Configuration

Go to auth/url-configuration for your Supabase project

Edit the URL to match the local Supabase server (f.ex localhost:5173)

Also add a Redirect url http://localhost:5173

OAuth configuration for Social login

Go to Supbase dashboard Authentication -> Providers at auth/providers

Enable the Oauth providers of your choice, such as Github and Google.

Github Oauth config

Copy the Callback URL from supabase Github Oauth config such as https://<your project code here>.supabase.co/auth/v1/callback

For the client id and secret, go to your Github developer settings which can be found under your profile icon, Settings (ie. settings/profile) then Developer settings all the way at the bottom which takes you to settings/apps. From there click on OAuth apps

In the form, register the following:

  • Name: sveltekit-supabase-auth
  • URL: http://localhost:5173
  • Callback URL: Past the Callback URL from Supabase Github OAuth provider

Click Register application

Click to generate a new key. When you have both the Client ID and secret key, transfer these to Supabase OAuth config.

Take the Client ID of the OAuth application and copy/paste back into the Supabase Github OAuth provider configuration. Do the same for the secret. Click save

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes