Flutter Firebase Authentication [2024] The Cleanest Way

[@HeyFlutter]

👉Join 12 Week Flutter Training: heyflutter.com 👉Join the WhatsApp Channel to get the latest news about Flutter & HeyFlutter: whatsapp.com/channel/0029VaDNCZtC1Fu8nL2vmw3f Source Code: github.com/JohannesMilke/firebase_auth

[@slymanyonga7226]

I'm unable to get access to source code, i requested but nothing is sent to my email

[@ratzule]

Johannes -- I always love your videos but this one takes the cake as a fully functional solution that addresses real-world needs and industrial coding concerns. It may have been condensed to 25 minutes or so, but I just spent two days following it and applying everything you illustrated. Fantastic work!

[@alexeyantonenko877]

You are genius! I've spent two weeks :D

[@abbassalman4869]

can you share the code please

[@gsaviary722]

@@alexeyantonenko877it will be kind enough if you share your code. Thank you

[@danchuksn2161]

You are a life saver... Thank God 🙏 I just saw this video before starting my next project...

[@daumienebi]

What's your project about if I may ask?

[@harunavictor9743]

i can't stop thanking you for this amazing content.

[@soteriaswings]

Your videos are absolutely incredible. Without a doubt, they're the easiest to follow and always help me sort any issues that I have! Thank you :)

[@HeyFlutter]

Glad to hear that, Thank you @soteriaswings! 😊

[@hasanqasim2182]

Thank You Brother. I was stuck in this logic for two days.

[@bramantawisnu]

this is the best list of tutorial I have ever found in youtube, because based on making real project and "User Exprenience Flow" thank you very much Jo.., Very Apreciate

[@developerbs]

Thank you so much for the informative tutorial video. Love from Türkiye

[@HeyFlutter]

Glad you liked it, @developerbs 😀

[@programmerg5270]

how to fix: The getter 'messengerKey' isn't defined for the type 'utils'. Try importing the library that defines 'messengerKey', correcting the name to the name of an existing getter, or defining a getter or field named 'messengerKey'

[@BerkPeksel]

It must be static if you wanna access. Just like this: class Utils { static final messengerKey = GlobalKey(); static showSnackBar(String? text) { if (text == null) return; final snackBar = SnackBar(content: Text(text), backgroundColor: Colors.red); messengerKey.currentState! ..removeCurrentSnackBar() ..showSnackBar(snackBar); } }

[@NorzoTech]

@@BerkPeksel thanks i was stuck for a while.

[@a.k.z5190]

Hey i have the same issue, can you tell me how can i fix that ? I try to put static messengerKey and static showSnackBar but i can't see the SnackBar, thanks you very much for you tuto, it's very usefull

[@mazharsalam3144]

@@BerkPeksel this part was there in the code but not showing in the video

[@markthrasher4548]

This truly is a very clean way of implementing the firebase authentication. Thanks for the excellent video!

[@HeyFlutter]

You are welcome, Mark Thrasher 😊

[@moisesbinzie]

do the Flutter Firebase *Phone* Authentication the cleanest way, please 😕

[@MrMoggz]

Great tutorial, loved that you also added forgot password and verify email. I have Subscribed

[@HeyFlutter]

Thanks, for your support, murage wanjohi! 🙂

[@pietervdw]

Great video, as always! Please keep the Firebase videos coming

[@svitspindler5540]

Thank you for the video! the line 77 at 6:35 is never shown, could you tell me what it is please?

[@HeyFlutter]

Hey, Svit Spindler 🙂 please check at 06:33

[@arturbd4135]

21:01 line 88 I was trying the Email Verification Function but I cant see the whole line. Pls Help...

[@HeyFlutter]

Thanks, also ArturBd! 🙂 please check at 20:53

[@augustwanger2651]

Best programming chanel yet!

[@tupato2552]

Hello, I can not express how much your video helped me. Thank you so moch for your video and your effort, keep up!

[@HeyFlutter]

Glad to hear that, You are most welcome Tu Pato! 😊

[@akshatmodi4843]

This is an Absolute Fabulous Video!! Can't wait to learn more. This solved my very long issue to setup authentication.

[@HeyFlutter]

Glad to hear that, Thank you Akshat Modi! 😊

[@IRgEEK]

This video was exactly what I needed. Thanks! Unfortunately, the links in Github to request access to the source are broken. Thank you!

[@alizaeri3382]

Thank you so much. but it doesn't work in iOS devices. can you help me? or have you another doc or video that help me?

[@HeyFlutter]

Hello, Ali Zaeri! Follow this link: stackoverflow.com/questions/56204740/firebase-phone-auth-flutter-is-not-working-in-some-ios-devices I hope it will solve your problem. Thank You 🙂

[@나나나-g2o]

Wow, This is the best firebase vedio I've ever watched!

[@HeyFlutter]

Thank you, 나나나! 🙂

[@czerxjagody6996]

so helpful, i've search many tutorials and i got nothing, thanks for your explanation !

[@HeyFlutter]

Glad it was helpful, @czerxjagody6996 😀

[@mulualemmhretu]

Wow what amazing way of teaching and helpful tutorial.keep in it up .

[@HeyFlutter]

Thanks, for your support, Mulualem Mhretu! 🙂

[@eugeniakryzhanovska3056]

the best video about fireAuth thank you so much

[@HeyFlutter]

You’re most welcome, @eugeniakryzhanovska3056! 🙂

[@canpietaybek]

Danke sehr für alles bruder, hasst sehr schön alles erklärt!!

[@HeyFlutter]

You are welcome, Can Piet!

[@theunderworld2234]

Can you tell me how to set a password in phone number authentication?

[@vak-anton]

6:34 Hi, I still can see "navigatorKey" does not exist in "login_widget.dart" file. Could you tell me where to bring "navigatorKey" value from "main.dart" file (main page) please? Answer by myself -> Just import navigatorKey from main file

[@HeyFlutter]

Thank you, @vak-anton! 🙂

[@flutterwithali2838]

snapshot is the result of the streambuilder, snapshot.hasData means if the stream has a new event (the event = logging in, or the authstate changed) so we go to the homePage

[@HeyFlutter]

Thanks for your contribution Flutter With Ali

[@kareemhemdan1853]

Fantastic work . keep going Mr Johannes it's perfect

[@HeyFlutter]

Glad you liked it, @kareemhemdan1853 😀

[@dhrubajyotirakshit]

Hi Johannes, I have 2 questions here 1. Why dont you use the standard packages for login and authentication firebase_ui_auth firebase_ui_firestore firebase_ui_database 2. Suppose your user data is stored in firestore collection called users, then how will you pull those info like first name, last name, imageUrl etc on login

[@HeyFlutter]

Hey @dhrubajyotirakshit 😀 1. The packages you shared are nothing but wrappers over standard libraries. You can go with your likings. There are not any such negatives to use them. 2. Please check out this video to perform CRUD with fire-store: kzbin.info/www/bejne/rWTOo4aKiKygl9k

[@dhrubajyotirakshit]

@@HeyFlutter 1. Clear 2. Thats not what I meant. Imagine, while a new user is registered, I am creating users collection and updating first, lastname and imageUrl. Now, when I login, I need to make a call to this users collection to fetch the data. I cannot pull from Auth. For pulling, one option is to call firebase functions, or what do u suggest?

[@miguelbolanos4390]

12:24 i can´t read the entire line (by the way, it´s awesome that you still replaying messages)

[@HeyFlutter]

Hey, Miguel Bolaños 🙂 Please check video at 12:08 you can see whole line

[@mmathems395]

Johannes, your knowledge amazes me and I have wondered, how did this guy know all of this and so much more? Many thanks for sharing, you have saved me and others lots and lots of time. I believe there are some PDF books that you haven't written and published for Amazon and for the Apple bookstore app ... You have the credibility for best sellers. Best wishes.

[@HeyFlutter]

Glad I could be of help, Thank you so much M Mathems! 😊

[@wafaasisalem4049]

Thank you johannes,, can I ask something? What is the best way for user authentication in flutter..? In our apps what should we use? Depends on what?

[@HeyFlutter]

Hey, wafaa sisalem 🙂 Here is the priority order for you 1.) Phone Auth 2.) Email Auth 3.) Social Auth

[@timrohr8475]

Thank you for your explanation. Really amazing. I was looking for something like this. The only question I have now is how to implement the routing here?

[@HeyFlutter]

Thank You Tim Röhr! Follow this link: medium.com/flutter/learning-flutters-new-navigation-and-routing-system-7c9068155ade I hope you will get your answer 🙂

[@pasza01]

best tutorial regarding firebase auth...awesome

[@HeyFlutter]

Glad to hear that, Thank you ThatPassaGuy! 😊

[@ArabiaGroup2023]

Before I watch, I really love you man! You make everything clear and easy. Please continue firebase store

[@elianramirez9860]

Hi, i am new in flutter, please, i need line 4 at time 12:22, idk what code it is, thanks, excelent tutorial, it helped me a lot c:

[@AdityaPandey-vj5ng]

static final messengerKey = GlobalKey();

[@HeyFlutter]

Thank you, Aditya Pandey! 🙂 for helping him.

[@vivekbhakhri735]

Now that's really the clean way

[@HeyFlutter]

Thank you, @vivekbhakhri735! 🙂

[@flutterwithali2838]

Dispose is used because after you log-in you will be navigated to the home page. In other words, the log-in page state is removed and we no longer need the 2 controllers, thus we permanently remove them by disposing them. Atleast that's how i understand it, correct me if i am wrong pls

[@HeyFlutter]

Thank You Flutter With Ali! Follow this link: stackoverflow.com/questions/62340987/initialize-variable-inside-initstate-or-just-below-the-class-definition I hope you will get your answer 🙂

[@고민-w2w]

wow ! . fantastic ..my study is will be very long trip ..

[@HeyFlutter]

Great, thank you, @user-zl8zm2re4p! 🙂👍

[@andreashafsaas581]

Really, really great tutorial. Thanks a lot :D

[@HeyFlutter]

Thank you, Andreas Hafsaas! 🙂

[@aziem462]

@@HeyFlutter i went to your source code, i cant access it but i already have sponsored, should i wait?

[@agustin3186]

Can you make a video using auto_route for navigation/routing and implement an Auth Guard..?

[@HeyFlutter]

Thanks for the idea, Agustin! 🙂 I have added it to my list of ideas for future videos!

[@erhnyilmaz]

Really wonderful video, thanks to you i understood all of them very well. i will suggest to my friends and i followed you.

[@HeyFlutter]

Great, thank you, Erhan Yılmaz! 🙂👍

[@brexzzy8055]

Hey Sir! thanks for make this tutorial, but the codes missed on "navigatorKey.currentState!.popUntil((route) => route", what's the next code after route on Sign in future? Thank's

[@atn3855]

navigatorKey.currentState!.popUntil((route) => route.isFirst);

[@brexzzy8055]

@@atn3855 HEYYYY, thank you so much bro ✌️ u solve my error.. God Bless you!!

[@gsaviary722]

Please share your source code. I need it now. It'll be very helpful. Thanks

[@Mohammadoudat]

Gold.... Could you please do the same using CLI

[@HeyFlutter]

Thanks for the idea Mohammad AlOudat 😀, i have added it in my list of future videos

[@fabianm5960]

At 6:42 is a huge mistake: With the " navigatorKey.currentState!.popUntil((route) => route.isFirst);" you dont check if the Login was succesfull or not. So in every case, we get to the main page, even when we are not logged in.

[@HeyFlutter]

Hey, Fabian M 🙂 Appreciated!

[@saabirmohamed636]

Hi Johannes Thank you for your videos, for the setup part running command flutterfire configure...then following from 2:06 would be ok ? , I always mess up something or other when I copy paste all that config

[@HeyFlutter]

Hey, Saabir Mohamed 🙂 Yes you can continue from shared timestamp

[@farhanashari5149]

Hello. can you help me to fix the problem. When i write the builder (context, snapshot) my project error and the message is "The body might complete normally, causing 'null' to be returned, but the return type, 'Widget', is a potentially non-nullable type, Try adding either a return or a throw statement at the end."

[@habeebmakusota4047]

having an error in the stream builder part 4:17 Err: Type future is not a subtype of type Function?

[@HeyFlutter]

Thank you habeeb makusota, make sure to follow the tutorial step by step 🙂

[@sittididier685]

very good video you are the best. I would like to know can you use Firebase for a money transfer application or a social network application?

[@sittididier685]

@@HeyFlutter thank u so much

[@s-wind2398]

Hi mate! Great video!:) Just one question...is the initial setup you did within the android repo is enough for iOS part as well. Or we need to create or setup some other stuff for iOS repo...Sorry for not very professional question as I am new to Flutter. Thanks

[@HeyFlutter]

Thank you, S-Wind! 🙂. For iOS you need to make a little bit changes.

[@goatsolutions2155]

Hi Johannes! Thanks for the fantastic video! Do you have any idea to way of create a new account in firebase without logging in? I wouldn't like to to open the user home page as soon as account is created.

[@HeyFlutter]

Thank You Goat Solutions! Follow this link: firebase.flutter.dev/docs/auth/usage/ I hope you will get your answer 🙂

[@goatsolutions2155]

@@HeyFlutter Yes, I got it! Follow the solution: Future createUserWithEmailAndPasswordWithoutLoggingIn(String email, String password) async { FirebaseApp app = await Firebase.initializeApp( name: 'Secondary', options: Firebase.app().options ); UserCredential userCredential = await FirebaseAuth.instanceFor(app: app).createUserWithEmailAndPassword(email: email, password: password); await app.delete(); return Future.sync(() => userCredential); }

[@stefgijsbregts7068]

But if a user wants to sign up with an email, but can't verify that email, doesn't that prohibit the person who the email actually belongs to to make an account on your app?

[@HeyFlutter]

Thanks, Stef Gijsbregts! 🙂 This is very practical if user is not able to verify email then something maybe wrong at users end. Also you can include other options for login eg. phone authentication, google login, facebook login

[@stefgijsbregts7068]

@@HeyFlutter Great point, thnx!

[@sindhavipendrasinh2983]

I started watching this video on early morning and this is end at 10:30 pm at night 😅

[@HeyFlutter]

Great, Thank You sindha vipendrasinh

[@faridahmadov5991]

Thank you so much👍🏼 Please make a video about otp as well

[@HeyFlutter]

You’re most welcome, Farid Ahmadov! 🙂

[@gametimermsm249]

Hi Johannes, can you please make a video on Flutter Firebase Authentication using Username and Password

[@HeyFlutter]

Thanks for the idea, GAME TIMER MSM! 🙂 I have added it to my list of ideas for future videos!

[@gametimermsm249]

@@HeyFlutter And please added how to setup cloud firebase to store username?

[@kikokal5810]

@@gametimermsm249 it already has a built in method called DisplayName that u can use, bu adding in the sign up page a username controller and in the future function adding the line FirebaseAuth.instance.currentUser! .updateDisplayName(usernameController.text.trim()); which you can then access in your app with FirebaseAuth.instance.currentUser!.displayName

[@gametimermsm249]

@@kikokal5810 Thanks

[@yipmong]

Hello sir I follow every bit of your lesson but I had issues with the Void dispose() method and the Void initState() method Please help🙏

[@HeyFlutter]

Thank you, 1000 SUSCRIBERS BEFORE DECEMBER🙏! 🙂. Try to paste the error message with your question whenever you face any issue or error.

[@kulithnajika2565]

Great tutorial. When you click the sign in button there is a little delay. Can you add a progress indicator to cover it?

[@HeyFlutter]

Thanks for the idea Kulith Najika 😀, i have added it in my list of future videos

[@tasya_nabila]

Thanks for the code, but I kept getting error :( Except for the login UI, I followed everything exacly in the video

[@HeyFlutter]

Thank You Tasya Nabila! Follow this link: stackoverflow.com/questions/60658945/asynchronous-suspension-in-stacktrace-output-in-flutter I hope you will get your answer 🙂

[@gsaviary722]

Please share the source code. It'll be very kind of you.

[@sanjeevsolanki3300]

Heya great video! When trying to create the Utils class error message its giving the error for "Instance members can't be accessed from a static method." for the messengerKey? Would appreciate some help! Thank you!

[@HeyFlutter]

Hello, Sanjeev Solanki! Follow this link: stackoverflow.com/questions/57216571/instance-members-cant-be-accessed-from-a-static-method-flutter I hope it will solve your problem. Thank You 🙂

[@miguelbolanos4390]

@@HeyFlutter 12:24 i can´t read the entire line (by the way, it´s awesome that you still replaying messages)

[@MAHESHKUMARAMP]

i have one issue.....i created MainScreen and Login screen within statfull class....mainscreen have streambuilder. asume stream builder returned loginscreen,login screen has textform field when i tap textformfield mainscreen will exicuited automatically,

[@HeyFlutter]

Thank you, @user-kn2dj9ye8g! 🙂. Please try to provide enough details with your question

[@tochukwuukpabi901]

abt watching but i see the comments and know you making the streets happy,😂

[@HeyFlutter]

Thank you, Tochukwu Ukpabi! 🙂

[@RV2MM]

This is gold! Thanks a lot

[@HeyFlutter]

Glad you liked it, @RV2MM 😀

[@victoryokoi1267]

Nice work bro. You helped me

[@HeyFlutter]

Glad I could be of help, Thank you Victory Okoi! 😊

[@ariffhaikal6461]

Hello may i know the rest of the code in 21.23 timestamp at line 93?

[@HeyFlutter]

Thank You Ariff Haikal!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware

[@beastrocks2341]

hey can u please do fetching json data with navigation to different pages with the respective I'd please

[@bbammjin]

Always best tutorial👍

[@HeyFlutter]

Thank you, BBAMMJIN! 🙂

[@rubikandil9357]

Is there any way to change this email template like instagram facebook or other apps verifications templates. For example change this link to just Verification Link button instead of such a long link

[@HeyFlutter]

Thanks for the idea, Rubi Kandil! 🙂 I have added it to my list of ideas for future videos!

[@andrewmukelabai8209]

You're a Rockstar!

[@HeyFlutter]

Glad to hear that, Thank you Andrew Mukelabai! 😊

[@ledesmac]

Great video. It would be great to see a tutorial on implementing Auth0 + Firebase in a login. 🙏

[@HeyFlutter]

Thank you, Cristian Ledesma! 🙂

[@kenshinPH]

help while setting up firebase i keep on getting this error: ChromeProxyService: Failed to evaluate expression 'Firebase': InternalError: Expression evaluation in async frames is not supported. No frame with index 39..

[@HeyFlutter]

Hey, @kenshinPH 🙂 are you setting it for web

[@kenshinPH]

@@HeyFlutter i set it for android

[@Orobii69]

i keep getting these E/SurfaceSyncer( 9409): Failed to find sync for id=0 W/Parcel ( 9409): Expecting binder but got null! so the sign in button wont work

[@HeyFlutter]

Thank You Mohammed Maher! Follow this link: github.com/flutter/flutter/issues/116669 I hope you will get your answer 🙂

[@twitchGermanyHighlights]

have the same problem Do you have an anwser?

[@quangle5701]

Why don’t you use the firebaseui? It is much simpler as far as I know. Everything seems to be ready and it allows customization for your need.

[@AjayKumar-gu6np]

Thank you always for your videos. Can you please help us how to create screen as same like Flipcart filter screen.

[@AjayKumar-gu6np]

​@@HeyFlutter Thanks.. I am awaiting for this video.. 🙏

[@vissuuu69]

Can anyone tell ne how to also add logic for landing page.

[@akashchoughule4664]

" Loginpage createState()=>Loginpage( " Only this much is visible . Please can u help if there are any parameters passed there ??

[@HeyFlutter]

Thank you, AKASH CHOUGHULE! 🙂. No there is parameters passed.

[@acoupleofgsanrandaneaniandann]

Convoluted nightmare to get the source code I give up. Also demands I accept terms and conditions when it actually says its a newsletter subscription.

[@НикитаМихайлов-э9ю]

Cool video! Can u please do this with bloc. Where you will use google auth and phone maybe or email Thanks anyway!

[@emmanuelolaniyi5704]

Please I want you to make a video that has to deal with flutter an api backend http post, get and other

[@sakibshaikh3447]

This is True Gem 👍👍

[@HeyFlutter]

Thank you, Sakib Shaikh! 🙂

[@saiham4500]

how do i handle the reset system fully in app

[@HeyFlutter]

Thank You Saiham! Follow this link: firebase.google.com/docs/auth/flutter/manage-users I hope you will get your answer 🙂

[@АнтонБарчей]

You are the best!!! Thank u very much

[@SullyS255]

I love your videos they always help me as i'm someone with Zero programming background, but i need help, How can I add DisplayName when creating account with Email and Password? can you please make a video explains that alone, i've watch a lot of videos but non helped me at all, i really need to know URGENTLY 😭😭😭 please

[@HeyFlutter]

Thanks for the idea, Sally! 🙂 I have added it to my list of ideas for future videos!

[@danasugu1767]

Thanks for the tutorial! Would it be possible to make a tutorial for Flutter Firebase JWT authentication, please?

[@HeyFlutter]

Thanks for the idea, @danasugu1767! 🙂 I have added it to my list of ideas for future videos!

[@danasugu1767]

@@HeyFlutterThanks a lot!

[@soteriaswings]

I am getting this error: Initial task failed for action RecaptchaAction(action=signInWithPassword)with exception - An internal error has occurred. [ Requests from referer are blocked. ]. I'm not really sure what this means though. Can anyone help?

[@HeyFlutter]

Thank You @soteriaswings! Follow this link: stackoverflow.com/questions/51925442/firebase-auth-requests-from-this-android-client-application-com-xxx-are-blocked I hope you will get your answer 🙂

[@soteriaswings]

@@HeyFlutter Thank you! I actually found that the firebase config information wasn't included when the app was initialised, so including that seems to have resolved it! :)

[@ortemmetro]

How to link data from database to each user so app will display only one user's info, who logged in?

[@HeyFlutter]

Hey, @user-px5eb2yr2l 🙂 you can store user data in his/her uid provided by firebase auth

[@faizakmal4607]

hello, I always get error when adding the firebase database to pubspec.yaml. how can i fix it?

[@HeyFlutter]

Hey, @faizakmal4607 🙂 what error are you facing ?

[@rafinhapo]

Why didn't you do _emailContoller and _passwordController. Isn't it nullabe?

[@HeyFlutter]

Thank you for the suggestion! We’ll definitely consider it for our future content ideas.

[@mareknowak9137]

Thank you Johann

[@muhammadafzal237]

How to generate auto increment user Id while registering a new user in flutter?

[@tenj]

Perfection thank you ! is all of this free from firebase or are there any costs ?

[@HeyFlutter]

Thank you, Ali! 🙂. Yes it is.

[@thinkprogramming6764]

Please can you also make a video on local storage ? Thanks in advance 🙏🙏🙏🙏🙏

[@arunss8091]

"on FirebaseAuthException catch (e)" - ---there is an uncaught exception. ... while trying to sign up with existing email id.....how to fix this??

[@HeyFlutter]

Hey 😊, Arun SS! Check out this article to learn how to handle firebase exceptions: medium.com/flutter-community/firebase-auth-exceptions-handling-flutter-54ab59c2853d

[@arunss8091]

Thank you so much for your support 😍

[@akshatsolanki8358]

I am getting an error while (await Firebase.initializeApp();) showing this error message "FirebaseOptions cannot be null when creating the default app."

[@AttractionGroup]

why you put 2024 but ii's not, you have to do another video for flutter 3.19.0

[@HeyFlutter]

Thank you, @AttractionGroup! 🙂. It is working.

[@augustwanger2651]

It sais, cant use static with final messageKey, any solutions?

[@ein44sam]

Thx for the video. I still struggle with sign out button. It signs out well but it does not redirect me to the login page.

[@ein44sam]

if I hotrestart the emulator it shows the login page as it should

[@ein44sam]

and if I redirect it with navigator or navigatorKey it will not show me the main page after log in or sign up

[@HeyFlutter]

Hello, Richard Winter! Follow this link: stackoverflow.com/questions/57828983/cant-logout-and-redirect-to-loginpage-when-using-firebase-google-sign-in-in-fl I hope it will solve your problem. Thank You 🙂

[@flutterwithali2838]

why is onClickedSignIn with Function datatype while onClickedSignUp with VoidCallBack datatype?

[@HeyFlutter]

Thank You Flutter With Ali! Follow this link: levelup.gitconnected.com/fluttering-dart-b37110f4d1bf I hope you will get your answer 🙂

[@rabbihossen9734]

Thank you so much 🧡

[@jamescockfield422]

Love the tutorial. Really helpful and just what I needed

[@HeyFlutter]

Thank you, James Cockfield! 🙂