This guide explains how to quickly connect Subabase API with Clutch.

What is Supabase?

Supabase is a backend as a service providing you with all the necessary tools you need to build your product.
You can create a backend in less than 2 minutes and start your project with a Postgres Database, Authentication, instant APIs, Realtime subscriptions, and Storage.

Supabase Projects

Each project on Supabase comes with these features:

  • A dedicated Postgres database.
  • Auto-generated APIs.
  • Auth and User management.
  • Storage.

What can I achieve with Clutch & Supabase?

Anything you can think of where a database would be necessary for your project.
Examples include building a blog, real-time chat app, booking platform, and todo list, Supabase, and Clutch provides all the necessary tools to build your projects quickly and efficiently.

Getting Started

  1. Create a new project in Supabase
    Sign up / Sign In to Supabase - https://app.supabase.io and create a new project. Then wait for your database to start.

once you have created a new project you should see a screen similar to this.

  1. Install Supabase by Supabase from the Clutch marketplace
    In a Clutch project, you will need to install the Supabase components from the marketplace (Supabase By Supabase).

Gif showing installation of Supabase components by Supabase

  1. Connect your Clutch project to your Supabase project
    In the Clutch tool using the SupabaseApp component and set the clientURL and publicAnonKey properties using the API keys from Supabase. These can be found on the home page of your project if not there is a way to get your API key from the settings of your Supabase project which will be described in more detail below.

Image of SupabaseApp component with clientURL and publicAnonKey props.

Where to find your clientURL and publicAnonKey in Supabase

If by chance your clientURL and publicAnonKey are not on the project's home screen they can be found here.

  1. In the project, you created in Supabase go to the Project Settings (the cog icon ⚙️)

  1. open the API tab

  1. Copy your API URL and anon key and paste them into your Clutch project.

URL and anon key

The anon key is your client-side API key. It allows "anonymous access" to your database until the user has logged in. Once they have logged in, the keys will switch to the user's own login token. This enables row level security for your data.

Additional Documentation

More information on how to use the Supabase components can be found in the Supabase component project itself, found here.