Sveltekit Supabase Setup

Lean how to setup Supabase in Sveltekit to accessing database, auth or for storage.

svelte logo

Want to build a Svelte/SvelteKit site? Hire Me.

Sveltekit Supabase Setup

A quick run down on how to setup Supabase in Sveltekit.

It is pretty easy to install it using svelte-add but sometimes it might throw errors.

Create a .env file

Once you initialize Sveltekit, create a .env file at the root the Sveltekit project folder.

VITE_SUPABASE_URL=<your-supabase-url>
VITE_SUPABASE_ANON_KEY=<your-supabase-anon-key>

Create a supabase initialization script file

Create a file in Sveltekit /src/lib/db.js. Paste the following in it.

import { createClient } from "@supabase/supabase-js";

const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
);

export default supabase;

This is it. Now to use supabase, you can use the following

import supabase from "$lib/db";

You will now have access to your supabase account.

Sveltekit Supabase Course

Watch a video here

Youtube video:


Find related articles

Let's discuss on Twitter