You are currently viewing Supabase: Why not use Firebase to implement push notifications? Is it for privacy concerns?

Supabase: Why not use Firebase to implement push notifications? Is it for privacy concerns?

Supabase open source alternative to Firebase is a bold claim.

Firebase exists as a complete solution with offerings like authentication, file storage, serverless functions, SDK, etc.

Firebase has a ton of features but the main attraction is Supabase’s open-source technology.

You can host Supabase on your machine – as a cloud provider and Docker container.

In other words, Supabase has no vendor locking and zero restrictions.

Under the hood of Supabase open source alternative to Firebase

PostgreSQL lies under the hood of Supabase for its database and real-time changes for building several tools.

Supabase currently provides authentication, databases, and storage. However, Supabase serverless functions remain in the development stage at this time.

The Supabase open source alternative to Firebase checks out because:

  • Supabase can handle scaling efficiently provided it uses a SQL database.
  • You can perform complex queries and text searches.
  • Data migration is straightforward. You can import data as a .sql file.

However, some downsides to Supabase use include:

  • Supabase has limited features.
  • You have to enable replication features for a table to receive real-time updates.
  • Security policies don’t apply to real-time updates.
  • SDK support’s available for JavaScript-only (at the time of writing this).

Read on to check out its features.

1. Supabase storage

Supabase storage has open source object storage which supports high scalability file types. You get a convenient API for custom policies and permissions. CDN integration, auto transformation, and media optimization aren’t available yet. With these features, Supabase open source alternative to Firebase can become unstoppable.

2. Authentication support

With Supabase you get:

  • Built-in authentication
  • Authorization, and
  • User management

All without any external tools.

Its API integrates seamlessly with third-party services like Google, Apple, Twitter, Facebook aka Meta (chasing metaverses), GitHub, and what have you.

3. Real-time data management with Supabase

Supabae with PostgreSQL provides real-time updates:

  • Realtime – as the name implies lets you listen to events in PostgreSQL for inserts, updates, and deletions, and converts JSON format to WebSockets.
  • Postgres (meta) – queries PostgreSQL through a REST API.
  • PostgREST – turns the PostgreSQL database to RESTful API.
  • GoTrue – helps you manage users through an SWT API generating SWT tokens.
  • Kong – lets you use a cloud-native API gateway.

How to get started with Supabase open source alternative to firebase

To get started with Supabase:

  1. Sign in and create an organization from the Supabase dashboard.
  2. On the project tab, create a project.
  3. Enter database name, password, and region details.
  4. Click Create new project.

After that do the following to create a table:

  1. On the table tab, select Add new table.
  2. On the flyout menu to the right, enter a database name and its description.
  3. Mark the checkbox for Include primary key.
  4. Under the Primary Key Columns, select from the Name and Type menus to suit.

To turn on real-time updates:

  1. On the left-hand side navigation of the Supabase dashboard, select Database > Replication.
  2. The section displays the table you’ve created in the “create a table” step.
  3. To the far right, turn on the replication toggle.
  4. Supabase displays Insert, Update, Delete and Truncate toggles as on.

You’ve successfully created a database and a table with replication enabled.

Supabase JavaScript API

Now let’s see how to put the Supabase JavaScript API to use.

With JavaScript API, you can query using SQL API methods:

const { data, error } = await supabase
  .from(‘pokemon’)
  .insert([
    { name:’Pikachu’, power: ‘Fire’, description: ‘Fluffy’ },
  ])

Observe how the Supabase connection object selects the table and the operation as it would in SQL.

You can query data in Supabase similar to that in SQL:

let { data: pokemon, error } = await supabase
  .from(‘pokemon’)
  .select(“*”)

You can use “Where” and “Like” clauses similar to SQL to filter options with the Supabase query object. 

  .eq() ,
  .gt() ,
  .lt() ,
  .like() ,
  .is() ,
  .in() 

Supabase and React 

To integrate Supabase open source alternative to Firebase with React, create an app that maintains data about your favorite, say, Pokémon:

npx create-react-app supabase-pokemons 

To install dependencies, you can use a tool like Semantic UI:

yarn add @supabase/supabase-js semantic-ui-react semantic-ui-css react-router-dom

Next, structure the project directories using React’s Content API, as shown below.

Similarly, you can create a .env file on the project root. Apply the following keys:

REACT_APP_SUPABASE_URL= <SUPABASE_URL>
REACT_APP_SUPABASE_KEY= <SUPABASE_KEY>

You can obtain these keys from the Supabase dashboard under Settings > API.

After this, create the Supabase connection under “util/connection.js” using the below code:

import { createClient } from ‘@supabase/supabase-js’;
const REACT_APP_SUPABASE_URL = process.env.REACT_APP_SUPABASE_URL;
const REACT_APP_SUPABASE_KEY = process.env.REACT_APP_SUPABASE_KEY;
export const supabase = createClient(REACT_APP_SUPABASE_URL, REACT_APP_SUPABASE_KEY);

                                              connection.js file

You can add login functionality to the application, with third-party service such as Google or Github.

const signIn = async () => {
        await supabase.auth.signIn({ email: credentials.email, password: credentials.password });
        clear();
    }

    const signUp = async () => {
        await supabase.auth.signUp({ email: credentials.email, password: credentials.password })
        clear();
    }

User management has never been easy. All it takes is a few lines of code.

Supabase integration with Google and GitHub

To integrate with Google and Github, use secret keys from the particular auth provider and those native to Supabase via its dashboard:

const gitHub = async () => {
await supabase.auth.signIn({
            provider: ‘github’
        })
    }

You can use the code above to integrate any supported third-party app or auth providers with Supabase.

Simply change the provider name, and Supabase open source alternative to Firebase does the rest:

import { useState, useEffect, useContext } from “react”
import AppContext from “../AppContext”;
import { useHistory } from “react-router-dom”;
import { Grid, GridColumn, GridRow, Form, FormField, Input, Icon, Button, Header, Segment } from “semantic-ui-react”

const initState = { email: ”, password: ”, passwordConfirm: ” }

function Login({ supabase }) {
    let history = useHistory();
    const [isSignIn, setSignIn] = useState(false);
    const [credentials, setCredentials] = useState(initState);
    const { user, isLoggedIn, login, logout } = useContext(AppContext)

    useEffect(() => {
        const { data: authListener } = supabase.auth.onAuthStateChange(
            async (event, session) => {
                const currentUser = session?.user;
                login(session.user)
            }
        );
        return () => {
            authListener?.unsubscribe();
        };
    }, [user]);

    useEffect(() => {
        if (isLoggedIn) {
            history.push(“/home”);
        }
    }, [isLoggedIn])

    const onChange = (type, value) => {
        setCredentials({ …credentials, [type]: value })
    }

    const clear = () => {
        setCredentials(initState)
    }

    const signIn = async () => {
        await supabase.auth.signIn({ email: credentials.email, password: credentials.password });
        clear();
    }

    const signUp = async () => {
        await supabase.auth.signUp({ email: credentials.email, password: credentials.password })
        clear();
    }

    const gitHub = async () => {
        await supabase.auth.signIn({
            provider: ‘github’
        })
    }

    const google = async () => {
        await supabase.auth.signIn({
            provider: ‘google’
        })
    }

    return (
        <Grid padded>
            <GridRow>
                <GridColumn width={5}></GridColumn>
                <GridColumn width={6}></GridColumn>
                <GridColumn width={5}></GridColumn>
            </GridRow>
            <GridRow>
                <GridColumn width={5}></GridColumn>
                <GridColumn width={6}>
                    <Segment>
                        <Form>
                            <FormField>
                                <Header as=”h5″>Email</Header>
                                <Input placeholder=”Email” value={credentials.email} onChange={(e, { value }) => onChange(’email’, value)}></Input>
                            </FormField>
                            <FormField>
                                <Header as=”h5″>Password</Header>
                                <Input placeholder=”Password” value={credentials.password} onChange={(e, { value }) => onChange(‘password’, value)}></Input>
                            </FormField>
                            {isSignIn ?
                                <FormField>
                                    <Header as=”h5″>Confirm Password</Header>
                                    <Input placeholder=”Password” value={credentials.passwordConfirm} onChange={(e, { value }) => onChange(‘passwordConfirm’, value)}></Input>
                                </FormField>
                                : null}
                            <FormField>
                                <Button onClick={() => isSignIn ? setSignIn(false) : signIn()}>Login</Button>
                                <Button onClick={() => isSignIn ? signUp() : setSignIn(true)}>SignIn</Button>
                            </FormField>
                        </Form>
                    </Segment>
                    <Segment>
                        <Grid>
                            <GridRow>
                                <GridColumn width={8}>
                                    <Button icon labelPosition=’left’ fluid onClick={gitHub}>
                                        <Icon name=’github’ />
                                        Github
                                    </Button>
                                </GridColumn>
                                <GridColumn width={8}>
                                    <Button icon labelPosition=’left’ fluid onClick={google}>
                                        <Icon name=’google’ />
                                        Google
                                    </Button>
                                </GridColumn>
                            </GridRow>
                        </Grid>
                    </Segment>
                </GridColumn>
                <GridColumn width={5}></GridColumn>
            </GridRow>
            <GridRow>
                <GridColumn width={5}></GridColumn>
                <GridColumn width={6}></GridColumn>
                <GridColumn width={5}></GridColumn>
            </GridRow>
        </Grid>
    )
}

export default Login

                                              Login.js file

To create an event listener, create an “AppContext.js” file, and add the data to the application.

Supabase vs Firebase

You can’t go without comparing the two.

1. Importing preexisting data

Supabase allows you to import preexisting data in the following ways:

  • Import a CSV.
  • Copy a spreadsheet and paste it into the project to begin.
  • You can import by migrating from another platform

Firebase doesn’t allow direct uploading of bulk data. You have to use a third-party node script or convert CSV into JSON.

2. Pricing

Supabase open source alternative Firebase means, it’s free. Supabase team plans to charge a fee when they start offering hosting services. Individuals and enterprises are welcome to chip in and sponsor the initiative. For now, that’s in the future.

You can use Firebase’s free plan aka “Spark” to fuel your side projects. Meaning a project without much traffic. Any enterprise has to settle for its Blaze plan (paid) to get hold of Firebase extensions and database storage and space.

3. Relational Db vs NoSQL Db

Supabase is a relational database and Firebase is a NoSQL database. Database choice largely depends on the type of application or project you’re building.

Use Relational Dbs when you have:

  • related
  • rigid or,
  • data that requires consistency.

Use NoSQL Databases when:

  • flexibility is your concern or,
  • you have data of different types and have to make quick decisions.

NoSQL has a faster querying time which can get repetitive. That’s why it’s used in search engines and social media feeds. Performance or consistency? What matters to you will help you decide between the two.

4. Data migration

Data migration in enterprise applications is of paramount importance. NoSQL database data migration without schema or an ORM is relatively difficult. A relational database is easier and Supabase supports it.

You can download all your data and schema as a .sql file from Supabase backups. Or you can dump the latest data using the command line “pg_dump”.

Choosing Supabase or Firebase for data migration depends on your project’s functional requirements and growth potential. Therefore, always DYOR (do your own research).

Firebase alternative open source databases

You have Back4app and Parse as alternatives to Supabase.

Back4app is a BaaS (Backend-as-a-service) company that’s open-source and provides GraphQL APIs. Unlike Firebase, it offers shared and dedicated hosting.  

Parse’s open-source framework is used to develop application backends. It has a large community of developers and it continues to evolve since 2016. You can bank on it for developing applications on an affordable budget.

Final word

Supabase open source alternative to Firebase has some cool offerings. The power of PostgreSQL and zero limitations on data types makes Supabase a strong contender. See Supabase documentation for more information.

Usamansari | Writer at large

Loves to read and watch movies & TV shows | On weekends you'd find me crushing it in the Call of Duty: Mobile | On my way to becoming a Fullstack Web Developer.

Leave a Reply