Overview

Using FlutterFlow, Supabase, and OTP (One-Time Password) Authentication together can provide a powerful, secure, and scalable way to build mobile and web apps with user authentication. Let me explain why you might need to combine these three technologies:

OTP (One-Time Password) authentication is a secure and user-friendly way to verify users. Instead of remembering a password, users receive a time-sensitive code via email or SMS to log in or register.

Prerequisites

• Supabase
• Flutterflow
• Twilio

Supabase Project Setup

Supabase is a backend service that helps you quickly set up essential backend components like databases, authentication, and real-time data syncing.

To set up your Supabase project, please follow the steps below:

1. Create a Supabase project

• Go to the supabase console.
• Click on Create a project and follow the instructions to set up a new project.

2. Enable Supabase Authentication

• In the Supabase console, go to the Authentication section.
• click Providers and enable sign-in methods you need (e.g.- Email, Phone)

Flutterflow Project setup

FlutterFlow is a low-code platform that makes it easy to build beautiful and functional apps quickly, without needing deep coding knowledge. It offers an intuitive drag-and-drop UI builder, integrations, and the ability to export the underlying Flutter code for more customization if needed.

To set up your Flutterflow project, please follow the steps below:

1. Create a Flutterflow project

• Go to the Flutterflow console.
• Click on Create a project and follow the instructions to set up a new project.
• Developed three pages and one component : -‍

            Pages

• ‍Login Page : - User enters their email id and clicks Get OTP,  which is sent to their email.

• Home Page : - After login user will navigate to Home page.

Component

• OTP Component : - Appears as a dialog box after the user enters their email id and clicks Get OTP, allowing them to input and verify the OTP.

2. Enable  Supabase Authentication in Flutterflow

• Go in the settings Enable authentication and select Supabase authentication type in flutterflow console.
• Set up the entry and login page.
• Enable Supabase in flutterflow and fill API URL and Anon Key from supabase.

• Go to Supabase project select supabase project settings choose API then copy URL and Anon Key and paste in flutterflow console.
• Go to settings and enable supabase, fill the API URL and Anon Key from the supabase project, and get schema.

Flutterflow SupaBase Phone OTP Authentication

In the phone OTP authentication we need to do one extra thing which was Twilio.

Twilio

Twilio is a cloud communications platform that enables developers to integrate various communication methods such as voice, video, messaging, and email into their applications. Twilio provides APIs and tools that make it easy to build communication functionality into mobile apps, web applications, or even hardware devices.

Twilio Account setup

• Create your twilio account through email and phone number.
• Go to Account Dashboard and scroll down than you will see Account info section.

• For My Twilio phone number , you have to click on Messaging → Services → Create Messaging Service.
• Copy Account SID, Auth Token, My Twilio phone number.
• Now Go to Supabase Dashboard → Authentication → Provider → Select Phone and Enable Phone Provider.
• Set SMS provider(Twilio).
• Set Twilio Account SID(Account SID).
• Set Twilio Auth Token(Auth Token).
• Set Twilio Message Service SID(My Twilio phone number).

‍

Write Custom Code

Create a Get OTP Custom Action

• This action was used to send OTP in the phone.
• In this custom action we need a argument which is your Twilio registered phone number.
• From this action you can get OTP in you phone.

// Automatic FlutterFlow imports

import '/backend/supabase/supabase.dart';

import '/flutter_flow/flutter_flow_theme.dart';

import '/flutter_flow/flutter_flow_util.dart';

import '/custom_code/actions/index.dart'; // Imports other custom actions

import '/flutter_flow/custom_functions.dart'; // Imports custom functions

import 'package:flutter/material.dart';

// Begin custom action code

// DO NOT REMOVE OR MODIFY THE CODE ABOVE!



import 'package:supabase_flutter/supabase_flutter.dart';



Future getPhoneOtp(String phone) async {

// Add your function code here!



 // Get a reference your Supabase client

 final supabase = Supabase.instance.client;



 await supabase.auth.signInWithOtp(

   phone: phone,

   shouldCreateUser: true,

 );

}



Create a Confirm OTP custom action

• This action is used for confirm/verify the OTP
• In this  custom action we need two arguments.
• First one was OTP code and the second was phone.
• Fill the OTP console through received OTP.

// Automatic FlutterFlow imports

import '/backend/supabase/supabase.dart';

import '/flutter_flow/flutter_flow_theme.dart';

import '/flutter_flow/flutter_flow_util.dart';

import '/custom_code/actions/index.dart'; // Imports other custom actions

import '/flutter_flow/custom_functions.dart'; // Imports custom functions

import 'package:flutter/material.dart';

// Begin custom action code

// DO NOT REMOVE OR MODIFY THE CODE ABOVE!



import 'package:supabase_flutter/supabase_flutter.dart';



Future<bool> confirmPhoneOtp(String token, String phone) async {

 // Add your function code here!

 // Get a reference your Supabase client

 final supabase = Supabase.instance.client;

 try {

   await supabase.auth.verifyOTP(

     type: OtpType.sms,

     token: token,

     phone: phone,

   );

   return true;

 } catch (error) {

   return false;

 }

}



Note :

Through that OTP was send to the admin's registered number because, through a trial account, you cannot send messages to the unverified numbers. To send OTP for login to every unverified number, you need to purchase a Twilio number to send messages to unverified numbers also.

Conclusion

Mobile OTP authentication with Supabase in FlutterFlow combines simplicity, security, and scalability, making it an ideal solution for modern applications. It caters to mobile-first users while leveraging the best practices in authentication, allowing developers to deliver a secure and seamless user experience.

• Real-Time Feedback: Provide users with clear instructions and error messages during the OTP process.
• Data Security: Use Supabase’s Role-Based Access Control (RBAC) and row-level security to protect user data.

‍