Supabase JS API: The Ultimate Guide

Hey guys! Ready to dive into the awesome world of Supabase and its JavaScript API? If you’re looking to build some cool web or mobile apps with a powerful backend, you’ve come to the right place! Let’s explore what Supabase is all about and how you can leverage its JS API to create amazing things.

What is Supabase?

Supabase is an open-source Firebase alternative that gives you all the tools you need to build a scalable backend. It’s like having your own personal cloud database, authentication system, and real-time server, all rolled into one neat package. The Supabase JS API is your gateway to interacting with all these services directly from your JavaScript code. Think of it as the bridge between your frontend and the powerful Supabase backend.

Why Use Supabase?

So, why should you even bother with Supabase? Well, for starters, it’s open-source , meaning you’re not locked into a proprietary system. You have the freedom to inspect, modify, and even host it yourself if you’re feeling adventurous! Plus, Supabase offers a generous free tier, making it perfect for side projects and learning. It scales effortlessly as your project grows, so you don’t have to worry about migrating to a different backend when things get serious. The real-time capabilities are a game-changer for building collaborative apps or anything that needs instant updates. Imagine building a chat app where messages appear in real-time, or a collaborative document editor where multiple users can work together seamlessly. Supabase makes all of this incredibly easy.

Core Features of Supabase

Supabase isn’t just a database; it’s a complete backend solution! Let’s break down some of its key features:

1. PostgreSQL Database: At its heart, Supabase uses PostgreSQL, a rock-solid, open-source relational database. You get all the power and flexibility of SQL with the added benefits of Supabase’s tooling.
2. Realtime Server: Supabase’s Realtime Server lets you subscribe to database changes and receive updates in real-time via WebSockets. This is perfect for building collaborative and interactive applications.
3. Authentication: Supabase provides a built-in authentication system that supports various providers like email/password, Google, GitHub, and more. It handles all the complexities of user management, so you don’t have to.
4. Storage: Supabase Storage allows you to store and serve files directly from your Supabase project. It’s like having your own personal cloud storage service, optimized for performance and security.
5. Functions: Supabase Functions let you run server-side code in a secure and scalable environment. You can use them to implement custom API endpoints, background jobs, or anything else that needs to run on the server.

Setting Up Your Supabase Project

Alright, enough talk! Let’s get our hands dirty and set up a Supabase project. Don’t worry, it’s super easy! First, head over to the Supabase website and create an account (it’s free!). Once you’re logged in, click the “New Project” button and give your project a name and a secure password. Choose a region that’s close to your users for the best performance. After that, Supabase will spin up your project, which usually takes a few minutes. While you’re waiting, grab a cup of coffee and relax! Once your project is ready, you’ll see a dashboard with all the details you need to connect to your Supabase backend. Take note of your project URL and API key; we’ll need these later.

Installing the Supabase JS Library

Now that our Supabase project is up and running, it’s time to install the Supabase JS library in your project. Open up your terminal and navigate to your project directory. If you’re using npm, run the following command:

npm install @supabase/supabase-js

Or, if you’re using yarn:

yarn add @supabase/supabase-js

Once the installation is complete, you’re ready to start using the Supabase JS API in your code!

Connecting to Supabase

To connect to your Supabase project, you need to initialize the Supabase client with your project URL and API key. Here’s how you can do it:

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

const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseKey = 'YOUR_SUPABASE_API_KEY'
const supabase = createClient(supabaseUrl, supabaseKey)

Replace YOUR_SUPABASE_URL and YOUR_SUPABASE_API_KEY with the actual values from your Supabase project dashboard. Now you have a supabase object that you can use to interact with your Supabase backend!

Basic Operations with the Supabase JS API

Okay, let’s dive into some basic operations you can perform with the Supabase JS API.

Reading Data

To read data from your Supabase database, you can use the from() method to specify the table you want to query and the select() method to specify the columns you want to retrieve. Here’s an example:

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

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

fetchData()

Replace your_table with the name of your table. The select('*') part means you want to retrieve all columns from the table. You can also specify specific columns by passing a comma-separated string to the select() method, like select('id, name, email') .

Inserting Data

To insert data into your Supabase database, you can use the from() method to specify the table you want to insert into and the insert() method to specify the data you want to insert. Here’s an example:

async function insertData() {
  const { data, error } = await supabase
    .from('your_table')
    .insert([
      {
        name: 'John Doe',
        email: 'john.doe@example.com',
      },
    ])

  if (error) {
    console.error('Error inserting data:', error)
  } else {
    console.log('Data inserted successfully:', data)
  }
}

insertData()

Replace your_table with the name of your table. The insert() method takes an array of objects, where each object represents a row you want to insert into the table.

Updating Data

To update data in your Supabase database, you can use the from() method to specify the table you want to update, the update() method to specify the data you want to update, and the eq() method to specify the condition for which rows to update. Here’s an example:

async function updateData() {
  const { data, error } = await supabase
    .from('your_table')
    .update({
      email: 'john.doe.updated@example.com',
    })
    .eq('id', 1)

  if (error) {
    console.error('Error updating data:', error)
  } else {
    console.log('Data updated successfully:', data)
  }
}

updateData()

Replace your_table with the name of your table. The update() method takes an object that represents the columns and values you want to update. The eq() method takes two arguments: the column to compare and the value to compare it to. In this example, we’re updating the email column for the row where the id column is equal to 1.

Deleting Data

To delete data from your Supabase database, you can use the from() method to specify the table you want to delete from and the delete() method to specify the condition for which rows to delete. Here’s an example:

async function deleteData() {
  const { data, error } = await supabase
    .from('your_table')
    .delete()
    .eq('id', 1)

  if (error) {
    console.error('Error deleting data:', error)
  } else {
    console.log('Data deleted successfully:', data)
  }
}

deleteData()

Replace your_table with the name of your table. The delete() method deletes rows from the table. The eq() method takes two arguments: the column to compare and the value to compare it to. In this example, we’re deleting the row where the id column is equal to 1.

Realtime Subscriptions

One of the coolest features of Supabase is its real-time capabilities. You can subscribe to database changes and receive updates in real-time via WebSockets. This is perfect for building collaborative and interactive applications. Here’s how you can set up a real-time subscription:

supabase
  .from('your_table')
  .on('*', (payload) => {
    console.log('Change received!', payload)
  })
  .subscribe()

Replace your_table with the name of your table. The on() method takes two arguments: the event type to listen for and a callback function to execute when the event occurs. The * event type means you want to listen for all events, including INSERT , UPDATE , and DELETE . The callback function receives a payload object that contains information about the change that occurred.

Authentication with Supabase JS

Supabase provides a built-in authentication system that supports various providers like email/password, Google, GitHub, and more. Here’s how you can sign up a user with email and password:

async function signUp() {
  const { data, error } = await supabase.auth.signUp({
    email: 'user@example.com',
    password: 'supersecretpassword',
  })

  if (error) {
    console.error('Error signing up:', error)
  } else {
    console.log('User signed up successfully:', data)
  }
}

signUp()

And here’s how you can sign in a user with email and password:

async function signIn() {
  const { data, error } = await supabase.auth.signInWithPassword({
    email: 'user@example.com',
    password: 'supersecretpassword',
  })

  if (error) {
    console.error('Error signing in:', error)
  } else {
    console.log('User signed in successfully:', data)
  }
}

signIn()

Supabase also provides methods for signing out a user, resetting a user’s password, and managing user sessions. Check out the Supabase documentation for more details.

Supabase Storage

Supabase Storage allows you to store and serve files directly from your Supabase project. Here’s how you can upload a file:

async function uploadFile(file) {
  const { data, error } = await supabase.storage
    .from('your_bucket')
    .upload('public/your_file.jpg', file, { cacheControl: '3600', upsert: false })

  if (error) {
    console.error('Error uploading file:', error)
  } else {
    console.log('File uploaded successfully:', data)
  }
}

Replace your_bucket with the name of your storage bucket. You can create a bucket in the Supabase dashboard. The upload() method takes three arguments: the path to the file in the bucket, the file itself, and an options object. In this example, we’re uploading a file named your_file.jpg to the public folder in the your_bucket bucket. We’re also setting the cacheControl option to 3600 seconds (1 hour) and the upsert option to false , which means the upload will fail if a file with the same name already exists.

Conclusion

And that’s a wrap, folks! You’ve now got a solid understanding of the Supabase JS API and how to use it to build amazing applications. We’ve covered everything from setting up your Supabase project to performing basic database operations, setting up real-time subscriptions, handling authentication, and using Supabase Storage. Keep exploring, keep building, and have fun with Supabase!

Remember, the Supabase documentation is your best friend! It’s packed with detailed information, examples, and best practices. Don’t be afraid to dive deep and explore all the features that Supabase has to offer.

Happy coding, and I’ll see you in the next one!