Building a custom authentication system can be a daunting task.

It requires a deep understanding of authentication protocols, and user authentication and authorization processes.

Supabase is an open-source Firebase alternative that provides a cloud-based development platform.

Computer screen showing HTML and CSS code side by side

Supabase by default provides an email provider.

Additionally, you might add other providers such as Google, GitHub, or Discord depending on your preferences.

This tutorial will demonstrate how to set up a Google Provider.

Supabase new project settings page on a dark background

Inside this folder, create two files: Login.js and Success.js.

In the login.js file, add the code below:

Let’s break it down:

4.

In the Success.js file, add the code below:

5.

Supabase API Settings page on a dark background

Configure the Page Routes

Finally, configure the routes for both the login and success pages.

When they sign in using their credentials, Supabase will validate the details against the credentials used to signup.

With its intuitive dashboard and robust API, Supabase is a powerful tool for building scalable and secure applications.

Authentication Settings Tab on the left pane of Supabase Project Dashboard

A list of Auth Providers Supported by Supabase with the email provider enabled by default

Supabase’s Google Provider Settings Page

Google Console Developer Page with Create Credential and OAuth Client ID options highlighted

Google Developer Console OAuth Client settings pop up window with clientID and ClientSecret

Google Provider settings page on Supabase Provider settings dashboard

Reactjs application showing Supabase Authentication Feature

Supabase Auth User Database on the Authentication settings page