🔒📱 Email Login & Logout • Flutter Auth Tutorial ♡

💰 I'll develop your MVP app: mitchkoko.app/mvp
📱 Code: mitchkoko.app/
🎓 Flutte Beginner Course: • 📱 FULL Flutter Beginne...
💌 Email: [e-mail]
~;
/ createdbykoko
/ createdbykoko
/ createdbykoko
/ mitchkoko
~;
This is the second tutorial in this Flutter Authentication series, where we are going to use Firebase to login and logout with email. The next tutorial will be on Apple and Google sign in.
FLUTTER AUTH PLAYLIST:
1 • 📱 Modern Login UI • • 🔒📱 Modern Login UI • F...
2 • 📱 Email Login & Logout • • 🔒📱 Email Login & Logou...
3 • 📱 Email Sign Up • • 🔒📱 Email Sign Up • Flu...
4 • 📱 Google Sign In • coming soon..
5 • 📱 Apple Sign In • coming soon..
FIREBASE x FLUTTER AUTH DOCUMENTATION • firebase.googl...
If you need more help with setting up FlutterFire CLI, watch this: • Flutter Firebase Setup...

[@createdbykoko]

💬 Chat App w/ Notifications • mitchkoko.gumroad.com/l/ChatAppMasterclass 📱 Flutter Masterclass • mitchkoko.app/ 🔥 I'm coding a startup.. www.patreon.com/mitchkoko FLUTTER AUTH PLAYLIST: 1 • 📱 Modern Login UI • kzbin.info/www/bejne/epmQlIeHf8yAY7M 2 • 📱 Email Login & Logout • kzbin.info/www/bejne/lWS6Xn2rfrt5osk 3 • 📱 Email Sign Up • kzbin.info/www/bejne/p525m2Bmq9WUjZI 4 • 📱 Google Sign In • kzbin.info/www/bejne/Z4abkICnZraXjpY FIREBASE x FLUTTER AUTH DOCUMENTATION • firebase.google.com/docs/auth/flutter/password-auth If you need more help with setting up FlutterFire CLI, watch this: kzbin.info/www/bejne/aZ3WgWSgj7OkoKc I hope this helps you ✌🏾❤

[@muhammadfaraz3697]

Great! Excited for that.

[@izuku3132]

can't waitt

[@kradron]

I liked you all videos

[@kradron]

please, i dont get int type from fireStore FutureeditAge(int Age) async{ } MyTextBox( text: userData['Age'], sectionName: 'Age', onPressed:()=>editAge('Age') ),

[@osmigtorres2333]

im doing exactly what youre doing, at the moment i put email and password and hit sign in it doesnt do anything, i need help, i've reviewed the lines and they are just like yours

[@gregoryam]

If you're not getting the error messages in your console: Google has added email enumeration protection, which you will need to turn off (Not recommended), because attackers may try to see if your app has that email address associated with your app. There's no way to see (if this is enabled) if the password or email is incorrect as it will only print invalid-credential to the console if you use " else {print(e.code)} ".

[@MMR20]

thank you lol I was wondering why no error message was being displayed

[@xudayfitechoffiaicl5125]

thank you so much pro

[@itsahmed-dev]

To deal with 'Do not use BuildContexts across async gaps' error write code line with context problem like this if (mounted) Navigator.pop(context); or if (!mounted) return; before that line.

[@sacrafixe6822]

what doest mounted do doest it tells you current active state?

[@GabrielleMutunda]

Hiiiii, I don't know why this part of my code is not working if (e.code == 'user-not-found') { //pop up wrong email wrongEmailMessage(); } else if (e.code == 'wrong-password') { //pop up wrong password wrongPasswordMessage(); // ignore: use_build_context_synchronously } The Alert dialog box doesn't show up at all and I don't know why, I'll be glad to get help! Thanks.

[@rfiuwwinlye7453]

if (e.code == 'wrong-email') { wrongEmailMsg(); } else if (e.code == 'wrong-password') { wrongPasswordMsg(); change to : }if (e.code == 'invalid-email') { wrongEmailMsg(); } else if (e.code == 'invalid-credential') { wrongPasswordMsg(); }

[@rfiuwwinlye7453]

credit to someone below

[@GabrielleMutunda]

@@rfiuwwinlye7453 Thanks a lot it's working now!

[@mysticalevents-y4i]

Thank you for the wonderful video. I have run the code and the UI is launched fine. Log in is working. But the Wrong email and Password check is not working. It doesn't even print the message on console or show on alert dialog. Any pointers will be helpful.

[@AndreasBisaNgoding]

did anyone have issue with wrong email/password notification not working?

[@RishabShrestha]

Bro i dont know what i di wrong but after clicking the login button it logs in but i have to press the back button

[@Cpmille]

Most excellent videos man! I have enjoyed all of them I've seen so far. I had an issue with the wrong password alert. It seems that maybe the documentation has changed since you made this video. When I printed out e.code to check, it looks like the code 'user-not-found' may be replaced with 'invalid-login-credentials' is the new code to use to account for wrong email or password. This may help some who follow along at a later date. Again great job you are an excellent teacher!

[@sakshamavasthi1013]

yes it did changed

[@siddhikamundada2453]

Hey There! I am stuck with the similar issue and tried what you suggested but it's still showing the loading circle and not the pop up message Can you help me with this one? Thank you!!

[@clixt984]

So far so good man! I'm a Flutter noob but do have some experience with front-end dev. You make learning Flutter "chill". Looking forward to watch more of your Flutter tutorials! PS: I did encounter issues with flutterfire not adding the firebase_core: ^2.13.0 to the pubspec.yaml. Maybe because I had it open? Either way it's an easy fix.

[@studentgaming3107]

dude i like your videos but you are going way too fast also i tried that damn firebase i just keep getting errors. no thanks to you i fixed it keep in mind when making videos dont skip parts, you can code but cant put up a video so 1/5 rating for you boyyy

[@ashmaei]

*HELP* This message appeared "Initial task failed for action RecaptchaAction(action=signInWithPassword)with exception - The supplied auth credential is incorrect, malformed or has expired." instead of 'Error' popup.

[@CodingMakesMeHappy]

Same issue wt to do

[@ashmaei]

@@CodingMakesMeHappy I think its error linked with firebase configuration

[@CodingMakesMeHappy]

@@ashmaei do u solved this?

[@ashmaei]

​@@CodingMakesMeHappyIn the if else condition, I just changed from 'user-not-found' to error that firebase show for ex. 'invalid-email'. You can watch his next tutorial how to make app pull of type of error.

[@ashmaei]

​​@@CodingMakesMeHappyAnd in my code I just change the Error widget from *ShowDialog* to *SnackBar* to make it clean and simple.

[@AlexSison-jt2uc]

Hey Mitch. Alert Dialog message functions wont appear. Tried researching but no luck.

[@anik_uddin_]

when I press login nothing happens however when I run hot reload then the auth page does its job and navigates to homepage. how do I fix this?

[@bonganelebopo2657]

Got the same issue.

[@bonganelebopo2657]

Make sure when you run flutter configure you've correctly selected the platform you're going to use.

[@sabarinathan2461]

​@@bonganelebopo2657 got the same issue right now did you found how to solve this iissue?

[@sabarinathan2461]

are you overcame this issue!!?

[@itsahmed-dev]

Try not using print() in your code instead us debugPrint(). Does that same thing but without any lint warnings.

[@createdbykoko]

Ah thanks for that!

[@allendsouza340]

Hey im running into this error towards the end, where i couldnt print either of the errors, and when i moved towards displaying the alert dialog, it just displays a blank screen for either of the errors. How could i fix this?

[@siddharth2357]

thank you for expalining all topic very simple type.😍😉😊🤭

[@createdbykoko]

Simple is how I like it 💜 glad it helps u!! how is Flutter going so far?

[@siddharth2357]

My pc is very bad condetion. 💯😭😭

[@hooter0055]

I am having an issue with this method. Two of them. One, if I enter something like wrong password, or email, it shows the popup box with the error message, then changes to a white background with the loading indicator still. Second. When I successfully continue on, the app I'm working on's home page will flash, then go to a white screen again with the loading indicator. I tried following along the tutorial but doing it on my own, then even tried copy and pasting your code verbatim. Any suggestions? EDIT: I just found if I exit out of the app and reopen it, it will then be at the home page (if I'm using your blank home page "logged in as" template)

[@hooter0055]

I added useRootNavigator: false to the showDialog params and it worked for me fine after that.

[@eraysona]

for you it was 5 min. for me it was literally 1 hour

[@CS_34_PRAJAPATI_SACHIN]

last part of the code is not working.. for try and error.. please help me with that

[@YusufAbdiali-o5z]

same here and the code got no errors that is the bad part

[@RishitPankhaniya]

very cool explanation buddy😉, i got error in user logout , screen not navigate to login page if not restart can any help me out?

[@danver7629]

Hi Mitch, I followed your steps, but when I close the app on my android phone, the user is signed out automatically. Do you know what may be causing this? I do not have this problem with any other app on my phone and on the emulator it seems to work fine. Thank you for your great tutorials!

[@durgeshjadhav01]

bro , if there's someone to copy style in development field .i will choose you . i really enjoy your videos . i really badly want to connect with you

[@BlvckBoyGreg]

Hi Mitch, my name is Gregory. So I've been following your tutorials step by step and they've been helpful but I have little problem. So for my app, I already created a splash screen and I made it the first tihng to appear not auth page. But by doing that, it does not display the auth page and the sign in button isn't clickable as well. But as soon as I change the home to the Auth page on the main.dart file, it works. What should i do? Thank you

[@hermanosdt5984]

Same issue, did you solved it?

[@UpliftUniverse78]

I have the same issue as welll. Any fix yet?

[@krissie115]

Hi thanks for this tutorial I followed another here on KZbin but a major part was skipped and I got confused. Thanks I really appreciate and you have gained a subscribed too!

[@createdbykoko]

hey glad it helped you !! :D

[@paulocbbf]

Hi, Mitch, thanks for the tutorial! Could you wrap this authentication behind bloc + repository pattern? I'm struggling a lot with this...

[@ugochukwuanajemba3117]

Love the design and explanation is very clear. Can't wait to see the full outcome. Ecommerce is got lots of features to build

[@createdbykoko]

Haha yeah let’s see where this goes 😂

[@waniaakhann]

hey there, its a great process learning from your videos and it has been very helpful, but what if i were to have two types of users instead of one? how would i direct myself to each log in accordingly?

[@IccyAnime]

I have some questions - shouldn't the void signUserIn be Future instead? and also probably better to dispose of the controllers great video tho

[@apsinghcreations6790]

can you show keychain access in login form(for save or get autofill email password)

[@cehpurushothaman6165]

Life Saver thank you so much

[@esther_cinephilepourDieu]

Hello i hope you're fine and thanks for this good video. i have a question : when i change my stateless to stateful widget like you i had an erro while you don't have one, and i don't know how to correct it. i have tested many reponses and with that the error i can test my app. the error is : Missing concrete implementation of 'State.build'.Try implementing the missing method, or make the class abstract.

[@AllenHegic]

Same issue, did yu solve it ?

[@P_double_H]

Mitch, thanks for your videos. I enjoy them a lot. Did flutter change the way FirebaseAuthException's e.code works? the IF condition that checks for e.code does not work because e.code is not returning "user-not-found", or "wrong-password"... e.code always comes back as "invalid-credential" whether the email incorrect or the password. And when the fields are left empty, it returns "wrong-channel". Another thing I noticed is that e.message always comes back as "The supplied auth credential is incorrect, malformed or has expired."

[@P_double_H]

Alright, answering my own question. If you encounter the same issue, it turns out that after September 15, 2023 it seems that Google changed the exception codes that are returned by the FirebaseAuthException class in order to prevent attacks. So, in other words.. you won't get 'user-not-found and wrong-password" from e.code anymore. You could either deal with the more generic e.code value which is "invalid-credential", or you could disable the Email enumeration protection inside the Firebase Auth Settings page. Hope that helps everyone else having the same issue.

[@ButterDog11]

@@P_double_H yea just found that out, its a bummer. any clue how i can find is the email or password is invalid separately?

[@PsychoDude]

Hi! After u finish the auth tutorials, will u be able to help us learn how to set the monetization part of an app? for example, only show a certain page if the user is "v.i.p." otherwise it shows another. etc. I know that envolves DBs but the flutter aspect of it would be great! Thanks :D

[@21preend42]

at 9:46 this didn't work for me at all, i tried so many things, I don't really know why because i am a beginner. I did successfully logged in, but pressing Sign In wouldn't change page. I had the page change to a separate Profile page, instead of home, so maybe that was the issue, maybe the streamer is not checking if the user is logged in properly???, changing the home to AuthWrapper, worked but i didn't want that. I did fix it after i looked it up i think this is what made it work "Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (_) => ProfilePage()));" and some other coding.

[@tonymetogo5287]

Good morning! I really like this tutorial. But can you add a feature that when the user registers, the system generates a unique alphanumeric code for each user please.

[@itsahmed-dev]

Wiggly lines are annyoying. Here's something you can do about it. Open analysis_options.yaml from root of the project and add rules that're annoying that set them to false so linter don't show blue wiggly line ``` rules: prefer_const_constructors: false prefer_const_literals_to_create_immutables: false prefer_const_constructors_in_immutables: false ``` You're welcome.

[@prathamgangwal1735]

flutter otp login please it is so confusing

[@mdkamruzzaman7174]

bro.. there is a error red line under , and authStateChanges() not founded. its showing onAuthStateChanges. how can i sove this?

[@innerenglish3574]

why do 'incorrect email' is displayed as many times as I click on sign in, but 'incorrect password' is displayed only the first time a wrong pass has been inputted, only once, no mater how many times i clicked 'sign in'

[@NematJafari-pq4ju]

hi Mitch, any chance you can tell me or create a content showing how to build an admin panel for firebase ?

[@aaryatawde2612]

hey mitch!! am getting an error: am using windows version of vs code. in the terminal of vs code as i put the command of flutterfire configure it returns with an exception as follows: "FirebaseCommandException: An error occured on the Firebase CLI when attempting to run a command." it also returns with the error message- "ERROR: The FlutterFire CLI currently requires the official Firebase CLI to also be installed" i have already installed the firebase cli, but still it is giving me the error. please help in resolving this issue.

[@boy_negative]

you can fix by you new install beacasue i tryed new install it works or you set path again if i use worse grammar i am sorry beacasue i am thai

[@aaryatawde2612]

well thanks for your help @@boy_negative my error got solved as i re-installed the cli

[@cameron8791]

Can you do login and registration using provider...?? Please

[@createdbykoko]

Absolutely, noted!

[@kevalmotisariya1215]

Always waiting for your new videos

[@createdbykoko]

Haha nice, i’m working hard trying to produce more 👨🏽‍💻❤️

[@Lin-bi2rd]

Nice video, very clear and useful, hope you also do the role based authentication

[@Balakrishnan-zx6yx]

There is one UI issue in your code... When I entered the wrong-email it shows alertBox as "Invalid Email". If I tap on the screen AlertDailog disappers. Upto this, it is fine. But if I again click sign In, AlertDailog didn't appeard after any number of times. Could you please comment about this. Thank you sir.

[@Migoo_c]

i have issue too. The AlertBox not showing up, and before AlertBox, I try use 'print' like in 13:35 but not showing in terminal.

[@emirhanyarali7050]

Did you solve it?

[@Migoo_c]

@@emirhanyarali7050 nope

[@aishwaryakasthala97]

So.. I never read the documentation for firebase.. and I used to add the iOS and Android projects manually.. Thanks for the letting me know about the firebase commands..

[@vizallaround]

how does ur build hot reload even with "flutter run"

[@javimx771]

Thank you for wasting my time. Your GitHub repository is incomplete and missing many files. Additionally, with this configuration, the application produces multiple errors when running. If you are not going to show the complete process, it is better not to make the video, or at least clearly state that it is incomplete so I don't waste my time. Dislike.

[@akshatoppp]

Its because some of you steal his project instead of working

[@doctor_no_]

Dude just troubleshoot errors!

[@LeonardoReyes-ob7hv]

Hello, for some reason the loading circle doesn’t go away. It only disappears when I click on the app. How else can I resolve this?

[@deathgod_69]

Hey Mitch at the end can you turn it into a fitness app that has a feature of weight chart that you manually put weight on certain dates and it is represented by a beautiful graph at the end.. and persists. If possible with other features also

[@MrAlus3]

Very very useful, I don't know how to explain it but you only tell us "the needfull" and you do things fast which is very productive, as I need to learn flutter for only a single project, it's perfect for me. Keep it going buddy!

[@felipefranco7444]

Hey mitch what if the user closes the app in the background what happens with the user it stays logged in what can we do there

[@createdbykoko]

Do you want the user to be logged out when the app is closed? That’s possible but not sure if you want the user to log in every time

[@felipefranco7444]

@@createdbykoko yes if the app is closed in the background and yes the user can login every time.

[@felipefranco7444]

Hey mitch do you know how to do this my friend will you do a vid? It would be massive thanx by hand

[@hck1bloodday]

Good video man, just a question wouln't having the google logo only as a button to login violates the google trademark? they explicitly say to don't do that

[@madharry06]

how can you put your name in flutter and email show but sir name is not show please tell

[@ZiedMcHarek]

Thank you for the professional video. Just one small thing in the signUserIn method. Here's a small adjustment for deleting the CircleIndicator without warning void signUserIn() async { showDialog( context: context, builder: (context) { return const Center( child: CircularProgressIndicator(), ); }, ); await FirebaseAuth.instance .signInWithEmailAndPassword( email: emailControler.text, password: passwordControler.text) .then((_) { if (!context.mounted) return; Navigator.pop(context); }); }

[@DavidOlorunsola-y3o]

I really love your tutorials, but can you be more detailed.

[@thomazbotelho]

Hi Mitch! Thanks for the tutorial. In the end... when I have the dialogs of wrong email / wrong password... after I click it to dismiss... I'm yet having the CircularProgressIndicator. It's only dismissed when I log in. Could you help me?

[@taiwotolulope5077]

wonderful tutorial man but the alert dialogue doesnt seem to show up at the try and catch part any suggestions please?

[@GemPuzz]

Mitch koko is cute asian man and has a calm voice. This video made me fall asleep while working 😂💓. Thank you for the tutorial

[@addinannas7909]

helloo koko.., i just want to know if we put the authentication firebase and firebase hosting do we need to redo 2 times of the json file?

[@Alzari]

Amazing 🤩 it came right on time ❤ thanks for your great efforts

[@amruthmr7001]

hiii nice tutorial i copied exactly how u where doing and everything works properly, except after i clicked the signin button its not going to the homepage but the terminal shows its has connected to the firebase correctly and also shows my user id how can i solve this?????

[@nieall]

Same with me huhu

[@blekbomor]

Hey mitch how did you make it so when you click on the Sign Up button it sends you to the home page?

[@HieronimKsaweryKowalski]

Thanks for the tutorial! It explains things very well. I would be very happy if you could explain REST API (php) authentication as well. I bet there are many php backends out there that could be used with flutter apps and for sure there are many people interested in this area... I am one of them :)... please consider adding REST API (php) authentication tutorial.

[@ghadasaeed1492]

I keep on getting this code error and I have already followed the steps to connect Firebase to my app, Any Idea how to solve it ?? What went wrong: Plugin [id: 'com.google.gms.google-services'] was not found in any of the following sources: - Gradle Core Plugins (plugin is not in 'org.gradle' namespace) - Plugin Repositories (plugin dependency must include a version number for this source)

[@muhammadatif3666]

bro i cant understand auth please new video step by step

[@furkanarc2hotmail]

If you take error 11:00 you can use this row : "LOGGED IN AS : ${user?.email}", Thanks Mitch.

[@jayr7505]

thx man

[@sirk3v]

any chance you could make a tutorial for auth without firebase?

[@createdbykoko]

Yeah i could in the future videos. Any suggestion for which service to use?

[@sirk3v]

@@createdbykoko say something like a custom server or API endpoint

[@healdesk5649]

can you make the same tutorial with nodejs please?

[@osmigtorres2333]

Im not sure why it did not generated the firebase_options.dart file someone help me please!

[@21izah]

Can't wait for Google signing 🥰....and your last read you covered reading and displaying all ids and their corresponding data, would love it if you can do one on reading and displaying for just the user data..... Dat way one can learn to manipulate d data which ever way he wants.....

[@bhanukadasanayaka3457]

can you make tutorial about both vertical and horizontal list view app

[@azeemr0155]

in next video in this series... teach us : a profile page for the loggedin user.

[@angelou8633]

what if there are two user?

[@kenalcantara1269]

bro, how i can fix bottom overflowed by 306 pixels what should i do?

[@AlexSison-jt2uc]

wrap your main column widget with Scrollview

[@usefullthings102]

your tutorails are owsome. i like them. i have learned many things from your videos thank you so much for your hard work

[@adilahusin]

Thanks for the tutorial, clear and thorough explanation, especially for newbies and students like me! Also, thanks for sharing the source code, that way I can analyze and refer my code to yours if there are any issues.

[@muhammadfaraz3697]

Amazing as always

[@createdbykoko]

Hey Muhammad! how's Flutter going for you so far?

[@pastortalkingpencil]

thank you brother! all your videos are simple, logical and easy to comprehend!!! more grace bro

[@brindusanraul6571]

How do i login into firebase from VsCode? Im stuck there

[@createdbykoko]

Hello, did u follow the first 2 mins of the video? Let me know more information about your problem and I can try to help u out

[@thecodelogin]

where is source code for authentication?

[@sandipsherpa6319]

Can you do login and registration using provider...??

[@tejasdashpute1787]

can you please make a tutorial that how can we handle wrong password exception as whenever someone tries to enter wrong password then it hang up the app so please make over it or help me regarding it

[@revanth55322]

getting a error streambuilder

[@cashtonholbert4515]

me when I found this tutorial @11:57

[@jenjiliv2659]

cant see the log on my win11, how ?

[@Mehaboobhpt]

Awesome bro. It helped me a lot.

[@createdbykoko]

❤️

[@munir2010able]

Can i use PHP to authenticate with this same code?

[@obong_samjoe]

had issues with the flutter core

[@agustinmarzioni5216]

ESTE VIDEO ME FUE INCREIBLEMENTE UTIL GRACIAS TE AMO

[@kheprago]

Is it possible to make this with Hive db?

[@createdbykoko]

Of course! however hive is used for local storage. This video was about authentication. What is your question exactly? 💜💜

[@kheprago]

@@createdbykoko wanted to make simple fitness tracker, so I chose Dart + Flutter + Hive. And I wanted to implement something like "login with profile" functionality using local DB

[@createdbykoko]

@@kheprago nice! Good luck with that! Let me know how it goes💜

[@deathgod_69]

Nice and Clean The Guide God ❤️

[@createdbykoko]

❤️❤️

[@LagoonLofi]

Amazing set of tutorials

[@createdbykoko]

Thanks liam💜

[@dendroid4389]

thanks a lot great tute yo yo

[@MarufjonovDev]

can you give me the code?

thanks for the tutorial, can't wait the next one :)

[@fadhilivunza]

Awesome tutorial.

[@createdbykoko]

Glad it helps u 👨🏽‍💻❤️

[@thushankalana4940]

Thank you so much ❤️❤️🤟

[@RavientClothing]

Great Tutorial, Thanks a lot!