Supabase Client Setup and Usage

This document provides an overview of setting up and using the Supabase client utility functions located inside the @utils/supabase directory. This utility simplifies interactions with your Supabase backend for authentication and database operations.

Setting Up the Supabase Client

Environment Variables

To get started, you need to set up your environment variables. Follow these steps:

1. Create or Update .env.local File

   Go to the .env.local file in the root directory of your StartupBolt project folder. If it doesn’t exist, copy .env.example in the same root folder and rename it to .env.local.

2. Set Environment Variables

   Copy the Project URL and paste it inside .env.local:

   NEXT_PUBLIC_SUPABASE_URL=your-project-url

   Copy the anon public API key and paste it inside .env.local:

   NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-public-api-key

   Copy the service role secret API key and paste it inside .env.local:

   SUPABASE_SERVICE_ROLE_KEY=your-service-role-secret-api-key

   Note: Ensure the .env.local file is included in your .gitignore to keep it from being pushed to GitHub. Keep all these keys safe by storing them inside the environment file only and never sharing them with anyone.

Creating Supabase Clients

Browser Client

Use the browser client in code that runs on the browser.

import { createClient } from '@/utils/supabase/client';
const supabase = createClient();

Server Client

Use the server client in code that runs on the server.

import { createClient } from '@/utils/supabase/server';
const supabase = createClient();

Using the Supabase Client

The createClient utility function can be used to perform a variety of operations with Supabase.

Example Operations

Retrieve a User

To retrieve the currently authenticated user:

const { data: { user } } = await supabase.auth.getUser();

Authentication

To sign in a user with email and password:

const { data, error } = await supabase.auth.signInWithPassword({
  email: 'example@email.com',
  password: 'example-password',
});

Database Operations

To perform a select query on the countries table:

const { data, error } = await supabase
  .from('countries')
  .select();

Additional Resources

For more detailed information and documentation, visit the Supabase documentation (opens in a new tab).

By following this guide, you can set up and use the Supabase client in your StartupBolt project to interact with your Supabase backend for authentication and database operations seamlessly.