Initializing Supabase client

Introduction

We initialize the Supabase client to connect our app to the Supabase backend. This lets us use database, authentication, and storage services easily.

When starting a new project that uses Supabase services

When you want to read or write data to your Supabase database

When you need to authenticate users with Supabase Auth

When you want to upload or download files from Supabase Storage

When setting up your app's backend connection for the first time

Syntax

Supabase

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'https://your-project.supabase.co'
const supabaseKey = 'public-anonymous-key'
const supabase = createClient(supabaseUrl, supabaseKey)

Replace your-project.supabase.co with your actual Supabase project URL.

Use the public anonymous key for client-side apps or service role key for server-side with caution.

Examples

Basic initialization with your project URL and public key.

Supabase

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'https://abc123.supabase.co'
const supabaseKey = 'public-anonymous-key'
const supabase = createClient(supabaseUrl, supabaseKey)

Using environment variables to keep keys safe and not hard-coded.

Supabase

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.SUPABASE_URL
const supabaseKey = process.env.SUPABASE_KEY
const supabase = createClient(supabaseUrl, supabaseKey)

Sample Program

This code initializes the Supabase client and tries to fetch one user from the 'users' table. It prints success with data or error message.

Supabase

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'https://xyz789.supabase.co'
const supabaseKey = 'public-anonymous-key'
const supabase = createClient(supabaseUrl, supabaseKey)

async function testConnection() {
  const { data, error } = await supabase.from('users').select('*').limit(1)
  if (error) {
    console.log('Error:', error.message)
  } else {
    console.log('Success:', data)
  }
}

testConnection()

Important Notes

Always keep your service role keys secret and never expose them in client-side code.

Use environment variables to store your Supabase URL and keys securely.

Test your connection by querying a simple table to confirm setup.

Summary

Initialize Supabase client with your project URL and key.

Use the client to connect your app to Supabase services.

Keep keys secure using environment variables.