Flutter Firebase Phone Auth Tutorial For Beginners | Firestore, Firebase Storage, Auth (Latest)
ฝัง
- เผยแพร่เมื่อ 28 ก.ย. 2024
- Hello everyone, in this video we will be learning how to implement a phone authentication system in flutter and firebase. We will be using firebasefirestore, firebase storage, authentication.
Source Code:
/ 75827635
► Join Patreon
/ backslashflutter
Sign up for 10,000 free mins: bit.ly/3X32Jup
Find out more about ZEGOCLOUD: bit.ly/3AmrNmi
Guides to build chat app: bit.ly/3hQqAx2
► ALSO LEARN TO INTEGRATE GOOGLE and FACEBOOK SIGN IN TO YOUR APPS:
📗 Complete Google and Facebook Login In Flutter | Flutter & Firebase Authentication 2021 (Part 1)
• Complete Google and Fa...
📗 Facebook Login In Flutter | Flutter & Firebase Authentication For Beginners 2021 (Part 2)
• Facebook Login In Flut...
🔔 Get updated with my projects🔔
Follow me on Github: github.com/backslashflutter
#chewieplayer #fluttervideoplayer #backslashflutter
🔥 Subscribe for more:
/ backslashflutter
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
If this helps make sure to share it with friends and colleagues who will benefit from this
Have questions/queries? 💬 Comment below I will be happy to help
►For the 3D intro, I'm using Rotato: rotato.xyz
🎵Credits :
Music Used:
JARICO - LANDSCAPE • Video
softy x no one’s perfect - The Beauty Around Us ✨ [lofi hip hop/relaxing beats]
Reddit Username : @backslashflutter
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
🔗OTHER:
PLAYLIST:
1. FLUTTER AND FIREBASE
LINK :bit.ly/35Uq7Ba
2. FLUTTER SPEEDCODE
LINK: bit.ly/3sFDy1O
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
OTHER VIDEO:
Complete Flutter Installation & Setup Tutorial For App Development on MacOS (Latest)
• Complete Flutter Insta...
Learn API Integration in Flutter | Building A Dictionary App with OwlBot API | (Under 20 Minute)
• Learn API Integration ...
ChatBot App In Flutter | Python Backend With Flutter | Heroku Server (Full Explanation)
• ChatBot App In Flutter...
About Flutter:
Flutter is an open-source UI software development kit created by Google. It is used to develop cross platform applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase. The first version of Flutter was known as codename "Sky" and ran on the Android operating system.
THANKS FOR LOVE AND SUPPORT💪
Other best method to setup default phone
Country country = CountryParser.parseCountryCode('IN');
// IN is for indian phone number
Phone authentication time Recapcha how can remove android & ios both.
I will only say this... THIS IS PURE GOLD!!! THANKS MAN!
28:40 just keep the setState empty and it will update the icon without reversing the numbers
onChanged: (value) { setState(( ) { }) ; },
and no need for additional code.
Thanks for your video.
thanks
thank you so must, you added value in my coding love from mumbai.
thanks dude u really help me with that very simple code to understand and make my own changes
As of today, this video is valid. And for those getting errors, watch the video with patience, do not skip any path, follow all due process in the video. Thanks @backslashflutter💙, from Nigeria 🇳🇬
thank you very much for such a creative and useful content. There is a big problem with this approach that I couldn't solve, when a user enters phone number and verify the OTP he will be redirected to the registration screen to fill the information, if anything interrupt this process and user didn't complete the rest of the information next time when the user opens the app it will redirect to the home screen and all info will show as null.
how can prompt the user to enter the missing information incase he didn't complete them?
you mean the otp verification is completed and user is there on information page. What you can do is to store a new key in shared preference for isSignedIn which is alreay present i guess and only save that isSignedIn to true once information is filled and save is clicked.
But from windows native setup not possible for ios have to go with flutter app right ?
Thanks for the video, Could you make a video that tells all the vscode plugins you are using. I like the one where you collapsed the code within the brackets @ 1:17:42. thank you.
when i click continue : No App Check token for request. any help please ?
Thank you dear for an amazing tutorial
how can i make sure that when a user opens the app it shows the main screen instead of the get started screen??
you can play with shared perference library to implement this thing. Store a key let's say isOnboardingDone, and then use that key to determine the navigation.
Thanks but how to resolve recaptcha
play integrety api that error is not being resolved please help how to solve it. again and again it is showing an error occurred while accepting terms and conditions similar to your video. Please solve this.
Hey i want to store a number which doesn't conten country code
How to do that?
I am using firebase firestore
I am using otp authentication
can i sue firebaseAuth to send sms for forget password verification otp to the user's mobile number?
reversed client id is not show in google service file
did you find it reversed client id if yes let me know please
it is visible in google service.plist file for ios, on android you don't need it as such.
hey buddy what to do so that i dont go to that captcha screen as it isnt a good user experience
When I restart the app my userModel variable in the provider doesnt't work proparly. I can't use the data from firebase. Can anyone help me please?
Hey Hi I really liked the tutorial but found few bugs when i started to trail the 2nd user to login at: 1:55:26 I have put the code exactly as you taught but it says firebase_storage/unknown and its not allowing me to store the user data. Could you please help me out with this it would be a great help.... Thank You
Hello Backslash Flutter,
I have subscribed your channel and actively watch your videos.
Thanks for creating these wonderful and informative contents.
I have a query. At timestamp 1:08:52 , why are you changing the settings in the App Check thing? I was not able to understand. Why is it necessary to do that?
Thanks
this is there to enable the firebase integration for phone auth and other monitoring for billing and spam frauds. I saw that phone auth's recaptcha bypass was done through this so integrated this
how to make the change to fill auto OTP in this verification page ?
Subbed! ❤❤❤
I can't continue after 1:09:00. Play integrity does not approve. Is there a video on how to fix this? How can I verify sms for an application that is not installed in the play store?
did you solve it? i am facing the same problem
where is the link to the image resource?
HOW TO REMOVE CAPTCHA REDIRECT, PLEASE PROVIDE SOLUTION FOR THAT 🙏🙏🙏🙏🙏🙏
Hello I just want to ask is the app working properly.should I follow this video for 2 hours
Thanks for sharing
Thank you sir
thanks. good video
I've been following several different tutorials on setting up Firebase now and they all show that it should be working in this way. However, for me it always throws the error "FirebaseOptions cannot be null when creating the default app." I've tried it on Windows and on Mac and it's always the same error. InitializeApp() seems to not work anymore without specifying the options parameter, or it's just me.
hahaha mate, i have been using it for long time rather without this no one can integrate the firebase. please check the steps like google-service.json file and other things if you have implemented that.
terimakasih pak!
yes the same error is coming at my end in app check
please tell how to resolve it
what error mate?
After safetynet how we can remove captcha it is the reason for loses many user from our app how we can remove recaptcha verification ill tried play integrity api but i can't
Most people are waiting for some solution from google for this, on IOS i know this can. be easily done with APNs configuration setup on firebase and ios device. I am able to integrate that on ios, but for android i am still waiting for some solution, will let you know if i have any.
Please upload how to remove captcha from ios, soon!
sure
hindi me bhi bola kar bhai thoda achi tarh samjh aayega
or thoda slow kara kar coding bahut tej chalte ho aap
would appreciate if you can understand english well if you want to strive in tech community. I myself don't know it very well but trying is the only way out.
Can I use getX with Provider and will it cause any issue with the performance and stability?
bro will suggest not to use getx
Can you please, from this video add a resend code for authentication. This should be in case the user did not receive the code
add a elevated button and assign resend as text to the child of that elevated button, and in the onpress just simply call the same verifyOtp thing that you were calling.
Android studio is much better than vs code
Give me 5 reasons yo
i will prefer visual studio code for flutter dev. I only use android studio if i need to add native functionality to android app that links with my flutter app. Else will suggest not to go there.
By
by
#backslash Flutter when I use a normal phone number, I get this error which reads The sms code has expired. Please re-send the verification code to try again
please check the source code mate!
On Android the otp comes as expired. My man you did really well making this video. please help us complete. Android is not working
ya mate i know android is causing isssue with captcha but the expired otp is not the case. PLease check the code from github if issue still exists.
github.com/backslashflutter
which repository provide the exact link please
Hey i want to store a number which doesn't conten country code
How to do that?
I am using firebase firestore
I am using otp authentication
Reserved client id not showing on my plist file
I want join as patreon member. I don't know how you downloaded iOS simulator and open it with vscode.
you can become part of patreon community here;
www.patreon.com/backslashflutter
Can you please make a video on forget password and reset password through an email link
sure bro
please share source code?
Thank you very much for making such a beautiful tutorial in a very easy way, May god bless you
Thank you so much 😀
Hello thanks for the video but I ma getting a problem when I click the continue button in user_information_screen.dart it says User ID is not initialized!, what is wrong with my code anyone please help me.
hello , we need the sourse code pro
github.com/backslashflutter
Thanks its grait video, it works on android but not on ios, when I run pod install it gets shared pref foundation NOT ios
Perfect , can you assist ho do I prevent double sign-in in different devices using same number
this video helped me a lot!!
thank you very much, and i invite you to Islam
Thank for this greatest content. Can please also show as how to automaticaly retreive sms code on the otp screen?
Hey i want to store a number which doesn't conten country code
How to do that?
You're great! 😀It helps me a lot. Please upload more lectures.
thanks for watching
I am getting error on this line
await Firebase.initializeApp();
Exception has occurred.
PlatformException (PlatformException(null-error, Host platform returned null value for non-null return value., null, null))
how I correct?
Hi. Try adding this dependency.
Use this package as a library
Depend on it
Run this command:
With Flutter:
$ flutter pub add provider
This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):
dependencies:
provider: ^6.1.1
Great video buddy but work on Audio Quality.
My account automatically logout after few time
Hi, I can't get the SHA-1 cetificate, keystore not found, what can I do? Could I connect the project to flutter firebase instead of android?
yes there is a very detailed video on my channel regarding that, please have a look at it
tnx to your great video, 1 issue: in "userinformationscreen" , userModel: userModel gets an error, How to fix it ?
can you please share more detail. If you want please go through the github repo and check the source code there>
github.com/backslashfluttter
hy i followed all but there is some issue its working fine in debug mode but in release apk otp is not coming
pls help
i got this same error where you able to fix it??
MASTERRR!!!!
thanks for the great video,
just have an issue my country code picker on android initially is blank but after starting to input a phone number it displays(only displays country code and flag when field is active)
please check the pinned comment there is way out
thanks for your video man.
After adding country picker pub dev
How was the country class created
I mentioned it in pin comment mate
Country country = CountryParser.parseCountryCode('IN');
please no app check option in my firebase under project setting, so can you help me please
this is the issue which most people are facing mate. when i find way out then will definitely let you know
to add dependency just click "f1" then search "add dependency" then paste the name , simple
ok thank you
First, thanks alot for making this video, it was amazing for me to get started, I just finished watching it all, so here a few issues I found :
28:19 This cause multiple bugs. You should not set text = value. You only need an empty setState. This also mean you don't need the following code shown to move the cursor at this end.
One of the code error I saw was you put the phoneNumber inside the uid somewhere (I don't recall where, I just didn't wrote it like this on my end).
The rest might be me, since I rewrote all the code, you were quick and I might have missed a function.
But I'm on Android, and visually it doesn't work well... I guess it need some way to adjust the visual it feel good to use when the keyboard show up.
I got it to work with the fake SMS number, but if I use a different SMS number, the app stop in debug mode somewhere.
Also, when you enter the wrong OTP code, I need to rotate my phone (to trigger the setState()) so it bring me back.
I'm don't fully understand how you implement authentication... Once a user is signed in, there is no authentification being made to firebase ? It seem to just read a local variable in the checkSign() Shouldn't it check the Firebase backend to see if it true or not ?.
whooooo, seems like you encountered lot of bugs. I am sorry for this. Let's connect over gmail if you still face this issue
backslash.flutter@gmail.com
Can you guide me what to do next
I have completed Flutter Course From Udemy By Academind by Maximilian Schwarzmüller
How to become better and better in app development
start with mastering one state management and then start with creating some app which has CRUD operation in firebase flutter and use the state management you used.
Then subsequently start with API usage, model creation and lot more. Working on some course in flutter will let you know soon.
@@backslashflutter thanks
you are the goat bro
I think it's best not to touch phoneController and keep track of the length in another field.
you mean the onChanged field of textFormField right?
Yup
please make video on resend otp with timer and custom errors handling
sure
Hi I have mailed a specific problem about storage and the link to the git repository.Please have a look and give suggestions, if any.
sir, i am really occupied with lot of things, will suggest to battle this for a while.
@@backslashflutter solved the issue.. thanks
amazing content, BIG LIKE From Libya 👏👏
Best of Luck 🌸🌸
thanks for watching
1:17:45
Pls make dream 11 clone in flutter tutorial
will see this
1:09:43 it is showing that the safety net is deprecated now
how to proceed now?
yes that is deprected by google. Still many developers face issue with it. All i can tell you is to enable the push notification functionality in your app and try to go through device check thing in firebase
@@backslashflutter okay sure
And also I used otp_text_field for the OTP field but the verify button is showing "please enter the OTP" even after entering the OTP
are you using m1/m2 macbook?
m1 mac air 2020
Thanks now seting default flag problem solved 😃,
thanks for watching bro
there are other method also like:
Country country = CountryParser.parseCountryCode('IN');
// IN is for indian phone number
will this work on windows vscode?, please let me know
Yes I followed this video on Windows VScode and it worked well
thanks for replying and helping the community @afrikanking4022
1:35:00
??
Hi can you add sms autofill feature into it as well
Sure will add it
@@backslashflutter Can you please add this one cuz I'm suffering with adding the autofill functionality to the app I'm working on
Please when you will add it ???
Hey i want to store a number which doesn't conten country code
How to do that?
I am using firebase firestore
I am using otp authentication
Thanks for the video but there is one problem. If you log out and u want to log back in with the same number, an OTP is sent to you but when you enter the OTP it still asks you to put in your OTP. it does not take you to the HomePage as it should
same here.
hey did you get any solution for this?
can you all check the source code mate. github.com/backslashflutter
@@random_akkiyes
@@backslashflutter, I just check the github repo and couldn't find the source code. Can you please help with the actual link to the repo? I also sent an email to you on this. Thank you so much.