Flutter Firebase Phone Number OTP Authentication - Flutter Firebase 2023
ฝัง
- เผยแพร่เมื่อ 23 ก.ค. 2024
- In this flutter firebase tutorial, we will learn flutter firebase phone number OTP authentication.
PLAYLIST: • Flutter Login App - UI...
In this video, we'll be learning how to create a Flutter Firebase phone number OTP authentication. This will allow us to secure our phone numbers with an OTP verification mechanism.
Flutter is a new mobile development framework that has been gaining a lot of popularity lately. In this video, we'll be using Flutter to create a Firebase phone number OTP authentication. This will allow us to secure our phone numbers with an OTP verification mechanism.
So whether you're a beginner or an experienced developer, be sure to check out this video and learn how to create a Flutter Firebase phone number OTP authentication!
LOGIN APP PLAYLISTS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► COMPLETE PLAYLIST: • Flutter Login App - UI...
► FIREBASE PLAYLIST: • Flutter Firebase Basic...
DOWNLOAD PROJECT
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► CODE & RESOURCES: codingwitht.com/flutter-login...
VIDEOS
▬▬▬▬▬▬▬▬▬▬ DESIGN ▬▬▬▬▬▬▬▬▬▬
► 01 - Flutter Folder Structure • Flutter App with Fireb...
► 02 - Flutter Folder Structure • How to Create a Flutte...
► 03 - Setup Theme Light & Dark: • How to Setup a Custom ...
► 04 - Flutter Native Splash • How to create Flutter ...
► 05 - Custom Splash with Animation • Flutter Splash Screen ...
► 06 - On Boarding Screen • Flutter Onboarding Scr...
► 07 - Welcome Screen Design • Welcome Screen | Flutt...
► 08 - Animate any widget • Flutter Animation 2023...
► 09 - Flutter Login UI • Flutter Animation 2023...
► 10 - Flutter Signup UI • Modern Signup form in ...
► 11 - Flutter Forget Screen • Flutter Forget Passwor...
► 12 - Flutter OTP Design • Flutter OTP Verificati...
► 13 - Flutter Dashboard • Flutter UI Design Tuto...
▬▬▬▬▬▬▬▬▬▬ FIREBASE ▬▬▬▬▬▬▬▬▬▬
► 14 - Setup Firebase in Flutter • Simplest way to Setup ...
► 15 - Firebase Authentication • Flutter Firebase Authe...
► 16 - Firebase Phone No Auth • Flutter Firebase Phone...
► 17 - Flutter Profile UI • Flutter Profile Page U...
► 18 - Store Data in Firestore • How to store data in F...
► 19 - Verify Email in Flutter • Verify Email in Fireba...
COURSES
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► FLUTTER CRASH COURSE • Flutter Crash Course f...
► LOGIN APP with GETX • Flutter Login App - UI...
► E-COMMERCE APP • Professional Flutter E...
CHAPTERS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
00:00 Introduction
01:46 Playlist Overview
02:08 Firebase Phone OTP Flow
02:57 Enable Phone Authentication in Firebase Console
03:45 Add SHA-1 and SHA-256
06:03 Enable Android Device Verification (Safety Net)
07:25 Create Authentication Repository
13:10 Create Verify OTP method
14:39 Get User's Phone No and Send SMS
16:59 Receive OTP from User and Verify
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
FOLLOW US ON SOCIAL MEDIA!
💻 Facebook: / codingwithtea
💻 Instagram: / coding_with_tea
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
SUPPORT
To support the creation of a free content please visit:
► Subscribe th-cam.com/users/Codingwithtea...
►► Support codingwitht.com/support-the-c...
#flutterapp #flutterfirebase #firebaseauth #codingwithTea - วิทยาศาสตร์และเทคโนโลยี
![Flutter Profile Page UI Design - Flutter App Design [2023]](/img/n.gif)
I love tutorials that start with the demo at the start of the video, allowing viewers to immediately understand whether this is the right video for them. And it definitely was- thank you brother.
Thank you 💕
You saved me brother. Thnk you so very much T. I was wondering here and there for phone OTP then I finally landed at your tutorial and after this I not just watched complete playlist but purchased the code and want to thank you for saving me. Kepp up with great content.
Thank you bro. I'm glad to be helpful 😊
i face some problem on ios. its not working on IOS but working fine on android, cdid i missed some configuration?
I am happy to see this! Well done Sir!
Thank you dear 😃
"android device verification" change to "Google Play Integrity API" ????
Hey it's very urgent. Kindly help
So I got a project and there is an issue. First time jab mein na app run ki to login was working for OTP and captcha check but us Ka bad jab bi new run Kiya or any thing the OTP and captcha is not working. Sometimes it says it's internal error sometimes it says nothing but didn't register new user. Kindly help m
Help me pls, I can't find Android Device Veritification in google cloud.
Superb tutorial brother, very detailed. There is an issue I am facing:
SMS verification code request failed: unknown status code: 17028 A safety_net_token was passed, but no matching SHA-256 was registered in the Firebase console. Please make sure that this application’s packageName/SHA256 pair is registered in the Firebase Console.
very useful tutorial thank you my brother
jazak allah xaira
You are the best man, thanks so much for your your help!!
Thank you. I'm glad you like it 😊
Hello im not getting SHA1,i running the all the commands in cmd but its showing for ,can you please solve it.
Did you get it?
how can we show error messages on screen? for eg;- we got error invalid-phone or invalid-email so we have message corrosponding to this error in our exception directory but how can we show that msg on screen while authenticating on login screen.
You can directly call Get.showSnackBar() & pass error in it and you are good to go.
@@CodingwithT The Android device verification appears to be unsuccessful, bro.
Very superb tutorials Sir, i have learned many things, but there are 16 videos only till OTP verification remaining videos not added in this playlist?
Thank you 😊. There are a few tutorials still left and underway 😃.
They will be created in a few days.
how can i login using otp number you forget it?
keytool : The term 'keytool' is not recognized as the name of a cmdlet, function, script file, or operable program.
Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1
what this problem?
Is it resolved? There could be many reasons but make sure the directory is in your PATH env variables
you can do this. Switch to android in your terminal cd android. Then run the following command .gradlew signingReport
Please Sir android device verification is no longer available. How do I use Play Integrity API for OTP authentication?
I will try to create a separate video on it but meanwhile you can go through docs, it's easy
Hello I need your help please
I want to make a system with flutter that generates an alphanumeric code when the user registers how to implement this please
Hi, you can do it buy creating a Helper Function and inside create a string with required numbers, alphabets and so on.
const _chars = 'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890';
Random _rnd = Random();
String getRandomString(int length) => String.fromCharCodes(Iterable.generate(
length, (_) => _chars.codeUnitAt(_rnd.nextInt(_chars.length))));
You can print them like this print(getRandomString(5)); // 5GKjb
Is this service free?
I thought OTP authentication won't send sms for testing
Android device verification is deprecated so im facing problem while trying for otp verification. So please help what to use instead of ADV.
Thank you so much❣️❣️❣️
It is now called Integrity API
@@CodingwithT sir there is no PhoneAuthOptions type in flutter ?
any solution?
I am also facing the same issue how did youu resolved it?
love your work.but when i enter the google console cloude it does not have the device checker any more what the solution?
It is changed to Google Play Integrity Api
Hi, I bought the source code but the opt doesnt work and got this (errors code otp message Failed to send SMS). Please help me
Have you configured your Firebase setup for this project?
Awesome, i really like this..
Thank you 😊
hi, i can't find the src directory in lib , can u help me ? is there any problem with my app ?
Hi, it's a custom made folder dear you can create any folder and name it anything in lib
Great Tutorial. Any chance you show how to do the iOS part? I can't find any tutorials at all. Most of them outdated even if I find one.
I'll try to create IOS series for Firebase.
@@CodingwithT Thanks
Awesome work sir
Thank you 😊
Bro flutterfire config command line gives error what can i do further
here the error:
flutterfire : The term 'flutterfire' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if
a path was included, verify that the path is correct and try again.
plz reply
@@PriyadharshiniRavi-ec7vf also check firebase documentation on this and follow as instructed.
I faced same error today, You need to add 'C:\Users\*username*\AppData\Local\Pub\Cache\bin' in System Environment Variables Path...You can access the edit by going by pressing Win + X -> System -> Adv sys settings then environment variables...Add the Path in System Variable's Path then Save it Restart your machine and then re run Flutterfire configure
what if i try to login with the same number registered during signup will this code work?
Yes 👍
Sir, i tried the otp but mine alway redirects to browser for recaptcha
Don't worry it happens. On emulator it often happens so until its working, nothing to worried about.
Please teach us now how ro build an admin panel for a doctor patient app or any other fields
Sure Buddy, next tutorials might be related to you.
To Create, read, update and delete any data from Firebase
@@CodingwithT Thanks :) I want to build an admin panel..to handle apps. my side project hobby
wth, how do you store password for the same phone number, and other detials? how do we login with the same phone number as we have not set any password.
Without password using phone number you have to send OTP to users mobile and once verified, users can login.
Storing passwords are not recommended
@@CodingwithT thanks, but what if i have other data to store into Firestone on the sign up how do i store the data when the user is verified,
You can do it inside signup, when authentication succeeded in adding user data.
Or if you are using Authentication Repository and listening to userChanges, in this case you'll be auto redirected to some other page. So check accordingly
Great Tutorial, Sir. How to add the auto-fill feature to it, to auto-detect the generated OTP.
And also, the re-captcha is still showing even after enabling Google Play Integrity API and adding SHA-256.
Thanks in advance.
No solution for recaptcha brother. Im googling for the solution more then 10 hours
@@arpitsanadhyaa Yeah brother, I too searched a lot, but can't resolve it
@@sivasubramanian8345 there is only one solution. We can fill a form and send it. Than they will enable ANDROID DEVICE VERIFICATION API in our project. After that it will be fine.
@@arpitsanadhyaa okay thanks, will try it
@@arpitsanadhyaa What form? Where can I find it?
I am getting a Failed to load page when trying to verify android device. Anyone else faced this issue ?
same bro
Bro please make a video on how to make a payment method activity in android studio...pleasee...
Good suggestion 😃. I'll create that soon
@@CodingwithT still waiting :)
help sir after doing all steps in the end it is not running and showing error please help
Unhandled exception:
FileSystemException(uri=org-dartlang-untranslatable-uri:dart%3Ahtml; message=StandardFileSystem only supports file:* and data:* URIs)
#0 StandardFileSystem.entityForUri (package:front_end/src/api_prototype/standard_file_system.dart:34:7)
#1 asFileUri (package:vm/kernel_front_end.dart:654:37)
#2 writeDepfile (package:vm/kernel_front_end.dart:794:21)
#3 FrontendCompiler.compile (package:frontend_server/frontend_server.dart:629:9)
#4 starter (package:frontend_server/starter.dart:99:12)
#5 main (file:///C:/b/s/w/ir/x/w/sdk/pkg/frontend_server/bin/frontend_server_starter.dart:13:14)
Target kernel_snapshot failed: Exception
2
FAILURE: Build failed with an exception.
How can I return to the login and sign up menu once logged in?
By following this approach you can go back to login when logged out.
The way around is if you want to go to the login signup screen you can Simply call them.
sir Android device verification API is depricated now it not present in the library then whatv should i enable in place of that
Is it true?? So should i go for this video or not? Any suggests
Which library? You just have to enable them on the link that i talked about and select your project before enabling
@@CodingwithT sir please can u share the link here for "Android Device Verification " library
If you read out the official documentation of flutter firebase.
They stated that you have to enable this deprecated api means we have to if we want to use this service.
console.cloud.google.com/apis/library/androidcheck.googleapis.com?pli=1
@@CodingwithT that link doesn’t work. I already select my project. What should I do?
'-list' is not recognized as an internal or external command,................sir plzz
I think you are using the list wrongly. Check spellings.
I bought the package and I'm really enjoying the tutorials! I'm having an issue here. The SMS text is never received. The Run log shows - W/FirebaseAuth(26995): [SmsRetrieverHelper] Timed out waiting for SMS. I confirmed that Google Play Integrity API is enabled (since Android Device Authentication API is no longer available). The recaptcha webpage briefly appears and goes away, but the SMS never shows up and I can't sign in. Any suggestions?
I also had the same problem as you. Have you solved it yet can you guide me?
mee too
android device verification is not available in google cloud console what to do now?
yes same here!
any solution?
android device verification is not showing in Google cloud at 6:15
same here, if you found the problem and ssalved it please reply to my comment
That method is depreciated. you can get new method from firebase.google.com/docs/auth/flutter/phone-auth
for otp message it says Something went wrong.Try again
I am also facing the same issue how did you resolved it
when login verification part will come?
I'm having covid so after a week I will be back on track :D
does this also work for ios?
Yes it does.
i didn't find Android device verification help me
Its now a safety net that you have to configure. Android device verification is deprecated
when sumit otp
type 'Null' is not a subtype of type 'String'
It means the variable which is looking for non null able String value but receiving null.
@@CodingwithT Unhandled Exception: [firebase_auth/invalid-verification-id] The verification ID used to create the phone auth credential is invalid
I got an error
Problem retrieving SafetyNet Token: 7
Can you please explain it
@@CodingwithT
First of all thanks for replaying my comment.
This is the error I got when I used phone authentication in firebase.
E/zzf (15454): Problem retrieving SafetyNet Token: 7:
I am getting otp message but there is reCAPTCHA issue. Saftey Net is Deprecated ...
does this work with ios too=
Definitely 💯
my login is not working properly
Any errors?
CODE DOES NOT WORK!!!
What error you are facing?
flutterfire config command is not working bro
Hi, sorry for the late reply 😪. Still having issue?
bro can you share android device verification link because i am not able to open link
it says There was an error while loading /apis/library/androidcheck.googleapis.com?project=tripp-9f50f. Please try again.
It may be a browser or network issue. Go to the loading issues help page to troubleshoot the issue.
Request ID: 1171542026589408738
same issue. did you fix it?
@@Skyy9670 nope still trying :(
Ua alaykum assalam
please use dark theme
Ok. New videos are already in dark mode
Website is Down
Thank you for your patience. We are working on it and will be live soon.
We are back online 😁
Hi sir, Actually i was trying to use the Android Device Verification API but its depreciated so how can i solve this problem? Please help.
No need to use that. Simply follow the instructions and keep the dependencies updated.