Supabase is an open-source Firebase substitute. It uses Postgres rather than NoSQL and includes several features that make it easy to build and deploy real-time applications. Supabase products include the Postgres database and authentication service, storage, and Edge functions (serverless functions for backend logic). The ease of getting started with Supabase is one of its many benefits. Their mantra, "Build in a week, scale to millions," is evident in how quickly applications are built and shipped. It offers completely integrated solutions that do not rely on third-party services. Furthermore, because it is open-source, you have ownership and control over user data. Several authentication mechanisms are available, including *Basic email authentication

Magic Link or one-time login with email (OTP).
Social logins: Facebook, Google, Github, Twitter.
Phone/SMS login using Twilio, MessageBird, and Vonage.

This tutorial will look at one of its core offerings, authentication with email magic links. We will implement a robust authentication system, fetch user profiles, and update user information.

Prerequisites

Basic JavaScript and ReactJs Knowledge. Here's a guide to help you get started
Experience with Supabase is beneficial but not required.
Node.js and npm should be installed on your machine.

Source Code and Demo

GitHub Repo Link

Live Demo

Creating A new Supabase Project

Go to Supabase and click on create a “New Project”

Enter Project Details

Wait for a new database to launch

Get API Keys

Got to the sidebar and click on API, your URL, anon key, and service_role as below

Setup database schema

Go to the side Bar on the dashboard and select SQL editor, you will be presented with a similar screen as below

Edit the Querry to your preference and click run

You have successfully created a new database!!!

Building your react application

Initialize A React Application

There are two ways to scaffold a react Application: Using Create-React-App (CRA) and Using Vite For this tutorial, You will be using CRA On your terminal run: where supabase-react is your project directory

npx create-react-app supabase-react

Start your project

cd supabase-react

Then you need to installsupabase-js, an isomorphic JavaScript client for Supabase.

npm install @supabase/supabase-js

Finally, create a .env file and add your API URL and the anon key that you copied earlier:

REACT_APP_SUPABASE_URL=YOUR_SUPABASE_URL 

REACT_APP_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

Now you need to create a helper file to initialize Supabase client copy the following code to your SupaBaseClient.js

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

const supabaseUrl = process.env.REACT_APP_SUPABASE_URL const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

Next, create a Login.js component and add the code here

Create a Account.js and add the following code here

Create an Avatar.js component and add the following code

Add the following code to your app.js file

import './index.css'
import { useState, useEffect } from 'react'
import { supabase } from './SupaBaseClient'
import Account from './Account'
import Login from './Login'

export default function App() {
  const [session, setSession] = useState(null)

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session)
    })

    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session)
    })
  }, [])

  return (
    <div className="container" style={{ padding: '50px 0 100px 0' }}>    
      {!session ? <Login /> : <Account key={session.user.id} session={session} />}
    </div>
  )
}

Add some index.css from here.

Run npm start to start your application.

Open the browser to localhost:3000 and you should see your app as below

Why Supabase?

There are numerous reasons why you should use Supabase :

Postgres is one of the world's most scalable databases trusted by millions of developers. Supabase uses the row-level security built into Postgres to offer a reliable, native solution for permissions, thus secure and reliable.
Importing pre-existing data Starting over is one of the difficulties developers face. Supabase can import data from other databases, making it simple to migrate existing data into the platform. Supabase also offers a straightforward method for migrating data from one database to another.
Relational databases Supabase includes built-in support for relational databases, allowing you to work with related data easily. This can be useful for businesses with complex data models that want to ensure that their data is organized in an easy-to-understand and work-with manner.
Pricing Supabase's pricing model is flexible, allowing businesses to pay only for the required resources. Additionally, Supabase provides a free plan for new developers, allowing them to test the platform without incurring costs.
Documentation From how users can easily navigate the documentation inside the Supabase dashboard and solve problems on their own, Supabase provides the most practical way of keeping development on track. Supabase includes extensive and user-friendly documentation.

Supabase Alternatives

Appwrite

Appwrite, like Supabase, is an open-source cloud-based platform that provides various tools and services for developing web and mobile applications. It is more complex than other options and thus necessitates expertise to set up and maintain.

It is still in its early stages and thus has a smaller community than the Supabase. Although Appwrite supports a variety of other technologies and services, it lacks many pre-built integrations.

It is pricey for larger and more complex projects because it requires hosting and support.

Firebase

Unlike Supabase, Firebase is not open source. It's expensive, has limited scalability, and is more reliant on third parties.

Data migration is one of Firebase's main limitations: Being aware of how data will be transferred between platforms. Because the backend of an app is hosted externally, easy access or control over updating certain parts of the app may result in problems with no way out other than starting over.

Firebase does not support querying. Because it cannot query more than one key at a time, there is no way to filter your data. The entire database is a JSON file, which eliminates the possibility of modeling the data.

Conclusion

This post has explained how to start a project with Supabase and build a react application with Supabase. To learn more please visit Supabase's official documentation here.

A guide on Supabase