Supabase Authentication

The Supabase Authentication strategy in our template provides a comprehensive and ready-to-use solution for managing user authentication. Built on top of the Supabase platform, this approach offers advanced security features, social login integrations, and a user-friendly management interface.

By default, the template comes with the following built-in authentication methods:

• Email/Password - we added, by default, the traditional way of signing in
• Third Party Providers - we also added by default Google and Discord Auth sign-in

You're free to add (or remove) any of the methods supported by Supabase's Authentication.

Configuration

If you open the global configuration at src/config.ts, you'll find the auth object:

import { AuthStrategy } from '@/lib/auth/strategy';
 
export const config = {
  // ...
  auth: {
    strategy: AuthStrategy.SUPABASE,
  },
  // ...
};

To use this method, you need to set the auth.strategy to AuthStrategy.SUPABASE.

Getting Started

To get started with Supabase Authentication, you'll need a Supabase account. If you don't have one yet, you can sign up at https://supabase.com.

Once you have a Supabase account, follow these steps:

• Set Up Your Project in Supabase: Create a new project in your Supabase account and configure your desired authentication settings.
• Retrieve Supabase API Credentials: In your Supabase project settings, you'll find API credentials that you'll need to integrate authentication into your application.
• Set Up Environment Variables: Set up environment variables to use your Supabase API credentials. These variables will be used securely in your application.

Setup

Supabase needs a few settings to be configured in their Dashboard to work correctly. This guide will walk you through the steps to get your Supabase authentication setup.

Authentication URLs

The first thing you need to do is to set the authentication URLs in the Supabase Dashboard. These URLs are used to redirect users to the correct page after they have logged in or signed up.

1. Go to the Supabase Dashboard.
2. Click on the project you want to use.
3. Go to the Authentication tab.
4. Click on URL Configuration.
5. Add your Site URL to the Site URL field. This is the URL of your site (e.g. https://my-site.com).
6. Add your Redirect URLs to the Redirect URLs field. This is the URL of your site with /auth/supabase/callback appended to it (e.g. https://my-site.com/auth/supabase/callback).

Custom SMTP (optional)

If you want to send emails from your own domain, you can configure your SMTP settings in the Supabase Dashboard.

This is optional, but recommended if you want to send emails from your own domain.

1. Go to the Supabase Dashboard.
2. Click on the project you want to use.
3. Go to the Project Settings tab.
4. Click on Auth.
5. Tweak the SMTP Settings settings to your liking according to your provider's documentation.

How it Works

1. User Login: When a user attempts to log in, the provided credentials are sent to the server for validation through Supabase Client library. Then the Supabase checks the credentials against their user repository.
2. Creating a Session: Upon successful validation, Supabase generates a session token, uniquely identifying the user's session. This token is securely stored in an HTTP cookie on the client's browser.
3. React Server Components: With the session token in place, React Server Components come into play. These components are used to fetch user-specific data directly on the server, utilizing the session token for authentication. This ensures that sensitive user information remains secure.
4. Rendering React Components: The data fetched by React Server Components is then passed to the relevant React components for rendering. This allows us to provide a personalized user experience without exposing sensitive information to the client-side JavaScript.

Explore More

Supabase offers a wide range of features beyond authentication, including database functionalities and APIs. Make sure to explore the Supabase documentation to take full advantage of the platform's capabilities.