Supabase Client Setup and Usage

You will learn how to use the Supabase client utility functions located in the @utils/supabase directory. These utilities simplify authentication and database interactions with your Supabase backend.

Setting Up Supabase

Before using the Supabase client, you need to set up and configure Supabase. Follow these guides:

• Setting Up Supabase
• Setting Up Supabase Configuration

Creating Supabase Clients

Supabase clients can be created for different runtime contexts: browser, server, and static pages. Here's how to set them up:

Browser Client

Use the browser client for operations running in the browser, such as within use client components.

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

Server Client

Use the server client for operations that execute on the server.

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

Static Client

Use the static client for operations on static pages, such as those using generateStaticParams. The static client does not rely on cookies, headers, or runtime-specific data.

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

Note: generateStaticParams pre-generates paths at build time and does not have access to runtime data like cookies or headers.

Using the Supabase Client

The createClient utility function allows you to interact with Supabase for authentication and database operations. Here are some common examples:

Example Operations

Retrieve a User

To retrieve the currently authenticated user:

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

Database Operations

To perform a select query on the countries table:

const { data, error } = await supabase
  .from('countries')
  .select();
 
if (error) {
    console.error('Error fetching data:', error);
} else {
    console.log('Retrieved data:', data);
}

Additional Resources

For more detailed information, refer to the official Supabase documentation (opens in a new tab).

By following this guide, you can set up and effectively use the Supabase client in your StartupBolt project, enabling seamless authentication and database interactions.