Flutter Firebase Phone Auth Tutorial For Beginners | Firestore, Firebase Storage, Auth (Latest)

No video

Flutter Firebase Phone Auth Tutorial For Beginners | Firestore, Firebase Storage, Auth (Latest)

Рет қаралды 81,446

Күн бұрын

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💪

Пікірлер: 147

@backslashflutter Жыл бұрын

Other best method to setup default phone Country country = CountryParser.parseCountryCode('IN'); // IN is for indian phone number

@user-lk4ft3ms3m 10 ай бұрын

Phone authentication time Recapcha how can remove android & ios both.

@kenethnjoroge5313 Жыл бұрын

I will only say this... THIS IS PURE GOLD!!! THANKS MAN!

@techadot 10 ай бұрын

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 🇳🇬

@prashantkhare Жыл бұрын

Thank you very much for making such a beautiful tutorial in a very easy way, May god bless you

@backslashflutter Жыл бұрын

Thank you so much 😀

@johnkim7321 Жыл бұрын

You're great! 😀It helps me a lot. Please upload more lectures.

@backslashflutter Жыл бұрын

thanks for watching

@sush.07 8 ай бұрын

thank you so must, you added value in my coding love from mumbai.

@oussamasbisiane4544 11 ай бұрын

thanks dude u really help me with that very simple code to understand and make my own changes

@abrarlasebai405 Жыл бұрын

amazing content, BIG LIKE From Libya 👏👏 Best of Luck 🌸🌸

@backslashflutter Жыл бұрын

thanks for watching

@afrikanking4022 Жыл бұрын

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 11 ай бұрын

which repository provide the exact link please

@mochouinard Жыл бұрын

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

@drmsa1982 Жыл бұрын

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

@mazenal-ali765 Жыл бұрын

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.

@Sheikh_Sakibul_Islam Жыл бұрын

to add dependency just click "f1" then search "add dependency" then paste the name , simple

@backslashflutter Жыл бұрын

ok thank you

@mohammednawar9417 5 ай бұрын

Thank you dear for an amazing tutorial

@tricks-app Жыл бұрын

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.

@faissi21 5 ай бұрын

you are the goat bro

@montadheralzubydi1634 2 ай бұрын

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

@user-gt4fl1zi6k 10 ай бұрын

thanks for your video man.

@juliokavege9772 Жыл бұрын

Thank for this greatest content. Can please also show as how to automaticaly retreive sms code on the otp screen?

@indomiegoreng8782 3 ай бұрын

terimakasih pak!

@MR_Football_001 Жыл бұрын

when i click continue : No App Check token for request. any help please ?

@codingmafia1642 7 ай бұрын

Perfect , can you assist ho do I prevent double sign-in in different devices using same number

@sukooon Жыл бұрын

Can you please make a video on forget password and reset password through an email link

@backslashflutter Жыл бұрын

sure bro

@bobdaawid2218 3 ай бұрын

Thank you sir

@aouadicharaf1038 9 ай бұрын

Subbed! ❤❤❤

@hans7714 7 ай бұрын

Thanks for sharing

@KaranPalav Ай бұрын

But from windows native setup not possible for ios have to go with flutter app right ?

@philosophia5577 Жыл бұрын

Great video buddy but work on Audio Quality.

@fatihmerickoc Жыл бұрын

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.

@saadrajpoot2387 25 күн бұрын

Thanks but how to resolve recaptcha

@richard2845 10 ай бұрын

thanks. good video

@msmsmsms1237 Жыл бұрын

Thanks its grait video, it works on android but not on ios, when I run pod install it gets shared pref foundation NOT ios

@seifsalmaan 6 ай бұрын

MASTERRR!!!!

@amolharsh7375 Жыл бұрын

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

@snopcatdeveloper653 Жыл бұрын

please make video on resend otp with timer and custom errors handling

@backslashflutter Жыл бұрын

sure

@hrithikreddy-upgradhooman87 Жыл бұрын

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

@anillimbu7092 Жыл бұрын

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.

@PankajSinghR Жыл бұрын

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

@rajeshsanuria5656 Жыл бұрын

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.

@abhijitnag8161 Жыл бұрын

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.

@seetheworld3839 11 ай бұрын

hey buddy what to do so that i dont go to that captcha screen as it isnt a good user experience

@sadanandasherigara3309 Жыл бұрын

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

@arshiajs Жыл бұрын

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

@user-ub8yw9oz3u 11 ай бұрын

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

@genelizleyici6739 Жыл бұрын

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?

@user-ub8yw9oz3u 11 ай бұрын

Hey i want to store a number which doesn't conten country code How to do that?

@collinsmutai613 Жыл бұрын

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

@NikeshMadhav Жыл бұрын

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 11 ай бұрын

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

@kumsakitessaofficial3721 Жыл бұрын

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

@user-sj4zx7ur2h Жыл бұрын

how to make the change to fill auto OTP in this verification page ?

@acornerofherheart-jr9pl Ай бұрын

can i sue firebaseAuth to send sms for forget password verification otp to the user's mobile number?

@nwaekwuchukwuebukajohnpaul8798 Жыл бұрын

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');

@ahmedfayez3821 Жыл бұрын

hello , we need the sourse code pro

@backslashflutter Жыл бұрын

github.com/backslashflutter

@arunsharma4792 Жыл бұрын

yes the same error is coming at my end in app check please tell how to resolve it

@backslashflutter Жыл бұрын

what error mate?

@royale1223 Жыл бұрын

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

@joshyabraham670 Жыл бұрын

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

@berkanyukselgun5496 Жыл бұрын

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 6 ай бұрын

did you solve it? i am facing the same problem

@TrencTolize Жыл бұрын

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.

@angelconsolalopez4254 Жыл бұрын

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

@zubairahmad7307 10 ай бұрын

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 9 ай бұрын

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

@henoktesfaye7130 9 ай бұрын

where is the link to the image resource?

@aryangupta7990 4 ай бұрын

HOW TO REMOVE CAPTCHA REDIRECT, PLEASE PROVIDE SOLUTION FOR THAT 🙏🙏🙏🙏🙏🙏

@AaryaZunjarrao 3 ай бұрын

Hello I just want to ask is the app working properly.should I follow this video for 2 hours

@kraei9799 Ай бұрын

please share source code?

@amolharsh7375 Жыл бұрын

Please upload how to remove captcha from ios, soon!

@backslashflutter Жыл бұрын

sure

@secrescence Жыл бұрын

are you using m1/m2 macbook?

@backslashflutter Жыл бұрын

m1 mac air 2020

@manishmaurya450 9 ай бұрын

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 8 ай бұрын

i got this same error where you able to fix it??

@ebenezerocansey2920 Жыл бұрын

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 11 ай бұрын

@@random_akkiyes

@ansvelmarketplace6264 10 ай бұрын

@@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.

@siddharthasrivastava Жыл бұрын

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

@factGraphic Жыл бұрын

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.

@user-ub8yw9oz3u Жыл бұрын

1:17:45

@Raaz02Choudhary Жыл бұрын

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.

@ashutoshkapoor5031 Жыл бұрын

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

@nagamadhugandebathula3363 Жыл бұрын

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

@user-ub8yw9oz3u 11 ай бұрын

My account automatically logout after few time

@vacandboss6484 Жыл бұрын

Pls make dream 11 clone in flutter tutorial

@backslashflutter Жыл бұрын

will see this

@johnkim7321 Жыл бұрын

1:35:00

@backslashflutter Жыл бұрын

@ebenezerocansey2920 Жыл бұрын

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.

@Dinosaur_._1_.1 Жыл бұрын

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.

@amanatsingh2205 Жыл бұрын

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

@dzdevdev 10 ай бұрын

this video helped me a lot!! thank you very much, and i invite you to Islam

@divyanshsingh9485 Жыл бұрын

@backslashflutter Жыл бұрын

@afrikanking4022 Жыл бұрын

#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!

@user-ub8yw9oz3u 11 ай бұрын

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