Passwordless: Simplify User Experience with Passwordless Login

Eliminate the need for passwords. Thus providing a faster, safer, more convenient experience and reducing fraud risks for your users.

What is Passwordless?

Passwordless is a form of authentication that does not require the use of passwords. Using methods such as biometric keys (fingerprint, facial recognition), magic links (unique and sent via email or SMS) and OTP codes (unique and sent via email, SMS or WhatsApp). In this article, we will focus on the use of OTP codes sent via email. Let’s see how to implement this functionality in a FlutterFlow application with Supabase.

Advantages of Passwordless

• Security: Without a password, there is no password to be stolen.
• Ease to implement: No need to remember a password.
• Ease of implementation: No need to create password recovery methods.

How to use Passwordless with FlutterFlow and Supabase?

We will follow the following steps:

1. Connect Supabase to your FlutterFlow project
2. Send an OTP code to the user
3. Check the OTP code to allow access

At the end of these steps, you will have an application like the one shown below:

Step 01: Connect Supabase to your FlutterFlow project

If you don’t already have a Supabase account, create an account. Then create a new project. Once this is done, in FlutterFlow go to Settings & Integrations > Supabase and add API URL and Anon Key. You will find this data in your Supabase project under Project Settings > API : URL and anon public.

Step 02: Send an OTP code to the user

Before sending the OTP code, you need to:

1. Enable authentication in FlutterFlow. Remembering that for this project we will only have two pages: Login Page and Home Page.

2. Update Supabase authentication email templates.
   
   

Once this is done, on the Login Page page, we will create a login form with an email field and a button to send the OTP code (security code).

Future<String?> signInPasswordless(
  // Add a parameter to receive the email
  String email,
) async {
  final supabase = SupaFlow.client;
 
  try {
    await supabase.auth.signInWithOtp(email: email, shouldCreateUser: true);
 
    return 'success';
  } catch (e) {
    print(e);
  }
}

Future<String?> signInPasswordlessUserAdmin(
  // Add a parameter to receive the email
  String email,
) async {
  final supabase = SupaFlow.client;
 
  try {
    final data = await supabase
        .from("profile")
        .select("role")
        .eq("email", email.trim())
        .single();
 
    if (data != null && data["role"] == "admin") {
      await supabase.auth
          .signInWithOtp(email: email.trim(), shouldCreateUser: false);
 
      return 'success';
    } else {
      return 'Você não tem permissão para acessar esse aplicativo.';
    }
  } catch (e) {
    print(e);
  }
}

To send the OTP code, you can call the action signInPasswordless in the click event of the Continue button.

If everything is correct, the user will receive an email with the OTP code similar to the one shown below:

Step 03: Check OTP code to allow access

Still on the Login Page page, we will check the OTP code (security code), to complete the login and take the user to the Home Page page.

// Add two parameters to receive the email and the token
Future<String?> verifyOTP(String email, String token) async {
  final supabase = SupaFlow.client;
 
  try {
     final AuthResponse response = await supabase.auth
        .verifyOTP(email: email, token: token, type: OtpType.email);
 
    // response > session info
    return 'success';
  } catch (e) {
    print(e);
  }
}

Let’s adjust the Login Page page. Use the ConditionalBuilder widget to display a new layout when the email with the OTP code is sent. In this condition, show a PinCode Widget for the user to enter the security code. Configure the On Completed event to call the verifyOtp. Also, add an option to resend the OTP code if the user does not receive the email.

If the OTP code is verified successfully, the user will be redirected to the page Home Page.

Finally, you can add a logout button on the Home Page page to allow the user to exit the application.

Conclusion

Aaaand… here’s Lowcoder 🔥! You have just implemented an authentication system passwordless in your FlutterFlow app with Supabase. Now your users can access your application quickly and securely, without the need to remember passwords.

References

• Supabase
• Passwordless Authentication
• Video Shorts of the App working