How to Integrate Supabase Authentication Service in a React.js Application


Building a custom authentication system can be a daunting task. It requires a deep understanding of authentication protocols, user authentication and authorization processes. However, by integrating a tool like Supabase, you can focus more on building the core logic of your application.


Supabase is an open source Firebase alternative that provides a cloud-based development platform. It offers a range of backend services such as a full Postgres database, authentication service, and serverless functionality.

It’s designed to be easily accessible, allowing you to set up projects quickly. Follow along to learn how to integrate the authentication service into your React.js applications.


Create a new project on the Supabase developer console

To create a new project on the Supabase Developer Console, follow these steps:

  1. Sign up for a Supabase developer account. Go to dashboard and create a new project.
    Supabase new project settings page on a dark background

  2. Fill in the project name and password (this is optional for this tutorial but recommended when setting up a database), select the area, and finally click Create a new project.
  3. Under API Settings, copy the project URL and the public off a key.
    Supabase API settings page on a dark background

Set up the authentication provider

An authentication provider provides a secure way for users to authenticate using multiple social logins. Supabase provides an email provider by default. Additionally, you can add other providers like Google, GitHub, or Discord as per your preference.

This tutorial will show how to set up Google Provider. to do this. Follow next steps:

  1. In the left pane, select File authentication tab.
    The Authentication Settings tab in the left pane of the Supabase project dashboard

  2. On the Authentication Settings page, select File Providers Finally, select File Google provider from the list of service providers. Note that your email provider is already configured by default. You don’t need to make any configurations.
    List of authentication providers supported by Supabase with email provider enabled by default

  3. Enable a file Provider switch button.
  4. The Google provider requires two entries: ClientID and ClientSecret. You will get these two values ​​after creating an app on Google Developer Console. At the moment, copy a file URL redirect. You will use it to setup an app on Google Developer Console to get ClientID and ClientSecret.
    Supabase's Google Provider Settings page

Set up your project on Google Developer Console (GDC)

To authenticate with Google you will need to register your app on Google Developer Console (GDC) and get ClientID and ClientSecret. Follow these steps to set up a project on GDC:

  1. Go to the Google Developer Console and sign in with your Google account to access the console.
  2. Once you are logged in, go to APIs and services tab, select Create credentials option, then select The OAuth client ID.
    Google Console developer page with Credential Generation and OAuth Client ID options highlighted

  3. Select the application type from the options provided and then fill in the name of your application.
  4. Next, specify your app’s home path URL (http://:localhost:3000), and finally, specify the call redirect URL. Paste the redirect URL you copied from the Supabase Google Provider settings page. Click Memorizes to complete the process.
    Google Developer Console OAuth Client settings popup with clientID and ClientSecret

  5. Copy the Client ID And Client Go back to your Supabase project dashboard and paste in the ClientID and ClientSecret entry fields on the Google Provider Settings page. click Memorizes to enable the provider.
    The Google Provider Settings page on the Supabase Provider Settings dashboard

Configure the Supabase Authentication Service in your React.js application

Create your React.js application, then open the project folder in your favorite code editor. Then, in the root directory of your project folder, create an ENV file to hold your environment variables: the project URL and the public anonymous key. Head over to your Supabase settings page, open the API section, and copy the project URL and the anon public key.

 REACT_APP_SUPABASE_URL= project URL
REACT_APP_SUPABASE_API_KEY = public anon key

1. Install the required packages

Run this command on your device to install the required dependencies:

 npm install @supabase/auth-ui-react @supabase/supabase-js react react-router-dom 

2. Create a login page and success page components

Create a new folder in the /src directory of your React.js application, and name it pages. Inside this folder, create two files: Login.js and Success.js.

3. Create a login page

This component will expose the registration and login feature, using the React.js authentication UI provided by Supabase. I’ve imported the authentication UI as a dependency (@supabase/auth-UI-reaction), which makes implementing the authentication functionality easier.

In login.js file add below code:

 import React from 'react';
import {createClient} from '@supabase/supabase-js';
import {Auth, ThemeSupa} from '@supabase/auth-ui-react';
import {useNavigate} from 'react-router-dom';
const supabase = createClient(
    process.env.REACT_APP_SUPABASE_URL,
    process.env.REACT_APP_SUPABASE_API_KEY
);
function Login() {
    const navigate = useNavigate();
    supabase.auth.onAuthStateChange(async (event) =>{
        if (event !== "SIGNED_OUT") {
            navigate('/success');
        }else{
            navigate("https://news.google.com/");
        }
    })
  return (
    <div className="App">
      <header className="App-header">
        <Auth
            supabaseClient={supabase}
            appearance={{theme: ThemeSupa}}
            theme="dark"
            providers={['google']}
        />
      </header>
    </div>
  );
}
export default Login;

Let’s break it down:

  • Initialize the Supabase client with the environment variables – your project URL and the anon public key in the ENV file.
  • Set up an event listener to track changes in the authentication state using the supabase.auth.onAuthStateChange() method, eg if the authentication state is not ‘SIGNED_OUT’ the user will be taken to the ‘success’ page, otherwise the user will be taken to the ‘page’/ (Home / Login).
  • You will use the useNavigate hook method to manage this process.
  • Finally, return a div containing the React Auth UI component from the Supabase library with the themeSupa theme (provided by Supabase), the dark theme, and the Google provider set as properties.

4. Success page component

This component will display a success page with user details after the user has been successfully authenticated and a logout button.

In Success.js file add below code:

 import React from 'react';
import {createClient} from '@supabase/supabase-js';
import {useNavigate} from 'react-router-dom';
import {useEffect, useState} from 'react';
const supabase = createClient(
    process.env.REACT_APP_SUPABASE_URL,
    process.env.REACT_APP_SUPABASE_API_KEY
);
function Success() {
    const [user, setUser] = useState([]);
    const navigate = useNavigate();
    useEffect (() => {
        async function getUserData(){
           await supabase.auth.getUser().then((value) => {
               if(value.data?.user) {
                setUser(value.data.user)}
            }) }
       getUserData();
    },[]);
    const avatar = user?.user_metadata?.avatar_url;
    const userName = user?.user_metadata?.full_Name;
    async function signOutUser(){
        await supabase.auth.signOut();
         navigate("https://news.google.com/");
     };
  return (
    <div className="App">
      <header className="App-header">
      <h1>Login Successful</h1>
       <h2>{userName}</h2>
       <img src={avatar} />
       <button onClick={()=> signOutUser()}>Sign Out</button>
      </header>
    </div>
  );
}
export default Success;

Let’s break it down:

  • Initialize the Supabase client with the environment variables – your project URL and the anon public key in the ENV file.
  • Use React.js hooks, useState, and useEffect to get data from the API response.
  • The useEffect hook implements an asynchronous function that calls the supabase.auth.getUser method. This method retrieves user information associated with the current user session.
  • The asynchronous function then checks to see if the user data exists and sets it to the instance variable if it does.
  • The SignOutUser function uses the supabase.auth.signOut method to sign the user out and redirect them back to the login page when the sign out button is clicked.
  • Finally, return a div with some user information.

5. Configure page paths

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

In app.js file add below code:

 import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Login from './pages/Login';
import Success from './pages/Success';
function App() {
  return (
    <Router>
      <Routes>
        <Route path="https://news.google.com/" element={<Login />} />
        <Route path="/success" element={<Success />} />
      </Routes>
    </Router>
  );
}
export default App;

Let’s break it down:

  • Define two paths: a path to the login page and a path to the success page using router components from the Interactive Router library.
  • Set the path paths to ‘/’ and ‘success’ respectively, and set the login and success components to their respective paths.
  • Finally, run this command on your terminal to spin up the development server:
      npm start 
  • Go to http://:localhost:3000 on your browser to view the result. The login component exposes Supabase’s React-auth-UI with both email and Google providers.
    Reactjs app showing Supabase authentication feature

You can either authenticate with Google or sign up with your email and password and use those credentials to sign in. The advantage of using Supabase social login providers or email provider is that you don’t have to worry about registration logic.

Once a user signs up with a social service provider or with an email and password, the data will be stored in Supabase’s user Auth database for your project. When logging in with their credentials, Supabase will validate the details against the credentials used for registration.

Supabase Auth user database on the Authentication Settings page

Supabase makes authentication in React easy

Supabase offers a comprehensive set of features that go beyond authentication, such as database hosting, API access, and real-time data streaming. It also provides features such as a query builder and data visualization to help developers build and manage their applications more efficiently.

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