Supabase setup

In this guide we show you how you can easily set up your supastarter application with Supabase.

We will use Supabase as the database and storage provider. The authentication feature of Supabase is not supported with supastarter as we use better-auth for authentication, which will directly store the user data in your database.

Before we start, make sure you have a Supabase account. If you don't have one yet, you can create one for free at supabase.io.

1. Create a new Supabase project

2. Get connection strings

In the supabase dashboard, click the Connect button in the top row. Select the ORM tab and Prisma as the tool.

We will need both the DATABASE_URL and the DIRECT_URL.

3. Create a new supastarter project

As described in the supastarter documentation, you can create a new supastarter project by running the following command:

npx supastarter new

In the CLI wizard, you will be asked for the database connection string. Paste the value of the DIRECT_URL from step 2. Make sure to replace the password placeholder in the connection string with the one you created in step 1.

4. Set environment variables

After your project has been created, open the .env.local file and set the environment variables as follows:

# Connect to Supabase via connection pooling with Supavisor.
DATABASE_URL="postgres://postgres.[your-supabase-project]:[password]@aws-0-[aws-region].pooler.supabase.com:6543/postgres?pgbouncer=true"

# Direct connection to the database used by the Prisma CLI.
DIRECT_URL="postgresql://postgres:password@db.[your-project-ref].supabase.co:5432/postgres"

Make sure to replace the password and project ref placeholders with your own values.

5. Run migrations

To push the database schema to Supabase, run the following command in the project root:

pnpm --filter database push

After the migrations are run, make sure to enable RLS for all created tables in the Supabase dashboard.

6. Connect Supabase storage for file uploads

To enable file uploads (e.g. for user avatars or organization logos), you can use the Supabase storage feature which is S3-compatible.

Go to the Storage tab in the Supabase dashboard and click the Create bucket button.

Name the bucket avatars as this is the default name used by supastarter. You can also change the bucket name for avatars in the packages/storage/config.ts file.

Make sure to deactivate the Public bucket switch, as you don't want to expose your files to the public. The access control is managed at the API level of your application.

Now, you need to get the credentials for the supabase storage service. Navigate to Project settings from the sidebar and select the Storage tab. Scroll down to the S3 access keys section and click the New access key button.

Add the following environment variables to your .env.local file:

S3_ACCESS_KEY_ID="your-access-key"
S3_SECRET_ACCESS_KEY="your-secret-key"
S3_ENDPOINT="https://[YOUR-PROJECT-REF].supabase.co/storage/v1/s3"

7. Run development server

Now you should be able to start the development server:

pnpm dev

If you want to manually generate the prisma client, you can run:

pnpm --filter database generate

That's all it takes to set up supastarter with Supabase!