Skip to content

Develop with Supabase

This document will guide you through the initialization and usage of Supabase in your mono-repo, which includes Expo, Next.js, and common components. Your Supabase local setup already includes edge functions, Google Auth, email auth, tables, and storage buckets.

Architecture

Please refer here for the architecture.

Supabase Initialization

Since your local Supabase setup is already configured, follow these steps to initialize and use Supabase in your projects.

  • Start Docker: Make sure docker is running before you start the supabase setup.

  • Starting Supabase: Start the Supabase local development environment by running the pre-written scripts in root package.json:

    Terminal window
    npm run supabase:start
  • Environment Variables: The previous command will show you a set of sercet keys, save them for future references. Update the relevant keys in all the env files provided. e.g.

    SUPABASE_URL=http://localhost:54321
    SUPABASE_KEY=your-anon-key
    SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
    SUPABASE_JWT_SECRET=your-jwt-secret

You have successfully initialized Supabase. You can now leverage Supabase’s powerful features such as edge functions, authentication, tables, and storage buckets. If you encounter any issues, refer to the Supabase documentation for further assistance.

Migrations

The migrations are setup that gives the supabase db, some table, their RLS security policy rules. It includes :

  • Tables and storage buckets for database which are linked via primary keys.
  • Row level security policies implemented in both tables and storage.
  • Triggers on events like create_new_user.

Edge Functions

We have three edge functions in this project :

  • payment-data-native : This webhook is used to initialising payment with stripe for native devices.

  • payment-data-web : This webhook is used to initialising payment with stripe for the web.

  • stripe-webhook : This webhook is never triggered directly or called by the client, instead it is only called when any relevant event in stripe is triggered.

Setup ENV
  • The environmental varianbles used by the edge functions are different from what is provided to the supabase root folder env.

  • The location of these env is apps/supabase/supabase/functions/stripe-webhook/.env.example

  • Enter the secret keys required.

    # for all edge functions for development with docker, this will the url and not localhost
    # BASE_SUPABASE_URL http://host.docker.internal:54321/ if BASE_SUPABASE_URL is http://localhost:54321/
    # SERVICE_ROLE_KEY is SUPABASE_SERVICE_ROLE_KEY
    BASE_SUPABASE_URL=
    SERVICE_ROLE_KEY=
    # for supabase edge function only if you're connecting to stripe
    STRIPE_WEBHOOK_SIGNING_SECRET=
    STRIPE_SECRET_KEY=
    STRIPE_PUBLISHABLE_KEY=
There are 2 methods to using the edge functions :
  • invoking directly : supabase.functions.invoke can be used to directly call the edge function from the client app. It returns a promise which is then resolved.

    const { data, error } = await supabase.functions.invoke('hello', {
    body: { foo: 'bar' }
    })
  • serving the edge function : you can serve the edge function and it will work as an api call.

    Note: --no-verify-jwt flag is required to avoid cors-error i.e, if your client is web based.

    npx supabase@latest functions serve --no-verify-jwt <function-name> --env-file /path/to/env-file

    e.g.

    npx supabase@latest functions serve --no-verify-jwt stripe-webhook --env-file ./supabase/functions/stripe-webhook/.env.development

    or you can use the script already created and just run

    Terminal window
    npm run supabase:webhook-serve