Supabase JS: Quick Guide to createClient

Hey guys! Let’s dive into Supabase and how to get started with the createClient function in the Supabase JavaScript library. If you’re looking to build awesome applications with a Postgres database and real-time capabilities, Supabase is definitely worth checking out. In this guide, we’ll walk through setting up your Supabase client so you can start interacting with your database like a pro.

What is Supabase?

Before we jump into the code, let’s quickly cover what Supabase actually is. Think of Supabase as an open-source alternative to Firebase. It gives you a suite of tools to build scalable and secure applications. Key features include:

• A Postgres database.
• Realtime subscriptions.
• Authentication.
• Auto-generated APIs.
• Storage.

Essentially, it’s a backend-as-a-service platform that simplifies a lot of the complexities involved in backend development. Now, let’s get to the fun part: setting up our Supabase client using JavaScript.

Setting up Your Supabase Project

First things first, you’ll need a Supabase project. Head over to the Supabase website and create an account (if you don’t already have one). Once you’re logged in, create a new project. You’ll be prompted to enter a name, a database password, and select a region for your database. Choose these carefully! After filling in the details, Supabase will provision your project, which usually takes a few minutes. Once it’s ready, you’ll find your project’s API keys in the project dashboard.

Installing the Supabase JavaScript Library

Alright, with your Supabase project ready, let’s get the JavaScript library installed in your project. If you’re using npm, run:

npm install @supabase/supabase-js

If you’re using yarn, use:

yarn add @supabase/supabase-js

This will download and install the Supabase client library, allowing you to interact with your Supabase backend from your JavaScript code.

Using createClient

The createClient function is the entry point for interacting with your Supabase project. It initializes the Supabase client with your project’s URL and public API key. Here’s how you can use it:

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

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseKey = 'YOUR_SUPABASE_ANON_KEY';

const supabase = createClient(supabaseUrl, supabaseKey);

// Now you can use the supabase client to interact with your database
// For example, fetching data:

async function getData() {
  const { data, error } = await supabase
    .from('your_table')
    .select('*');

  if (error) {
    console.error('Error fetching data:', error);
  } else {
    console.log('Data:', data);
  }
}

getData();

Replace YOUR_SUPABASE_URL and YOUR_SUPABASE_ANON_KEY with your actual Supabase URL and public API key from your project dashboard. The createClient function returns a supabase object, which you’ll use to interact with your database, authentication services, and storage. Always keep your supabaseKey secure and never expose it in client-side code if you are not using Row Level Security (RLS) .

Diving Deeper into Supabase

Understanding the createClient Parameters

The createClient function accepts two mandatory parameters: supabaseUrl and supabaseKey . Let’s break these down:

• supabaseUrl : This is the unique URL for your Supabase project. You can find it in your project dashboard under the “API” section. It typically looks something like https://your-project-id.supabase.co .
• supabaseKey : This is your project’s public API key, also found in the “API” section of your dashboard. It’s used to authenticate requests to your Supabase project. There are two types of keys: anon (public) and service_role (admin). For client-side applications, you’ll generally use the anon key. The service_role key should be kept secret and used only in secure server-side environments.

Additionally, createClient accepts an optional third parameter: options . This is an object that allows you to configure various aspects of the Supabase client. Some common options include:

• schema : Specifies the database schema to use (defaults to public ).
• headers : Custom headers to include in every request.
• autoRefreshToken : Automatically refresh the session when the access token expires (enabled by default).
• persistSession : Persist the session in local storage (enabled by default).
• detectSessionInUrl : Detect the session from the URL (disabled by default).

Here’s an example of how to use the options parameter:

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

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseKey = 'YOUR_SUPABASE_ANON_KEY';

const supabase = createClient(supabaseUrl, supabaseKey, {
  schema: 'myschema',
  headers: { 'x-my-custom-header': 'my-custom-value' },
  autoRefreshToken: true,
  persistSession: true,
  detectSessionInUrl: false,
});

Performing Basic Database Operations

Now that you have your Supabase client set up, you can start performing basic database operations. Here are a few common examples:

Inserting Data

To insert data into a table, use the insert method:

async function insertData() {
  const { data, error } = await supabase
    .from('your_table')
    .insert([{
      column1: 'value1',
      column2: 'value2'
    }]);

  if (error) {
    console.error('Error inserting data:', error);
  } else {
    console.log('Inserted data:', data);
  }
}

insertData();

Selecting Data

To select data from a table, use the select method:

async function selectData() {
  const { data, error } = await supabase
    .from('your_table')
    .select('*');

  if (error) {
    console.error('Error selecting data:', error);
  } else {
    console.log('Selected data:', data);
  }
}

selectData();

Updating Data

To update data in a table, use the update method:

async function updateData() {
  const { data, error } = await supabase
    .from('your_table')
    .update({ column1: 'new_value' })
    .eq('id', 1); // Assuming you have an 'id' column

  if (error) {
    console.error('Error updating data:', error);
  } else {
    console.log('Updated data:', data);
  }
}

updateData();

Deleting Data

To delete data from a table, use the delete method:

async function deleteData() {
  const { data, error } = await supabase
    .from('your_table')
    .delete()
    .eq('id', 1); // Assuming you have an 'id' column

  if (error) {
    console.error('Error deleting data:', error);
  } else {
    console.log('Deleted data:', data);
  }
}

deleteData();

Realtime Subscriptions

One of the coolest features of Supabase is its realtime capabilities. You can subscribe to changes in your database and receive updates in real-time. Here’s how you can set up a realtime subscription:

supabase
  .channel('any')
  .on('postgres_changes', { event: '*', schema: 'public', table: 'your_table' }, payload => {
    console.log('Change received!', payload)
  })
  .subscribe()

This code sets up a channel that listens for any changes to the your_table table in the public schema. When a change occurs (insert, update, delete), the payload contains the details of the change. Realtime subscriptions are incredibly useful for building collaborative applications, live dashboards, and more.

Authentication with Supabase

Supabase provides built-in authentication services, making it easy to manage user sign-ups, sign-ins, and session management. Here’s a quick overview of how to use Supabase Auth.

Signing Up Users

To sign up a new user, use the signUp method:

async function signUpUser(email, password) {
  const { data, error } = await supabase.auth.signUp({
    email: email,
    password: password,
  });

  if (error) {
    console.error('Error signing up:', error);
  } else {
    console.log('Signed up user:', data);
  }
}

signUpUser('test@example.com', 'secure_password');

Signing In Users

To sign in an existing user, use the signInWithPassword method:

async function signInUser(email, password) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email: email,
    password: password,
  });

  if (error) {
    console.error('Error signing in:', error);
  } else {
    console.log('Signed in user:', data);
  }
}

signInUser('test@example.com', 'secure_password');

Signing Out Users

To sign out a user, use the signOut method:

async function signOutUser() {
  const { error } = await supabase.auth.signOut();

  if (error) {
    console.error('Error signing out:', error);
  } else {
    console.log('Signed out user');
  }
}

signOutUser();

Managing User Sessions

Supabase automatically manages user sessions, including refreshing access tokens and persisting sessions in local storage. You can access the current user session using the getSession method:

async function getSession() {
    const { data: { session }, error } = await supabase.auth.getSession()

    if (error) {
      console.error('Error getting session:', error);
    } else {
      console.log('Current session:', session);
    }
}

getSession();

Best Practices and Security Tips

When working with Supabase, it’s essential to follow best practices to ensure your application is secure and performs well. Here are a few tips:

• Use Row Level Security (RLS) : RLS allows you to define fine-grained access control policies at the database level. This ensures that users can only access the data they are authorized to see. Always implement RLS when your supabaseKey is exposed on the client-side.
• Keep Your service_role Key Secret : The service_role key has full access to your Supabase project. Never expose it in client-side code or commit it to version control.
• Validate User Input : Always validate user input to prevent SQL injection and other security vulnerabilities.
• Use Environment Variables : Store sensitive information, such as API keys and database passwords, in environment variables rather than hardcoding them in your code.
• Monitor Your Database : Regularly monitor your database performance and usage to identify and address potential issues.

Conclusion

So, there you have it! You’ve successfully set up your Supabase client using the createClient function and explored some basic database operations, realtime subscriptions, and authentication. Supabase is a powerful tool that can significantly speed up your backend development. Keep experimenting and building awesome stuff! Happy coding, and feel free to dive deeper into the Supabase documentation for more advanced features and capabilities.