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‍

• Registration page : - User has to sign up first using email id and password.

‍

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.

To set up your Twilio account, please follow the steps below:

Twilio Account setup

• Create your twilio account through email.
• Copy Account SID, Auth Token, My Twilio phone number and past that in supabase phone authentication.
• Set them and enable phone authentication in supabase.

Write Custom Code

Create a sign Up With Phone custom action

• This action is used for create/register the user account.
• It has three arguments which has Phone, password and confirmPassword.

// 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<String?> signUpWithPhone(

 String phone,

 String password,

 String confirmPassword,

) async {

 // Add your function code here!

 // Get a reference your Supabase client

 final supabase = Supabase.instance.client;



 if (confirmPassword == password) {

   try {

     await supabase.auth.signUp(

       phone: phone,

       password: password,

     );

     return (null);

   } on AuthException catch (e) {

     return (e.message);

   }

 } else {

   return ('Passwords do not match. Please try again.');

 }

}



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 phone.
• 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: false,

 );

}



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;

 }

}



Create a Check for Authentication custom action

• This action is used for check the authentication is done or not.
• This return a Boolean value.
• If authentication is done then navigate to home page, else on the same page.

// 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> checkAuth() async {

 // Add your function code here!

 // Get a reference your Supabase client

 final supabase = Supabase.instance.client;



 final Session? session = supabase.auth.currentSession;



 if (session != null) {

   print('Signed In!');

   return true;

 } else {

   print('No sign in');

   return false;

 }

}



Note :

Through that OTP was send to the admins registered Number Because through trial account you cannot send messages to the unverified numbers. To send OTP for login to every unverified numbers 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.

‍