🔒📱 Email Login & Logout • Flutter Auth Tutorial ♡
Vložit
- čas přidán 27. 07. 2024
- 💬 Chat App w/ Notifications • mitchkoko.gumroad.com/l/ChatA...
📱 Flutter Courses • mitchkoko.app/
👨🏽💻 I'm coding a startup.. / mitchkoko
/ createdbykoko
/ createdbykoko
/ createdbykoko
💰 Book Consultation Call • mitchkoko.gumroad.com/l/CallW...
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.google.com/docs/auth...
If you need more help with setting up FlutterFire CLI, watch this: • Flutter Firebase Setup...
~ ;
🎧 Flutter Pod • / @flutterpod
💰 IF YOU ARE NEW TO FLUTTER.. you need to watch my Flutter UI Course for BEGINNERS mitchkoko.gumroad.com/l/Begin...
💬 JOIN DISCORD SERVER • / discord
~ ;
📱 INSTAGRAM • / createdbykoko
📱 TWITTER • / createdbykoko
📱 TIKTOK • / createdbykoko
💻 GITHUB • github.com/mitchkoko/
🖥 WEBSITE • mitchkoko.app/
flutter ios android to do todo app ui uidesign hive backend complete app widgets habit tracker created from scratch modern dope smart home app ui user interface uix ux tutorial flutter tutorial ui step by step from scratch grocery provider app shop ecommerce mobile app modern minimal login auth authentication firebase login logout tutorial
#flutter #createdbykoko - Věda a technologie
💬 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 • czcams.com/video/Dh-cTQJgM-Q/video.html
2 • 📱 Email Login & Logout • czcams.com/video/_3W-JuIVFlg/video.html
3 • 📱 Email Sign Up • czcams.com/video/qlVj-0vpaW0/video.html
4 • 📱 Google Sign In • czcams.com/video/1U8_Mq1QdX4/video.html
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: czcams.com/video/3lsP1jZNqjE/video.html
I hope this helps you ✌🏾❤
Great! Excited for that.
can't waitt
I liked you all videos
please, i dont get int type from fireStore
FutureeditAge(int Age) async{
}
MyTextBox(
text: userData['Age'],
sectionName: 'Age',
onPressed:()=>editAge('Age')
),
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!
thank you brother! all your videos are simple, logical and easy to comprehend!!! more grace bro
Love the design and explanation is very clear. Can't wait to see the full outcome. Ecommerce is got lots of features to build
Haha yeah let’s see where this goes 😂
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.
Amazing 🤩 it came right on time ❤ thanks for your great efforts
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.
Mitch koko is cute asian man and has a calm voice. This video made me fall asleep while working 😂💓. Thank you for the tutorial
thanks for the tutorial, can't wait the next one :)
your tutorails are owsome. i like them. i have learned many things from your videos thank you so much for your hard work
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.....
This is the best tutorial! 😄
Amazing as always
Hey Muhammad! how's Flutter going for you so far?
ESTE VIDEO ME FUE INCREIBLEMENTE UTIL GRACIAS TE AMO
Great Tutorial, Thanks a lot!
Hi thanks for this tutorial I followed another here on CZcams but a major part was skipped and I got confused. Thanks I really appreciate and you have gained a subscribed too!
hey glad it helped you !! :D
Amazing set of tutorials
Thanks liam💜
Always waiting for your new videos
Haha nice, i’m working hard trying to produce more 👨🏽💻❤️
Life Saver thank you so much
Nice video, very clear and useful, hope you also do the role based authentication
Thank you so much ❤️❤️🤟
awesome tutorial
Awesome bro. It helped me a lot.
❤️
Again Nice Presentation Brother ❤
Glad u like it ❤️
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.
Awesome tutorial.
Glad it helps u 👨🏽💻❤️
thanks a lot great tute yo yo
thank you for expalining all topic very simple type.😍😉😊🤭
Simple is how I like it 💜 glad it helps u!! how is Flutter going so far?
My pc is very bad condetion. 💯😭😭
Nice and Clean The Guide God ❤️
❤️❤️
Hi, Mitch, thanks for the tutorial!
Could you wrap this authentication behind bloc + repository pattern? I'm struggling a lot with this...
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
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
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)} ".
thank you lol I was wondering why no error message was being displayed
Gracias por este video.
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!
Super video bro
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.
in next video in this series... teach us : a profile page for the loggedin user.
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?
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..
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.
hi Mitch, any chance you can tell me or create a content showing how to build an admin panel for firebase ?
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
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?
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
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?
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
I have some questions - shouldn't the void signUserIn be Future instead? and also probably better to dispose of the controllers
great video tho
wonderful tutorial man but the alert dialogue doesnt seem to show up at the try and catch part any suggestions please?
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);
});
}
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
Hey mitch how did you make it so when you click on the Sign Up button it sends you to the home page?
very cool explanation buddy😉, i got error in user logout , screen not navigate to login page if not restart can any help me out?
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?
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.
what doest mounted do doest it tells you current active state?
can you make tutorial about both vertical and horizontal list view app
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
Hey Mitch. Alert Dialog message functions wont appear. Tried researching but no luck.
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!
yes it did changed
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!!
If you take error 11:00 you can use this row :
"LOGGED IN AS : ${user?.email}",
Thanks Mitch.
thx man
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?
Try not using print() in your code instead us debugPrint(). Does that same thing but without any lint warnings.
Ah thanks for that!
bro.. there is a error red line under , and authStateChanges() not founded. its showing onAuthStateChanges. how can i sove this?
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'
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)
I added useRootNavigator: false to the showDialog params and it worked for me fine after that.
Can you do login and registration using provider...??
how can you put your name in flutter and email show but sir name is not show please tell
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
Same issue, did you solved it?
I have the same issue as welll. Any fix yet?
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."
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.
@@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?
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.
Same issue, did yu solve it ?
how does ur build hot reload even with "flutter run"
can you make the same tutorial with nodejs please?
Can i use PHP to authenticate with this same code?
had issues with the flutter core
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?
Got the same issue.
Make sure when you run flutter configure you've correctly selected the platform you're going to use.
@@bonganelebopo2657 got the same issue right now did you found how to solve this iissue?
are you overcame this issue!!?
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.
what if there are two user?
last part of the code is not working.. for try and error.. please help me with that
same here and the code got no errors that is the bad part
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.
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();
}
credit to someone below
@@rfiuwwinlye7453 Thanks a lot it's working now!
cant see the log on my win11, how ?
where is source code for authentication?
for you it was 5 min. for me it was literally 1 hour
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?????
Same with me huhu
*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.
Same issue wt to do
@@CodingMakesMeHappy I think its error linked with firebase configuration
@@ashmaei do u solved this?
@@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.
@@CodingMakesMeHappyAnd in my code I just change the Error widget from *ShowDialog* to *SnackBar* to make it clean and simple.
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.
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
well thanks for your help @@boy_negative my error got solved as i re-installed the cli
flutter otp login please it is so confusing
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
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
@@createdbykoko yes if the app is closed in the background and yes the user can login every time.
Hey mitch do you know how to do this my friend will you do a vid? It would be massive thanx by hand
getting a error streambuilder
Can you do login and registration using provider...?? Please
Absolutely, noted!
any chance you could make a tutorial for auth without firebase?
Yeah i could in the future videos. Any suggestion for which service to use?
@@createdbykoko say something like a custom server or API endpoint
bro, how i can fix bottom overflowed by 306 pixels what should i do?
wrap your main column widget with Scrollview
bro i cant understand auth please new video step by step
How do i login into firebase from VsCode? Im stuck there
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
me when I found this tutorial @11:57
I really love your tutorials, but can you be more detailed.
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.
Is it possible to make this with Hive db?
Of course! however hive is used for local storage. This video was about authentication. What is your question exactly? 💜💜
@@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
@@kheprago nice! Good luck with that! Let me know how it goes💜
can you give me the code?
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.
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.
Did you solve it?
@@emirhanyarali7050 nope
my sign in button wont work
why not
I think I was able to fix that but im having another issue. In Xcode i mistakenly clicked the "change recommended settings" suggestion which was extremely frustrating as it caused all sorts of issues but i managed to correct mostly everything except now xcode gives me the error: /Users/chide/Desktop/barzzy_app/ios/Runner/GeneratedPluginRegistrant.m:12:9 Module 'firebase_auth' not found. For reference ive used the commands sudo flutter clean, pod install, flutter pub get, and pod innit and some other commands i saw on random online forums when I was trying to fix things myself I dont know if any of those possible messed up anything. Thank you for responding so quickly btw and great video! Heres what my generated file looks like:
//
// Generated file. Do not edit.
//
// clang-format off
#import "GeneratedPluginRegistrant.h"
#if __has_include()
#import
#else
@import firebase_auth;
#endif
#if __has_include()
#import
#else
@import firebase_core;
#endif
@implementation GeneratedPluginRegistrant
+ (void)registerWithRegistry:(NSObject*)registry {
[FLTFirebaseAuthPlugin registerWithRegistrar:[registry registrarForPlugin:@"FLTFirebaseAuthPlugin"]];
[FLTFirebaseCorePlugin registerWithRegistrar:[registry registrarForPlugin:@"FLTFirebaseCorePlugin"]];
}
@end
@@createdbykoko
idk what happened I think all my other replies got deleted or something but i fixed the sign in but now i have the error Parse Issue (Xcode): Module 'firebase_auth' not found
/Users/chide/Desktop/barzzy_app/ios/Runner/GeneratedPluginRegistrant.m:11:8
Encountered error while building for device. No clue what happened my pubspec.yaml is the same as yours im thinking its maybe something in my xcode settings but not entirely sure what happened. Any help would be greatly appreciated @@createdbykoko