Skip to main content

Authentication 🔐

This guide will help you implement and configure a secure authentication system, powered by Supabase. It offers several authentication methods, each designed to accommodate different needs, whether you're building a simple app or a complex platform. You can choose the authentication flow that best fits your requirements.

You can refer to the official Supabase documentation for more detailed information on authentication.

⚙️ Prerequisites​

Before you begin implementing the authentication system, you need to set up some environment variables and configurations. The following steps will prepare your environment for authentication:

  1. Set up the Environment Variables

    You need to define the required environment variables for authentication in your .env file. These variables control which authentication methods are enabled.

    NEXT_PUBLIC_AUTH_PASSWORD = true | false
    NEXT_PUBLIC_AUTH_MAGIC_LINK = true | false

    Set these values according to the authentication methods you plan to use (e.g., if you're using email/password authentication, set NEXT_PUBLIC_AUTH_PASSWORD=true). You can enable both methods if you want to offer multiple authentication options.

  2. Configure the authConfig File

    The apps/web/src/configs/authConfig.ts file controls the authentication providers. You need to configure this file to match the authentication methods you've enabled through the environment variables.

    {
      providers: {
        password: boolean, // value from NEXT_PUBLIC_AUTH_PASSWORD in .env
        magicLink: boolean, // value from NEXT_PUBLIC_AUTH_MAGIC_LINK in .env
        oAuth: [] // Array of enabled OAuth providers
      }
    }

    While password and magic link can be configured through environment variables, OAuth configurations must be modified directly in the authConfig file.

🔑 Authentication Methods​

We offer three main authentication methods:

  1. Email/Password Authentication: A traditional method for user registration and login, with additional features like password reset and email verification.
  2. Magic Link Authentication: A passwordless authentication system that uses one-time magic links sent to users' emails for secure access.
  3. OAuth Authentication: Allows users to sign in using their credentials from third-party services like Google, GitHub, etc. and can be easily extended to other providers.

Each authentication method is explained in detail in the following sections of this documentation. You'll find step-by-step guides, code examples, and configuration instructions for each method.