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

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)

3. Change the Magic Link

• Go to the Email template in Authentication and select the magic link.
• First of all change the subject heading from “Your Magic Link” to “Your OTP Sign In”.
• Do the changes in the source code .

<h2>OTP Sign In</h2>

<p>Enter this OTP to login:</p>

<p>{{ .Token }}</p>



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.

3. Write Custom Code

Create a Get OTP Custom Action

• When user click on Get OTP button, than below cutom action will trigger.
• This action was used to send OTP in the email.
• In this custom action we need an argument which is email.
• From this action you can get OTP in your mail.

// 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 getOtp(String email) async {

// Add your function code here!



 // Get a reference your Supabase client

 final supabase = Supabase.instance.client;



 await supabase.auth.signInWithOtp(

   email: email,

   shouldCreateUser: false,

 );

}



Create a Confirm OTP custom action

• User enter the OTP in dialogue box and click the Verify OTP butyon than below custom action will trigger.
• 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 email.

// 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> confirmOtp(String token, String email) async {

 // Add your function code here!

 // Get a reference your Supabase client

 final supabase = Supabase.instance.client;

 try {

   await supabase.auth.verifyOTP(

     type: OtpType.magiclink,

     token: token,

     email: email,

   );

   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;

 }

}



Conclusion

Email OTP (One-Time Password) authentication with Supabase in FlutterFlow is a robust and user-friendly approach to secure authentication. By leveraging Supabase's powerful backend services and FlutterFlow's no-code/low-code platform, you can implement seamless user authentication without compromising on security.

• Validation and Error Handling: Ensure proper error messages for scenarios like invalid emails or expired OTPs.
• Security Rules: Use Supabase’s Role-Based Access Control (RBAC) to secure data and limit access to authenticated users.

‍