Supabase: Setup & Auth

Summary

Supabase is an open source Firebase alternative built on PostgreSQL, which worked particularly nicely for this project since we were already familiar with Postgres and it would also provide easy authentication, instant APIs, and a shared source of truth for our development process.

Getting Started

Once you've signed up for an account, take some time to discuss and diagram your database schema. If you are planning on using Supabase's authentication features, it will be important to know that your users table (auth.users) will be kept separate from the rest of your tables and will contain only information specifics to the authentication functionality. If you would like to have something like user profiles, you will need to create that as a separate table (with references to auth.users).

Authentication Table

As mentioned, if you want to use Supabase's authentication features, it can be helpful to set up the auth.users table sooner rather than later. Even without a front end, this can be accomplished by inviting users via the "+ Invite" button in the Authentication view.

By default, users will be sent a magic link which will log them into the site. We wanted to use email confirmation on sign up and then have users log in with a password. To achieve this, we enabled the Confirm Email setting under Settings.

No matter your sign up/log in method, you'll want to make sure to configure the auth settings to allow new signups and to point to your base url for development

Creating Tables

We created a very simple schema consisting of moments, journals, and profiles. All three of these tables reference the user's id in the auth.users table as a foreign or primary key. Because we are using authentication, we also set up Row Level Security on our moments and journals tables. This way, for example, we can request all moments on the front end and will only be sent back moments that match the logged in user's id. You can set up the policies as your create your tables, or add them later (which we will discuss).

Working In JavaScript

Since we are using Supabase with JavaScript, we followed the instructions found here. This page also provides all of the JS-specific functions you will need to write queries.

1. Install supabase-js
2. Create a supabaseClient.js file in your src folder.
3. In that file add the following:

import { createClient } from '@supabase/supabase-js'

// Create a single supabase client for interacting with your database

const supabase = createClient('https://xyzcompany.supabase.co','public-anon-key')

You can find your supabaseUrl and supabaseKey in the API > Authentication settings.

4. In any file which you wish to read or write data to/from Supabase, simply import the supabaseClient at top of the file: import { supabase } from "../../server/supabaseClient";

Authentication Policies

In our Authentication > Policies, we set RLS policies on our moments and journals tables. These ensured that users would only see their own moments and journal entries.

These policies make sure that the user id found in the auth token on the front end matches the user id in the respective db table.

SELECT and DELETE requests will need this logic in the USING section, while INSERT and UPDATE will need the same logic in the WITH CHECK section.

Using Supabase In Your Code

The syntax for reading and writing to/from Supabase in your code will be somewhat different than other languages/libraries you've used whether that be Sequelize, SQL, etc. However, their documentation is quite helpful and we found it to be easy to pick up. A typical request might look something like this:

const { data, error } = await supabase.from("moments").select().order("created_at", { ascending: false });

Their custom auth functions also make sign up and logging in very easy:

const { error } = await supabase.auth.signIn({ email, password });