Flutter Firebase Authentication [2024] The Cleanest Way

Use Firebase Authentation with Flutter to SignIn, SignUp, Reset Password and Verify Email inside your Flutter app.
Click here to Subscribe to Johannes Milke: kzbin.info...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/fire...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/#/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
TIMELINE
0:00 Setup Firebase Authentication
2:38 SignIn Firebase Authentication
6:56 SignUp Firebase Authentication
13:25 Forgot Password Firebase Authentication
16:14 Verify Email Firebase Authentication
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)

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

[@pietervdw]

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

[@harunavictor9743]

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

[@hasanqasim2182]

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

[@markthrasher4548]

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

[@HeyFlutter]

You are welcome, Mark Thrasher 😊

[@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?

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

[@MrMoggz]

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

[@HeyFlutter]

Thanks, for your support, murage wanjohi! 🙂

[@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! 😊

[@moisesbinzie]

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

[@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! 😊

[@augustwanger2651]

Best programming chanel yet!

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

[@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! 🙂👍

[@kareemhemdan1853]

Fantastic work . keep going Mr Johannes it's perfect

[@HeyFlutter]

Glad you liked it, @kareemhemdan1853 😀

[@mulualemmhretu]

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

[@HeyFlutter]

Thanks, for your support, Mulualem Mhretu! 🙂

[@czerxjagody6996]

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

[@HeyFlutter]

Glad it was helpful, @czerxjagody6996 😀

[@developerbs]

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

[@HeyFlutter]

Glad you liked it, @developerbs 😀

[@user-of6jv4dm8f]

You are the best!!! Thank u very much

[@rabbihossen9734]

Thank you so much 🧡

[@user-gk3ns5uu2w]

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

[@HeyFlutter]

Thank you, 나나나! 🙂

[@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?

[@mareknowak9137]

Thank you Johann

[@RV2MM]

This is gold! Thanks a lot

[@HeyFlutter]

Glad you liked it, @RV2MM 😀

[@canpietaybek]

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

[@HeyFlutter]

You are welcome, Can Piet!

[@eugeniakryzhanovska3056]

the best video about fireAuth thank you so much

[@HeyFlutter]

You’re most welcome, @eugeniakryzhanovska3056! 🙂

[@ArabiaGroup2023]

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

[@pasza01]

best tutorial regarding firebase auth...awesome

[@HeyFlutter]

Glad to hear that, Thank you ThatPassaGuy! 😊

[@victoryokoi1267]

Nice work bro. You helped me

[@HeyFlutter]

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

[@jesusalbertopertuzorozco6088]

Eres un capo, gracias brother.

[@faridahmadov5991]

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

[@HeyFlutter]

You’re most welcome, Farid Ahmadov! 🙂

[@jamescockfield422]

Love the tutorial. Really helpful and just what I needed

[@HeyFlutter]

Thank you, James Cockfield! 🙂

[@zorab0011]

very well explained

[@HeyFlutter]

You are welcome, zorab00!

[@uraz2164]

great tutorial thank you

[@HeyFlutter]

You are welcome, Uraz!

[@ledesmac]

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

[@HeyFlutter]

Thank you, Cristian Ledesma! 🙂

[@bbammjin]

Always best tutorial👍

[@HeyFlutter]

Thank you, BBAMMJIN! 🙂

[@user-zl8zm2re4p]

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

[@HeyFlutter]

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

[@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 🙂

[@vivekbhakhri735]

Now that's really the clean way

[@HeyFlutter]

Thank you, @vivekbhakhri735! 🙂

[@nhanghetlaptrinh]

thank you so much!

[@HeyFlutter]

You are welcome, Nhân ghét!

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

[@andrewmukelabai8209]

You're a Rockstar!

[@HeyFlutter]

Glad to hear that, Thank you Andrew Mukelabai! 😊

[@Hazara_boy]

Perfect tutorial.

[@HeyFlutter]

Thanks, @haxara! 🙂

[@peternierop3241]

Outstanding

[@sakibshaikh3447]

This is True Gem 👍👍

[@HeyFlutter]

Thank you, Sakib Shaikh! 🙂

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

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

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

[@thinkprogramming6764]

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

[@user-li5bk6su3r]

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

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

[@tochukwuukpabi901]

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

[@HeyFlutter]

Thank you, Tochukwu Ukpabi! 🙂

[@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! 😊

[@sanjuktaghatak6825]

Hi Johannes, I really like your all videos. It has helped me a lot in developing my app. My request to you to help with coding to restrict Login from one device at a time.

[@HeyFlutter]

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

[@sanjuktaghatak6825]

@@HeyFlutter Great, please share soon 😊waiting for it eagerly..

[@mehdikazmi773]

amaizing!

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

[@tenj]

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

[@HeyFlutter]

Thank you, Ali! 🙂. Yes it is.

[@davidlhr]

Good Video

[@HeyFlutter]

Thank you, David! 🙂

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

[@beastrocks2341]

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

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

[@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); }

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

[@theunderworld2234]

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

[@frankmwale1580]

Consider writting a book man!🔥

[@HeyFlutter]

Thank you, frank mwale! 🙂

[@harimakani2316]

plz, make a video on firestore.

[@Jesus-yz5iu]

Hey Sir! Why don't you make a video on how to make 2 FPS Gif with multiple images in Flutter?

[@akashlilhare1831]

Please make video on Facebook authentication using firebase

[@bhabhayt398]

There are different users but each user should see his own data: How to define roles to solve any issue

[@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!

[@emmanuelolaniyi5704]

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

[@theeducationuniverse]

Hi bro,. How to create like button with firestore

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

[@muhammadafzal237]

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

[@user-oo4vm1cl5b]

Flutter Firebase Authentication [2024] The Cleanest Way but published 2 years ago.

[@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 🙂

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

[@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 🙂

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

[@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!

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

[@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!

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

[@augustwanger2651]

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

[@akshatsolanki8358]

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

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

[@vissuuu69]

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

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

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

[@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)

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

[@gustavegustave2766]

Bonjour Monsieur, excellent tuto. exactement ce dont j'ai besoins, mais je n'arrive pas à télécharger le code source.

[@HeyFlutter]

Thank you, Gustave Gustave! 🙂

[@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!

[@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!

[@nimsmgr]

otp verification with firebase pls 🙏🙏

[@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 🙂

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

[@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! 🙂