Announcing support for Multi-Factor Authentication (MFA) with Supabase

A sneak peek to our coming feature for Multi-Factor Authentication (MFA) with Supabase.

·3 min read
Cover Image for Announcing support for Multi-Factor Authentication (MFA) with Supabase

I'm excited to announce that Makerkit is adding support for Multi-Factor Authentication (MFA) the Supabase kits. This is a sneak peek to our coming feature.

What is MFA?

Multi-Factor Authentication (MFA) is a method of authentication that requires more than one piece of evidence to verify the user's identity. It is a way to add an extra layer of security for your users' accounts.

Should you add MFA to your app?

If you're building an app that requires a high level of security, then you should definitely consider adding MFA to your app. For example, if you're building an app that requires users to manage their finances, then you should definitely add MFA to your app.

Your users will feel more secure knowing that their accounts are protected by MFA, and it can be a potential differentiator for your app. I don't see a reason not to offer this functionality to your users.

How does MFA work?

Supabase allows us to use TOPT (Time-based One-time Password) to generate a one-time password (OTP) that the user can use to login to their account using their second authentication factor.

Supabase MFA in Practice

Step 1. Users will enroll an authentication factor (e.g. Google Authenticator)

The first step for your users is to enroll a new authentication factor using an Authenticator app (such as Google Authenticator or Authy).

  1. The first thing they are required to do is to specify a name for their new authentication factor: Supabase supports up to 10 factors (more than enough for sure!). This name will be used to identify the authentication factor in the Authenticator app, and will help users remember which factor they are using.
  2. Then, they're required to scan the QR code with the authenticator app. This will generate a secret key that will be used to generate the OTP.
  3. After confirming the one-time code generated by the authenticator app, the user will be able to use their new authentication factor to login to their account.

Loading video...

Step 2. Users will login to their account using their email and password

After logging in, we will check if users have enrolled any MFA factor. According to Supabase, this rarely uses the network and it's a very fast check. After logging in using the first authentication factor, the users' assurance level is aal1.

If users are required to use MFA, then we will redirect them to the MFA page. This page will prompt them to select a factor: for example, a factor enrolled using a work smartphone. If only one factor is enrolled, then it will be automatically selected.

Then, they will be required to enter the OTP generated by the authenticator app for that factor. If the OTP is correct, then the user will be logged in to their account. Their assurance level is upgraded to aal2.

Loading video...

Conclusion

I'm excited to add this feature to our kits. I think it's a great way to add an extra layer of security to your app. I hope you enjoyed this sneak peek to our coming feature. If you have any questions, feel free to reach out on our Discord server.


Read more about Changelog

Cover Image for Introducing Marketing Components: Crafting Stunning Landing Pages with Ease

Introducing Marketing Components: Crafting Stunning Landing Pages with Ease

·5 min read
We're excited to announce the release of Marketing Components, a collection of reusable UI components for marketing websites and landing pages.
Cover Image for Introducing the Testimonial Plugin for Makerkit

Introducing the Testimonial Plugin for Makerkit

·4 min read
Introducing a new plugin to add testimonials to your app with ease
Cover Image for Creating a Delightful Onboarding Experience with Multi-Step Forms

Creating a Delightful Onboarding Experience with Multi-Step Forms

·10 min read
In this post, we'll show you how to create a delightful onboarding experience using the Multi-Step Form Component for Makerkit.
Cover Image for Introducing the Multi-Step Form Component for Makerkit

Introducing the Multi-Step Form Component for Makerkit

·3 min read
We're excited to announce the release of the Multi-Step Form Component for Makerkit. This component allows you to create multi-step forms with ease.
Cover Image for Announcing the Feedback plugin

Announcing the Feedback plugin

·3 min read
The feedback plugin is a new feature that allows your users to give feedback on your app.
Cover Image for Announcing the Version Updater component

Announcing the Version Updater component

·3 min read
The version updater component is a new feature that allow your app to check for updates and prompt the user to install them.