Authentication with Supabase and SvelteKit (Part 1) - Development Environment Setup

tbonesteaks — Thu, 16 Dec 2021 18:42:38 +0000

project preamble

I am not a web developer by trade, my day job consists of me hacking away at open source telecom projects. But, I have always wanted to build my own link aggregator site like reddit, lobste.rs, and hackernews. But, in order to do that I have got caught up in the cycle of starting the project over and over with a different web framework every couple of months. It's mostly a bad habit, and probably laziness too. Feels like a kind of a self-sabatoge sometimes too.

But, nonetheless, I am putting all that behind me. I got on a kick trying to learn all I could about postgresql since it's a tool that would give me so much leverage in any project, and that led to me finding postgREST, which led me to supabase. Man, what a cool product. It is minimal enough where you don't feel like the appplication is doing everything for you, but it makes the difficult things much easier. One example being authentication, as we will see.

supabase is obviouisly not a web framework. It is a collection of great open source projects tied together very nicely. See below:

I have messed around with React, Vue, and Svelte at different times. Just playing around with them. Nothing serious. And Svelte, like supabase, seemed to have just enough magic to make tough things easier, but was minimal enough that I felt like I wasn't getting 'project lock-in' (if that's a thing).

tl;dr

Not a web developer. Didn't know what tools to use. Found supabase and sveltekit. Liked both. Chose them.

I won't be going in-depth on supabase and sveltekit. You can look them both up yourself and dive in. I am only trying to document how I got things working with these tools as clearly as possible.

Note on Caddy Server

This tutorial will also be using Caddy Server to make the local development environment easier to work with. And I think the configuration will work for production deployment too (we shall see).

Get started

To get started, we will need the below tools:

docker
node.js / npm (or pnpm, check it out. It's pretty cool)
caddy server

I'll leave installing the tools to you for your environment. I am assuming you are familiar enough or experienced enough (or determined enough) to get the tools working on your own. You can email me if you want help. I will try my best to respond.

1. Build SvelteKit Project

Now build a new sveltekit project:

npm init svelte@next supabase-auth-example
cd supabase-auth-example
npm install

2. Change default port

The supabase studio app runs on port 3000 just like sveltekit default does. Let's change that so everything can run.

Go to package.json and add --port 3333 to the end of the dev and preview scripts.

Note: you can use whatever port you want that's available, but just make note because we will need it later for the caddy server config.

Change this:

  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "preview": "svelte-kit preview",
    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
  },

to this:

  "scripts": {
    "dev": "svelte-kit dev --port 3333",
    "build": "svelte-kit build",
    "preview": "svelte-kit preview --port 3333",
    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
  },

3. Setup Supabase Docker Network

Supabase has an easy to use docker setup for spinning up an instance of supabase and all its componenets.

The full documentation is here.

Below are the instructions from there (probably want to move to a different directory for this).

git clone --depth 1 https://github.com/supabase/supabase

cd supabase/docker

cp .env.example .env

docker-compose up

Now you can go to http://localhost:3000 to access the Supabase Studio app. We won't use it too much right now. But, its there for when we will need it.

If you wanted to keep everything together in one repo, you could add supabase as a submodule in the sveltekit project directory/repo.

git submodule add https://github.com/supabase/supabase supabase

4. Setup Caddy Server

Head over the Caddy Server website to download and install the executable.

In the root of your sveltekit project create a new file called Caddyfile, and put this in there:

# To get debug logging on caddy, uncommet below
#{
#   debug
#}

localho.st:8888 {

  @supabase {
      path_regexp supabase ^/(auth|rest|realtime|storage|pg)/.*$
  }

  # reverse proxy requests to supabase paths to the supabase kong http endpoint
  reverse_proxy @supabase http://localho.st:8000 

  # all other request should go to the sveltekit server
    reverse_proxy localho.st:3333
  tls internal
}

Fun Fact about localho.st and caddy

Notice how we defined our domain in the Caddyfile as localho.st? localho.st is a domain that automatically routes to localhost, and Caddy will setup a TLS cert for you automactically too. I thought that was pretty neat.

So, with the simple configuration above, you get a local HTTPS website running without running into any CORS issues in the browser when trying to reach localhost APIs from the client.

This setup gives you something very close to what a production setup could look like.

Final caveat for running svelte in dev mode

Because the dev mode of sveltekit (or maybe it's vite doing it) has a local websocket listener to trigger a refresh when you change somethig on the file system, the caddy server's TLS setup causes problems for that websocket connection. You will see an error like this repeat over and over in our browser console if you run unse npm run dev:

I have not taken the time to figure this out. Instead, what I do is build and then run the app under preview.

pnpm run build
pnpm run preview

5. Putting it all together

With this setup you will need to have three terminals running (and then a fourth to test with curl).

Terminal #1

change into the supabase/docker directory. Then run:

docker-compose up

Terminal #2

change into the sveltekit project directory. Then run:

caddy run

Terminal #3

change into the sveltekit project directory. Then run:

pnpm run build
pnpm run preview

Terminal #4

In this terminal we are going to verify that our caddy server properly matches on the supabase API paths.

Run the below command:

curl -X POST https://localho.st:8888/auth/v1/signup

And you should see this error returns:

{
  "message":"No API key found in request"
}

If you can go back to Terminal 1, you should see some output in the logs like this:

supabase-kong      | 172.18.0.1 - - [16/Dec/2021:15:36:37 +0000] "POST /auth/v1/signup HTTP/1.1" 401 45 "-" "curl/7.64.1"

Don't worry about not having the API key in your curl request. We will handle that in the website.

Finally, open the site in the browser

Now head to https://localho.st/ and you should see the main sveltekit starter page.

We are all set!

Next we will get basic email/password signup, login, and logout working. Stay tuned!

DEV Community: tbonesteaks