Supabase is an open-source Firebase alternative that provides a cloud-based development platform. It offers a range of backend services such as a fully-fledged Postgres database, an authentication service, and serverless functionalities.
It is designed to be more accessible, allowing you to set up projects quickly. Follow along to learn how to integrate the authentication service in your React.js applications.
Create a New Project on Supabase Developer Console
To create a new project on Supabase Developer Console, follow these steps:
Sign up for a Supabase developer account. Navigate to the dashboard and create a new project. Fill in the Project’s Name, and a password (this is optional for this tutorial but recommended when setting up a database), select the region, and finally click Create new project. Under API Settings, copy the project URL and the public anon key.
Set Up an Auth Provider
An auth Provider provides a secure way for users to authenticate using various social logins. Supabase by default provides an email provider. Additionally, you can add other providers such as Google, GitHub, or Discord depending on your preferences.
This tutorial will demonstrate how to set up a Google Provider. To do so, follow these steps:
In the left pane, select the Authentication tab. In the Authentication settings page, select the Providers option, and finally, select the Google Provider from the list of providers. Notice that the email provider is already configured by default. You don’t need to make any configurations. Enable the Provider toggle button. The Google Provider requires two inputs: a ClientID and a ClientSecret. You will get these two values after creating an application on Google Developer Console. For now, copy the Redirect URL. You will use it to set up an application on Google Developer Console to obtain the ClientID and ClientSecret.
Set Up Your Project on Google Developer Console (GDC)
To authenticate with Google, you will need to register your app on the Google Developer Console (GDC) and obtain a ClientID and ClientSecret. Follow these steps to set up a project on GDC:
Go to Google Developer Console and sign in with your Google account to access the console. Once logged in, navigate to the APIs and Services tab, choose the Create Credentials option, and then select OAuth client ID. Specify the type of application from the options provided and then fill in the name of your application. Afterward, specify your app’s home route URL (http//:localhost:3000), and finally, specify the callback redirect URL. Paste in the redirect URL you copied from the Supabase Google Provider settings page. Click on Save to complete the process. Copy the ClientID and ClientSecret and go back to your Supabase Project dashboard and paste them on the ClientID and ClientSecret input fields in the Google Provider settings page. Click Save to enable the Provider.
Configure Supabase Authentication Service in a React.js Application
Create a React.js application, and then open the project folder in your favorite code editor. Next, in the root directory of your project folder, create an ENV file to hold your environment variables: your project URL and your public anon key. Head over to your Supabase settings page, open the API section, and copy the project URL and the public anon key.
1. Install the Required Packages
Run this command on your terminal to install the required dependencies:
2. Create the 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. Login Page Component
This component will render a signup and sign-in feature, utilizing the React.js Authentication UI provided by Supabase. You imported the auth UI as a dependency (@supabase/auth-UI-react), making it simpler to implement the authentication functionality.
In the login.js file, add the code below:
Let’s break it down:
Initialize a Supabase client with the environment variables – your project URL and your public anon key in the ENV file. Set up an event listener to track changes in the authentication state using supabase. auth. onAuthStateChange() method i. e. If the authentication state is not “SIGNED_OUT” then the user is navigated to the ‘/success’ page, otherwise, the user is navigated to the ‘/’ (home/login) page. You will use the navigate method from the useNavigate hook to manage this process. Finally, return a div containing the React Auth UI component from the Supabase library with an appearance of themeSupa (provided by Supabase), dark theme, and Google provider set as properties.
4. Success Page Component
This component will render a success page with the user details after a user is successfully authenticated and a sign-out button.
In the Success.js file, add the code below:
Let’s break it down:
Initialize a Supabase client with the environment variables – your project URL and your public anon 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 the user information associated with the current user’s session. The asynchronous function then checks to see if the user data exists and sets it to the state variable if they do. The signOutUser function uses the supabase. auth. signOut method to sign out the user and navigate them back to the login page when they click on the sign-out button. Finally, return a div with some of the user information.
5. Configure the Page Routes
Finally, configure the routes for both the login and success pages.
In the app.js file, add the code below:
Let’s break it down:
Define the two routes: a route for the login page and a route for the success page using the Router components from the react-router library. Set the route paths to ‘/’ and ‘/success’ respectively, and assign the Login and Success components to their respective routes. Finally, run this command on your terminal to spin up the development server:
Navigate to http//:localhost:3000 on your browser to view the result. The login component renders Supabase’s React-auth-UI with both the email and Google providers.
You can either authenticate using Google or sign up with your email and password and use these credentials to sign in. The advantage of using Supabase’s social login providers or the email provider is that you don’t need to worry about the signup logic.
Once a user signs up with a social provider or with an email and a password, the data will be stored on Supabase’s Auth user database for your project. When they sign in using their credentials, Supabase will validate the details against the credentials used to signup.
Supabase Makes Authentication in React Easy
Supabase offers a comprehensive suite of features beyond authentication, such as database hosting, API access, and real-time data streaming. It also offers features like query builder and data visualization to help developers build and manage their applications more efficiently.
With its intuitive dashboard and robust API, Supabase is a powerful tool for building scalable and secure applications.
