Flutter Firebase Phone Auth Tutorial For Beginners | Firestore, Firebase Storage, Auth (Latest)
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💪
Пікірлер: 146
Other best method to setup default phone Country country = CountryParser.parseCountryCode('IN'); // IN is for indian phone number
@user-lk4ft3ms3m
8 ай бұрын
Phone authentication time Recapcha how can remove android & ios both.
I will only say this... THIS IS PURE GOLD!!! THANKS MAN!
thanks dude u really help me with that very simple code to understand and make my own changes
thank you so must, you added value in my coding love from mumbai.
Thank you very much for making such a beautiful tutorial in a very easy way, May god bless you
@backslashflutter
Жыл бұрын
Thank you so much 😀
You're great! 😀It helps me a lot. Please upload more lectures.
@backslashflutter
Жыл бұрын
thanks for watching
Thank you dear for an amazing tutorial
amazing content, BIG LIKE From Libya 👏👏 Best of Luck 🌸🌸
@backslashflutter
Жыл бұрын
thanks for watching
thanks for your video man.
you are the goat bro
Thank you sir
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 ?.
@backslashflutter
Жыл бұрын
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
Subbed! ❤❤❤
Thanks for sharing
thanks. good video
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 🇳🇬
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.
@backslashflutter
Жыл бұрын
thanks
terimakasih pak!
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.
MASTERRR!!!!
Great video buddy but work on Audio Quality.
Thank for this greatest content. Can please also show as how to automaticaly retreive sms code on the otp screen?
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?
@backslashflutter
Жыл бұрын
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.
Thanks now seting default flag problem solved 😃,
@backslashflutter
Жыл бұрын
thanks for watching bro
@backslashflutter
Жыл бұрын
there are other method also like: Country country = CountryParser.parseCountryCode('IN'); // IN is for indian phone number
to add dependency just click "f1" then search "add dependency" then paste the name , simple
@backslashflutter
Жыл бұрын
ok 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
@backslashflutter
Жыл бұрын
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
Perfect , can you assist ho do I prevent double sign-in in different devices using same number
please make video on resend otp with timer and custom errors handling
@backslashflutter
Жыл бұрын
sure
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
On Android the otp comes as expired. My man you did really well making this video. please help us complete. Android is not working
@backslashflutter
Жыл бұрын
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
@sakshamavasthi1013
9 ай бұрын
which repository provide the exact link please
great work , i have the error null check operator used on a null value ,i tried for days to solve it but nothing work , can you please get me an answer
when i click continue : No App Check token for request. any help please ?
Thanks its grait video, it works on android but not on ios, when I run pod install it gets shared pref foundation NOT ios
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.
hey buddy what to do so that i dont go to that captcha screen as it isnt a good user experience
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.
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)
@backslashflutter
Жыл бұрын
please check the pinned comment there is way out
Can you please make a video on forget password and reset password through an email link
@backslashflutter
Жыл бұрын
sure bro
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?
But from windows native setup not possible for ios have to go with flutter app right ?
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
Hey i want to store a number which doesn't conten country code How to do that?
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.
@backslashflutter
Жыл бұрын
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.
Please upload how to remove captcha from ios, soon!
@backslashflutter
Жыл бұрын
sure
how can i make sure that when a user opens the app it shows the main screen instead of the get started screen??
@backslashflutter
Жыл бұрын
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.
tnx to your great video, 1 issue: in "userinformationscreen" , userModel: userModel gets an error, How to fix it ?
@backslashflutter
Жыл бұрын
can you please share more detail. If you want please go through the github repo and check the source code there> github.com/backslashfluttter
how to make the change to fill auto OTP in this verification page ?
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?
@backslashflutter
Жыл бұрын
yes there is a very detailed video on my channel regarding that, please have a look at it
I want join as patreon member. I don't know how you downloaded iOS simulator and open it with vscode.
@backslashflutter
Жыл бұрын
you can become part of patreon community here; www.patreon.com/backslashflutter
can i sue firebaseAuth to send sms for forget password verification otp to the user's mobile number?
please no app check option in my firebase under project setting, so can you help me please
@backslashflutter
Жыл бұрын
this is the issue which most people are facing mate. when i find way out then will definitely let you know
After adding country picker pub dev How was the country class created
@backslashflutter
Жыл бұрын
I mentioned it in pin comment mate Country country = CountryParser.parseCountryCode('IN');
where is the link to the image resource?
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.
@backslashflutter
Жыл бұрын
sir, i am really occupied with lot of things, will suggest to battle this for a while.
@joshyabraham670
Жыл бұрын
@@backslashflutter solved the issue.. thanks
yes the same error is coming at my end in app check please tell how to resolve it
@backslashflutter
Жыл бұрын
what error mate?
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?
@sadeemkhalid4219
4 ай бұрын
did you solve it? i am facing the same problem
I think it's best not to touch phoneController and keep track of the length in another field.
@backslashflutter
Жыл бұрын
you mean the onChanged field of textFormField right?
@royale1223
Жыл бұрын
Yup
Pls make dream 11 clone in flutter tutorial
@backslashflutter
Жыл бұрын
will see this
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?
@syedquadri3922
8 ай бұрын
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
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
@backslashflutter
Жыл бұрын
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.
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
@favourwilliams7319
6 ай бұрын
i got this same error where you able to fix it??
are you using m1/m2 macbook?
@backslashflutter
Жыл бұрын
m1 mac air 2020
HOW TO REMOVE CAPTCHA REDIRECT, PLEASE PROVIDE SOLUTION FOR THAT 🙏🙏🙏🙏🙏🙏
@AaryaZunjarrao
2 ай бұрын
Hello I just want to ask is the app working properly.should I follow this video for 2 hours
hello , we need the sourse code pro
@backslashflutter
Жыл бұрын
github.com/backslashflutter
1:09:43 it is showing that the safety net is deprecated now how to proceed now?
@backslashflutter
Жыл бұрын
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
@ashutoshkapoor5031
Жыл бұрын
@@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
this video helped me a lot!! thank you very much, and i invite you to Islam
reversed client id is not show in google service file
@Akhi.yt45
Жыл бұрын
did you find it reversed client id if yes let me know please
@backslashflutter
Жыл бұрын
it is visible in google service.plist file for ios, on android you don't need it as such.
please share source code?
1:17:45
Hi can you add sms autofill feature into it as well
@backslashflutter
Жыл бұрын
Sure will add it
@ibrahimkhattab369
Жыл бұрын
@@backslashflutter Can you please add this one cuz I'm suffering with adding the autofill functionality to the app I'm working on
@unknownking139
Жыл бұрын
Please when you will add it ???
@user-ub8yw9oz3u
10 ай бұрын
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
will this work on windows vscode?, please let me know
@afrikanking4022
Жыл бұрын
Yes I followed this video on Windows VScode and it worked well
@backslashflutter
Жыл бұрын
thanks for replying and helping the community @afrikanking4022
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
@sheralikhtk5200
Жыл бұрын
same here.
@random_akki
Жыл бұрын
hey did you get any solution for this?
@backslashflutter
Жыл бұрын
can you all check the source code mate. github.com/backslashflutter
@user-ub8yw9oz3u
10 ай бұрын
@@random_akkiyes
@ansvelmarketplace6264
8 ай бұрын
@@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.
hindi me bhi bola kar bhai thoda achi tarh samjh aayega or thoda slow kara kar coding bahut tej chalte ho aap
@backslashflutter
Жыл бұрын
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.
1:35:00
@backslashflutter
Жыл бұрын
??
My account automatically logout after few time
Can I use getX with Provider and will it cause any issue with the performance and stability?
@backslashflutter
Жыл бұрын
bro will suggest not to use getx
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
@backslashflutter
Жыл бұрын
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.
@amanatsingh2205
Жыл бұрын
@@backslashflutter thanks
Android studio is much better than vs code
@ihxrxh
Жыл бұрын
Give me 5 reasons yo
@backslashflutter
Жыл бұрын
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.
Can you please, from this video add a resend code for authentication. This should be in case the user did not receive the code
@backslashflutter
Жыл бұрын
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.
By
@backslashflutter
Жыл бұрын
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
@backslashflutter
Жыл бұрын
please check the source code mate!
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