Working 2024 Method! Phone OTP in FlutterFlow and Supabase

In this beginner-friendly tutorial, we dive into the world of app development using FlutterFlow and Supabase. Learn how to implement phone OTP authentication in your app with Supabase, a powerful tool for user authentication. Follow along as we guide you through the process step by step, making it easy to understand even for those new to coding. This tutorial covers everything you need to know about integrating phone OTP verification in FlutterFlow and Supabase, making it a must-watch for anyone interested in nocode app development. Don't miss out on this comprehensive Supabase tutorial combined with FlutterFlow, perfect for beginners looking to enhance their app development skills!
Sign up for a free Twilio account:
www.twilio.com/en-us/messagin...
Link to my GitHub to copy the custom actions from:
github.com/xolotlwastaken/Pho...
Clone the Base Project Here:
app.flutterflow.io/project/ph...
Chapters
00:00 - Intro
01:27 - Configuring Supabase Phone Provider and Twilio
05:21 - Adding Custom Actions
07:58 - Register with Phone Number
10:24 - OTP Login
15:50 - Testing OTP Function
19:23 - Testing Phone Registering Function
------------------------------------------------------------------------------------------------------------------------
V i d e o s t o w a t c h n e x t
Master Flutterflow API Integration
• Master Flutterflow API...
Integrate Simple Search using Supabase
• Simple Search in Flutt...
Everything you need to know about DataTables
• Complete Beginners Gui...
------------------------------------------------------------------------------------------------------------------------
Have any questions? Reach out to me!
Instagram: @just_xolotl

[@manikandann1202]

Hi, Thanks a lot for your videos.I can learn flutterflow and supabase very clear from your content. I have a small request. Can you please upload a video for OTP verification during sign up with email and password method?. You already upload a video for OTP verification for sign in.

[@just_xolotl]

Sure! 👍

[@zleep3918]

Amazing! 🤩

[@pierremusa9678]

Great video! Thanks for sharing

[@just_xolotl]

Thanks! 😁

[@DefinitelyNotJohnTse]

thank you sir

[@just_xolotl]

Most welcome good sir

[@Viju489]

Awesome video, much help. I have a question though, should the phone number not be verified when the account is created the 1st time. Anyone could use a fake number to log in initially and have access to the app by not signing out?

[@just_xolotl]

Yup that’s a great idea.

[@Viju489]

@@just_xolotlplease share how you configured the OTP component itself? I presume you adapted it from the pin component found ready made in flutterflow? What changes did you make to it for this use case

[@just_xolotl]

I didn't make any changes to the widget itself. All I added were the custom actions

[@Viju489]

@@just_xolotl thanks, I managed🖤

[@user-kf5fy1di2n]

where did you get this otp component from?

[@just_xolotl]

It’s a pre-made component which should be available to everyone if you search for it in the shared components

[@vijaybalajin4096]

is there any way to make sms otp login and signup for flutter app - my daily use case is 50 otp for free

[@just_xolotl]

Yes there is. You can still use Supabase using the same method in the video. The custom code should be the same

[@hassanalsakka]

Thank you for these videos. Is it possible to create a video on how to implement registration and login with OTP via Telegram? This method allows users to enter their number on Telegram and receive an OTP, which is free and effective, as far as I know."

[@just_xolotl]

Alright I’ll look into it thanks for the suggestion

[@hassanalsakka]

@@just_xolotl i am waiting

[@kraei9799]

How to clone flutterflow project?

[@just_xolotl]

just put in the link! You should be able to clone it now!

[@adarshrathi8265]

excellent for get phone no

[@just_xolotl]

Thank you 🙏

[@pratheeshrj1643]

Great it is very helpful for learning. I tried ib test mode but it's throwing error like Invalid Phone number format (E.164 format required). I am from India and I tried with the format +91 XXXXX XXXXX where +91 is our country code and I tried with different combinations but no luck. Can you please what is the correct format.

[@just_xolotl]

Hi did you use the same phone number you verified with in Twilio? If you only have the free Twilio account, you can only send messages to that phone number.

[@just_xolotl]

You can also check to see if you enabled sending messages to your region (India) in the Twilio settings

[@pratheeshrj1643]

@@just_xolotl Yes I have used the same phone number which verified in Twilio.

[@pratheeshrj1643]

@@just_xolotl Where I can see these options in settings? I couldn't able to locate

[@pratheeshrj1643]

@@just_xolotl Yes I have used the same number which is verified in Twilio.