Skip to main content

Supabase Authentication Setup

This document explains how to set up authentication using Supabase. We will cover two methods: Magic Links and Google Authentication.

Configuration​

Ensure you have the following environment variables configured in your .env file:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=<your_supabase_url>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<your_supabase_anon_key>

For Google Authentication​

# Supabase
NEXT_PUBLIC_SUPABASE_URL=<your_supabase_url>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<your_supabase_anon_key>
SUPABASE_GOOGLE_CLIENT_ID=<your_google_client_id>
SUPABASE_GOOGLE_CLIENT_SECRET=<your_google_client_secret>

Middleware and Client Setup​

In your project, you have already set up the necessary middleware and client scripts to handle authentication. These scripts are located in the supabase directory and are crucial for managing user sessions and handling authentication processes.

Middleware for Session Management​

The middleware script is located in supabase/middleware.ts. This script updates the user session by creating a Supabase client with server-side capabilities, managing cookies to maintain session state.

Client Scripts​

The client scripts are divided into two parts: one for the browser and one for the server.

Browser Client​

The browser client script is located in supabase/client.ts. This script initializes the Supabase client for client-side operations, allowing your application to interact with Supabase from the browser.

Server Client​

The server client script is located in supabase/server.ts. This script initializes the Supabase client for server-side operations, handling tasks such as checking user authentication and managing server-side cookies.

Authentication Methods​

Magic Links allow users to sign in using a link sent to their email. This method is simple and secure, as it does not require a password.

  1. Environment Configuration: Make sure your .env file has the correct Supabase settings:

    NEXT_PUBLIC_SUPABASE_URL=<your_supabase_url>
    NEXT_PUBLIC_SUPABASE_ANON_KEY=<your_supabase_anon_key>

  2. Send Magic Link: Use the Supabase client to send a magic link to the user's email. You can refer to the client script for the exact implementation.

  3. Handling Authentication: Supabase manages the authentication state for you. Use the client script to check if a user is authenticated.

Conclusion​

Whether you choose Magic Links or Google Authentication, Supabase provides a flexible and secure solution. Make sure to configure your environment variables correctly and refer to the existing middleware and client scripts in your project for implementation.

For more detailed information, you can refer to the Supabase documentation.