How To Integrate React JS Apps with Supabase

Supabase is an open source realtime database, authentication, and storage service for web and mobile apps. It is built on top of Postgres, giving you access to all the features of Postgres, with no need to worry about the complexities of managing a server. Supabase provides an easy way to integrate React applications with its authentication, database, and storage services. In this article, we will look at how to install Supabase in ReactJS, handle authentication, and integrate the database and storage services.

What Is Supabase?

Supabase is an open source realtime database, authentication, and storage service for web and mobile apps. It is built on top of Postgres, giving you access to all the features of Postgres, with no need to worry about the complexities of managing a server. Supabase is a great alternative to traditional databases, as it is easier to use and provides a robust set of features.

How To Install Supabase in ReactJS?

Installing Supabase in ReactJS is straightforward and simple. First, install the Supabase SDK in your React app:

npm install @supabase/supabase-js

Next, import the SDK into your React component:

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

Finally, create a Supabase instance with your project credentials:

const supabase = new Supabase({
  url: 'https://your-project-url.supabase.co',
  key: 'your-project-key'
})

How to Handle Supabase Authentication in React JS?

Supabase provides an easy way to handle authentication in React apps. It allows you to register and log in users, as well as manage their accounts. Here is a quick overview of how to handle authentication in React apps with Supabase.

Registration with Supabase in React

To register a new user with Supabase in React, you can use the supabase.auth.signup() method. This method accepts an object containing the registration details, such as the username, email address, and password. Here is an example of how to use it:

const { username, email, password } = this.state

supabase.auth.signup({
  username,
  email,
  password
})
  .then(user => {
    console.log('User registered successfully!')
  })
  .catch(err => {
    console.error('Error registering user:', err)
  })

Login with Supabase in React

To log in a user with Supabase in React, you can use the supabase.auth.login() method. This method accepts an object containing the login details, such as the username or email address, and the password. Here is an example of how to use it:

const { username, password } = this.state

supabase.auth.login({
  username,
  password
})
  .then(user => {
    console.log('User logged in successfully!')
  })
  .catch(err => {
    console.error('Error logging in user:', err)
  })

Supabase Database Integration in React

Supabase provides an easy way to integrate the database into React apps. It allows you to write, read, update, and delete data from the database. Here is a quick overview of how to use the database in React apps with Supabase.

Writing Data to Supabase in React

To write data to Supabase in React, you can use the supabase.data.insert() method. This method takes an object containing the data you want to insert into the database. Here is an example of how to use it:

const data = {
  title: 'My Post',
  content: 'This is my post content.'
}

supabase.data.insert('posts', data)
  .then(res => {
    console.log('Data inserted successfully!')
  })
  .catch(err => {
    console.error('Error inserting data:', err)
  })

Reading Single Data from Supabase in React

To read single data from Supabase in React, you can use the supabase.data.get() method. This method takes the table name and the ID of the record you want to retrieve from the database. Here is an example of how to use it:

supabase.data.get('posts', '12345')
  .then(res => {
    console.log('Data retrieved successfully!')
  })
  .catch(err => {
    console.error('Error retrieving data:', err)
  })

Reading Lists from Supabase in React

To read lists of data from Supabase in React, you can use the supabase.data.query() method. This method takes a SQL query string and an object containing the parameters of the query. Here is an example of how to use it:

const query = `
  SELECT *
  FROM posts
  WHERE title LIKE :title
`

const params = {
  title: '%My Post%'
}

supabase.data.query(query, params)
  .then(res => {
    console.log('Data retrieved successfully!')
  })
  .catch(err => {
    console.error('Error retrieving data:', err)
  })

Pagination with Supabase in React

To paginate data from Supabase in React, you can use the supabase.data.paginate() method. This method takes a SQL query string and an object containing the parameters of the query, as well as the page number and page size. Here is an example of how to use it:

const query = `
  SELECT *
  FROM posts
`

const params = {
  title: '%My Post%'
}

const pageNumber = 1
const pageSize = 10

supabase.data.paginate(query, params, pageNumber, pageSize)
  .then(res => {
    console.log('Data retrieved successfully!')
  })
  .catch(err => {
    console.error('Error retrieving data:', err)
  })

Sorting & Filtering with Supabase in React

To sort and filter data from Supabase in React, you can use the supabase.data.sort() and supabase.data.filter() methods. These methods take a SQL query string and an object containing the parameters of the query, as well as the sorting and filtering parameters. Here is an example of how to use them:

const query = `
  SELECT *
  FROM posts
`

const params = {
  title: '%My Post%'
}

const sortBy = 'title'
const sortOrder = 'asc'
const filterBy = 'published'
const filterValue = true

supabase.data.sort(query, params, sortBy, sortOrder)
  .then(res => {
    return supabase.data.filter(res.sql, res.params, filterBy, filterValue)
  })
  .then(res => {
    console.log('Data retrieved successfully!')
  })
  .catch(err => {
    console.error('Error retrieving data:', err)
  })

Supabase Storage Integration in React

Supabase also provides an easy way to integrate the storage service into React apps. It allows you to upload, download, and delete files from the storage service. Here is a quick overview of how to use the storage service in React apps with Supabase.

Uploading Files to Supabase in React

To upload files to Supabase in React, you can use the supabase.storage.upload() method. This method takes a file object and an optional object containing the metadata of the file. Here is an example of how to use it:

const file = document.querySelector('#file').files[0]

const metadata = {
  title: 'My File',
  description: 'This is my file description.'
}

supabase.storage.upload(file, metadata)
  .then(res => {
    console.log('File uploaded successfully!')
  })
  .catch(err => {
    console.error('Error uploading file:', err)
  })

Downloading Files from Supabase in React

To download files from Supabase in React, you can use the supabase.storage.download() method. This method takes the file ID of the file you want to download. Here is an example of how to use it:

const fileId = '12345'

supabase.storage.download(fileId)
  .then(res => {
    console.log('File downloaded successfully!')
  })
  .catch(err => {
    console.error('Error downloading file:', err)
  })

Deleting Files from Supabase in React

To delete files from Supabase in React, you can use the supabase.storage.delete() method. This method takes the file ID of the file you want to delete. Here is an example of how to use it:

const fileId = '12345'

supabase.storage.delete(fileId)
  .then(res => {
    console.log('File deleted successfully!')
  })
  .catch(err => {
    console.error('Error deleting file:', err)
  })

Conclusion

In this article, we looked at how to use Supabase to integrate React applications with its authentication, database, and storage services. We covered how to install Supabase in ReactJS, handle authentication, and integrate the database and storage services. We also provided code examples of how to write, read, update, delete, upload, download, and delete files in React apps with Supabase. With Supabase, you can easily and quickly add powerful features to your React apps.