Supabase Client Initialization and Setup

To connect to your database from a frontend application, install the official Supabase JavaScript client SDK.

1. Installing the SDK

Install the package dependency in your project:

# Install the Supabase JS Client
npm install @supabase/supabase-js

2. Environment Variables Configuration

Copy your API keys from the Supabase dashboard and add them to your local .env configuration file.

For Astro projects:

PUBLIC_SUPABASE_URL="https://your-project-id.supabase.co"
PUBLIC_SUPABASE_ANON_KEY="your-anon-public-key-string"

For Next.js projects:

NEXT_PUBLIC_SUPABASE_URL="https://your-project-id.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="your-anon-public-key-string"

• URL: The base gateway API endpoint of your Supabase instance.
• Anon Key: A public key safe to expose in client-side bundles. This key is used by the database Row-Level Security (RLS) system to authorize request scopes.

3. Instantiating the Client

Create a utility file named supabase.ts inside src/lib/ to initialize and export a single, reusable Supabase client instance:

Astro Setup Example

// src/lib/supabase.ts
import { createClient } from "@supabase/supabase-js";

const supabaseUrl = import.meta.env.PUBLIC_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;

if (!supabaseUrl || !supabaseAnonKey) {
  throw new Error("Missing Supabase environment configurations");
}

// Export single client instance
export const supabase = createClient(supabaseUrl, supabaseAnonKey);

Next.js Setup Example

// src/lib/supabaseClient.ts
import { createClient } from "@supabase/supabase-js";

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);