Skip to content
Cloudflare Docs

Supabase

Supabase ↗ is an open source Firebase alternative and a PostgreSQL database service that offers real-time functionality, database backups, and extensions. With Supabase, developers can quickly set up a PostgreSQL database and build applications.

Supabase client setup

To set up an integration with Supabase:

  1. You need to have an existing Supabase database to connect to. Create a Supabase database ↗ or have an existing database to connect to Supabase and load data from ↗.

  2. Create a countries table with the following query. You can create a table in your Supabase dashboard in two ways:

    • Use the table editor, which allows you to set up Postgres similar to a spreadsheet.
    • Alternatively, use the SQL editor ↗:
    CREATE TABLE countries (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) NOT NULL
    );

  3. Insert some data in your newly created table. Run the following commands to add countries to your table:

    INSERT INTO countries (name) VALUES ('United States');
    INSERT INTO countries (name) VALUES ('Canada');
    INSERT INTO countries (name) VALUES ('The Netherlands');

  4. Configure the Supabase database credentials in your Worker:

    You need to add your Supabase URL and anon key as secrets to your Worker. Get these from your Supabase Dashboard ↗ under Settings > API, then add them as secrets using Wrangler:

    Terminal window
    # Add the Supabase URL as a secret
    npx wrangler secret put SUPABASE_URL
    # When prompted, paste your Supabase project URL
    

    # Add the Supabase anon key as a secret
    npx wrangler secret put SUPABASE_KEY
    # When prompted, paste your Supabase anon/public key

  5. In your Worker, install the @supabase/supabase-js driver to connect to your database and start manipulating data:

    Terminal window
    npm i @supabase/supabase-js

  6. The following example shows how to make a query to your Supabase database in a Worker. The credentials needed to connect to Supabase have been added as secrets to your Worker.

    JavaScript
    import { createClient } from "@supabase/supabase-js";
    

    export default {
      async fetch(request, env) {
        const supabase = createClient(env.SUPABASE_URL, env.SUPABASE_KEY);
        const { data, error } = await supabase.from("countries").select("*");
        if (error) throw error;
        return Response.json(data);
      },
    };

To learn more about Supabase, refer to Supabase's official documentation ↗.