Master Phone Authentication in Flutter with Firebase: A Step-by-Step Guide
Vložit
- čas přidán 27. 07. 2024
- Dive into the world of seamless user authentication with our comprehensive guide on phone authentication using Firebase in Flutter! In this step-by-step tutorial, you'll unlock the secrets of secure user verification, enabling your Flutter applications to validate users effortlessly via their phone numbers.
🚀 What You'll Learn:
- Setting up Firebase Authentication for Phone Verification.
- Implementing OTP (One-Time Password) verification seamlessly in your Flutter app.
- Enhancing security measures with Firebase's robust authentication features.
- Customizing the user experience for smooth and intuitive phone verification.
⌛ Timestamps :
01:07 Create new flutter app
01:33 Configure firebase to app
06:01 Create login page Ui
14:05 Function to send Otp
19:15 Function to verify Otp
22:25 Function to logout
24:03 Add functionality to login page
42:02 Add SHA 1 Key to firebase
43:13 Test on real device
👨💻 Source Code -
github.com/Snehasis4321/phone...
use this source code if you get stucked.
Get ready to elevate your Flutter app's security and user experience. Join us on this coding journey, empowering your skills and mastering phone authentication with Firebase in Flutter! 🔐✨
Don't forget to like, subscribe, and hit the notification bell to stay updated with more exciting Flutter tutorials and app development insights. Let's code securely and efficiently together! 💻📱 #Flutter #Firebase #PhoneAuthentication #MobileAppDevelopment #CodingTutorial Join our discord community:
/ discord
beautifully explained
Error
Pls help
I have added my sha-1 and sha-256 fingerprints. However, when I click on send otp, the terminal of my vs code says that they could not generate the otp. Why is this error occurring ?
My sha1 and sha256 fingerprints are correct. I connected Firebase and flutter using flutter fire cli in my VS Code terminal. The phone verification is enabled on my Firebase console. Yet, it’s showing that it cannot be connect when I click on send otp on my emulator.
You can try on a real physical device, phone otp auth does not work in emulator.
Good job man
Hi, I am greatful for your explain, but when i try it in real device it throw this { Failed to initialize reCAPTCHA config: No Recaptcha Enterprise siteKey configured for tenant/project } so can you help me?
exactly, im also getting the same
please verify that you have added the sha1 key correctly in your firebase project as shown in the video, i am think it to be that issue cause without sha1 key or wrong sha1 key it might not work in real device.
i add it correctly@@Snehasis4321
Hey thank you so much for the tut, can you add a tutorial on how to store user in database?
yeah i need that too
Working on next video It will be a full project of flutter firebase will show that tutorial there.
when im trying in the real device, it was not working, forget about the otp verification, its not even showing the show dialog. but when i added the mobilenumber and otp as testing in firebase, and then checking in the app, it immediately worked out. can u please let me what's the reason is?
please verify that you have added the sha1 key correctly in your firebase project as shown in the video, i am think it to be that issue cause without sha1 key or wrong sha1 key it might not work in real device.
mostly i did everything, what he explained in that video. any way l will cross check it once bro. i appreciate your kind response.@@Snehasis4321
I wants to create two types of users like Doctor and Patient then signup using OTP how can do that ?
yes it is possible, create to separate ui for both of them, and store the type of the user : doctor or patient, and perform this normal authentication.
@@Snehasis4321 how can do that ? can you make video on it.
@@user-gb6ul8et6e ok i will do it.
It's better to create separate apps, saying from experience 😅
@@udaybhaskar9358 how connect them to each other?
is this a sign up? how can i check if there is a existing user or if the user already sign up? or can i use it as an authentication of OT then create my own sign in sign out on different backend?
It can be used for both login and signup it authenticates the user using phone.
To know if user is existing user or not for that we need to store the data in the database when logins for first time that can be on any database.
And this phone authentication can also be integrate with other databases and other backend.
@@Snehasis4321 how can i check if it is the first time log in using phone authenticate? does firebase store the data of the existing phone number that already authenticate?
@@Nobisuke no firestore does not store any data on first time phone auth, firebase only create a new user with uid on first time phone auth.
If we want to store that data we need to do that manually.
@@Snehasis4321 ready implement it. one more question why does its not working on IOS? but in android it working fine. i already set optional number and set otp. but upon trying its not working on IOS
@@Snehasis4321 hello, i already configure and its working now. but when i try to test on real device which(i should received an OTP) its not working. i am done on addingSHA to the firebase.
Getting some parameter exception !!Any solution to it?
it may be due to some authentication issue from firebase, dont sent to many otp to a single phone number, they may block the request. It may also happen that you have written some thing wrong that is causing the issue please verify the code. You can also test with a real device sometimes, emulator don't work. If this didn't help you can ask me in chat.
Hey tried checking that even so entire code seems fine but in some messages.pigeon.dart file there occurs some PlatformException host platform returned null value for non-null return value ?? What should be done to that
Firebase phone authentication only 10 for daily? Is there any free opt SMS authentication without firebase?
you can try appwrite phone auth atleast for now they dont have any phone auth limit and it is also free.
Vraiment un grand merci !!!
OTP AUTOFILL Update
you can use this package otp_autofill for automatic otp fill.
@@Snehasis4321 try but not working in android 12 and 13
@@user-lk4ft3ms3m yes I checked it is not working, I will update you if I get any solution.