Supabase

Supabase is a popular open-source platform (Firebase alternative) that provides many interesting services, like, Authentication, Postgres Database, Realtime database, Edge functions, REST API, GraphQL, and so on.

Shipped supports Supabase Auth with these methods:

- magic link auth - email and password - SSO (social login)

Due to the many changes that affect the codebase of Shipped, there is a dedicated branch called supabase. If you intend to use Supabase Auth, move to the supabase branch and start working on top of it.

Move to the supabase branch:

terminal

git checkout supabase

Supabase get started

To use Supabase, start creating a new Supabase project at https://database.new/

Configure the default Site URL and Redirect URLs under Authentication > URL Configuration on Supabase.

Supabase Authentication > URL Configuration

Environment variables

Once done, you need to set two environment variables:

.env

NEXT_PUBLIC_SUPABASE_URL=""
NEXT_PUBLIC_SUPABASE_ANON_KEY=""

You can retrieve the values from https://supabase.com/dashboard/project/_/settings/api

We have dedicated guides about the setup of Supabase Auth:

• Supabase Auth

• Supabase Magic Link

• Supabase Email & Password

• Supabase Authentication Flow

Supabase Postgres

Supabase provides a Postgres database to get started and for free.

If you want to use it in your Shipped-based SaaS, follow these instructions.

You need to set two environment variables DATABASE_URL and DIRECT_URL.

To retrieve them go to your Supabase project (click here https://supabase.com/dashboard/project/_/settings/api) and click on the "Connect" button.

In the modal, click on the ORMs tab and select Prisma.

Below you'll find the two environment variables, copy the values and paste them into your local .env file. Just remember to replace [YOUR-PASSWORD] with the password you set for your database.

Remember to set DATABASE_URL and DIRECT_URL to your hosting service as well.

After this step, click on the prisma/schema.prisma tab in the Supabase modal, and copy the content. Paste it into your local schema.prisma file, removing any duplicates.

prisma/schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider  = "postgresql"
  url       = env("DATABASE_URL")
  directUrl = env("DIRECT_URL")
}

The DATABASE_URL is used when you run your application, while DIRECT_URL is used by the npx prisma commands, like db push or migrate.

You're now setup with your Supabase Postgres database 🎉

Custom domain

You can configure your custom domain in Supabase, so that when a user logs in, instead of the supabase domain, they will see your domain.

This is not mandatory, and this is a paid feature of Supabase, you can find more information on the official Supabase documentation.

Google sign in page with a Supabase default domain