Securing your Flutter apps with Multi-Factor Authentication

Summary

The tutorial presents a Flutter app that requires multi-factor authentication before users can view its content, using email and password login followed by authenticator-app verification. It uses Supabase for authentication, supabase_flutter for client integration, go_router for routes and redirects, and flutter_svg to display a QR code for authenticator enrollment. During signup, users confirm their email through a deep link, enroll MFA, and then verify a code; login applies a similar second step. iOS and Android deep-link configuration directs the confirmation callback to the enrollment route, while routing checks the session and authenticator assurance level to send users to registration, enrollment, or verification as appropriate. The stated outcome is that only users who have signed in via MFA can access the home page, while optional MFA is identified as a possible future variation.

Takeaways

1. 1

   Supabase MFA enrollment follows email confirmation and uses an authenticator app, with a QR code displayed through flutter_svg.

2. 2

   go_router checks the session and authenticator assurance level to redirect users to registration, MFA enrollment, or MFA verification.

3. 3

   The demonstrated flow restricts access to the home page until the user has completed MFA; making MFA optional would require code changes.