Multi-Factor Authentication

Overview

Multi-factor authentication (MFA), also known as two-factor authentication (2FA), is a security feature that adds an extra layer of protection to your application. It ensures that users must verify their identity through an additional step, making it more difficult for unauthorized users to access accounts.

Optional MFA Feature

In the Next.js Supabase SaaS template, MFA is an optional feature that users can choose to enable. By opting into MFA, users enhance the security of their accounts through additional verification steps.

To enable MFA, you must configure the client.config.ts file. In the auth section, set the enableMFA flag to true:

auth: {
  enableMFA: true
}

Once enabled, the MFA section will appear in the template under the My Account page, allowing users to activate and configure MFA for their accounts.

MFA Workflows

Supabase supports two key workflows for MFA:

1. Enrollment Flow: This allows users to set up and manage MFA in the application.
2. Authentication Flow: Once MFA is enabled, users authenticate using an additional factor after the standard login step.

Supabase provides several APIs to support MFA functionality:

• Enrollment API: Facilitates the process of adding or removing authentication factors.
• Challenge and Verify APIs: Ensures the user has access to their chosen authentication factor by securely verifying their identity.
• List Factors API: Enables building interfaces where users can choose which authentication factor to use during sign-in.

MFA Enrollment Process

When a user chooses to enable MFA in the UI, the following steps occur:

1. Enabling MFA:

   • Users activate MFA by toggling the setting in the UI, triggering the Enrollment API.
   • A QR code will appear, which the user must scan using an authenticator app (such as Google Authenticator or Authy).
   • The user then enters the six-digit code generated by the authenticator app.

2. Verification:

   • The code entered by the user is challenged and verified using the Challenge and Verify APIs.
   • Upon successful verification, MFA is enabled for that user’s account.

3. Ongoing Sign-In:

   • Once MFA is enabled, the user must enter a six-digit code from the authenticator app each time they sign in.

Disabling MFA

While it is not recommended to disable MFA for security reasons, users do have the option to unenroll. This can be done through the UI, but doing so removes the extra layer of security provided by MFA.

Database Access Control

After enabling MFA, your application should implement access control based on the user's current authentication level. This can be managed using Supabase’s PostgreSQL policies.

For more detailed information, refer to the Supabase Auth MFA Documentation.