Flutter Firebase Authentication [2024] The Cleanest Way
ฝัง
- เผยแพร่เมื่อ 11 ก.ค. 2024
- Use Firebase Authentation with Flutter to SignIn, SignUp, Reset Password and Verify Email inside your Flutter app.
Click here to Subscribe to Johannes Milke: th-cam.com/users/JohannesMilke...
👉 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 :-) - วิทยาศาสตร์และเทคโนโลยี
![[4K] BABYMONSTER(베이비몬스터) “FOREVER” Band LIVE Concert “영원히” 베몬만을 사랑하게 되…💗 [it’s KPOP LIVE 잇츠라이브]](http://i.ytimg.com/vi/TQfC0xdpiw4/mqdefault.jpg)
![[UNCUT] ที่นี่ที่แรก ปู - หาญส์ พูดถึงมหากาพย์หนี้สิ้น I คนดังนั่งเคลียร์ I 10 ก.ค.67](http://i.ytimg.com/vi/KDNA9DZ0p4U/mqdefault.jpg)
👉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
I'm unable to get access to source code, i requested but nothing is sent to my email
i can't stop thanking you for this amazing content.
Great video, as always! Please keep the Firebase videos coming
You are a life saver...
Thank God 🙏 I just saw this video before starting my next project...
What's your project about if I may ask?
Thank You Brother. I was stuck in this logic for two days.
This truly is a very clean way of implementing the firebase authentication. Thanks for the excellent video!
You are welcome, Mark Thrasher 😊
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
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!
You are genius! I've spent two weeks :D
can you share the code please
@@alexeyantonenko877it will be kind enough if you share your code. Thank you
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 :)
Glad to hear that, Thank you @soteriaswings! 😊
This is an Absolute Fabulous Video!! Can't wait to learn more. This solved my very long issue to setup authentication.
Glad to hear that, Thank you Akshat Modi! 😊
Great tutorial, loved that you also added forgot password and verify email. I have Subscribed
Thanks, for your support, murage wanjohi! 🙂
Hello, I can not express how much your video helped me. Thank you so moch for your video and your effort, keep up!
Glad to hear that, You are most welcome Tu Pato! 😊
Best programming chanel yet!
Thank you so much for the informative tutorial video.
Love from Türkiye
Glad you liked it, @developerbs 😀
Fantastic work . keep going Mr Johannes it's perfect
Glad you liked it, @kareemhemdan1853 😀
Before I watch, I really love you man! You make everything clear and easy. Please continue firebase store
Wow what amazing way of teaching and helpful tutorial.keep in it up .
Thanks, for your support, Mulualem Mhretu! 🙂
Really wonderful video, thanks to you i understood all of them very well. i will suggest to my friends and i followed you.
Great, thank you, Erhan Yılmaz! 🙂👍
Wow, This is the best firebase vedio I've ever watched!
Thank you, 나나나! 🙂
Danke sehr für alles bruder, hasst sehr schön alles erklärt!!
You are welcome, Can Piet!
You are the best!!! Thank u very much
the best video about fireAuth
thank you so much
You’re most welcome, @eugeniakryzhanovska3056! 🙂
so helpful, i've search many tutorials and i got nothing, thanks for your explanation !
Glad it was helpful, @czerxjagody6996 😀
do the Flutter Firebase *Phone* Authentication the cleanest way, please 😕
Really, really great tutorial. Thanks a lot :D
Thank you, Andreas Hafsaas! 🙂
@@HeyFlutter i went to your source code, i cant access it but i already have sponsored, should i wait?
best tutorial regarding firebase auth...awesome
Glad to hear that, Thank you ThatPassaGuy! 😊
This is gold! Thanks a lot
Glad you liked it, @RV2MM 😀
Love the tutorial. Really helpful and just what I needed
Thank you, James Cockfield! 🙂
Thank you so much 🧡
Eres un capo, gracias brother.
Nice work bro. You helped me
Glad I could be of help, Thank you Victory Okoi! 😊
Thank you Johann
wow ! . fantastic ..my study is will be very long trip ..
Great, thank you, @user-zl8zm2re4p! 🙂👍
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?
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 🙂
thank you so much!
You are welcome, Nhân ghét!
Always best tutorial👍
Thank you, BBAMMJIN! 🙂
Great video. It would be great to see a tutorial on implementing Auth0 + Firebase in a login. 🙏
Thank you, Cristian Ledesma! 🙂
Thank you so much👍🏼
Please make a video about otp as well
You’re most welcome, Farid Ahmadov! 🙂
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'
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);
}
}
@@BerkPeksel thanks i was stuck for a while.
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
@@BerkPeksel this part was there in the code but not showing in the video
great tutorial thank you
You are welcome, Uraz!
This is True Gem 👍👍
Thank you, Sakib Shaikh! 🙂
Outstanding
very well explained
You are welcome, zorab00!
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
Thank you, S-Wind! 🙂. For iOS you need to make a little bit changes.
amaizing!
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?
@@HeyFlutter thank u so much
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?
Hey, wafaa sisalem 🙂 Here is the priority order for you
1.) Phone Auth
2.) Email Auth
3.) Social Auth
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.
Glad I could be of help, Thank you so much M Mathems! 😊
Perfect tutorial.
Thanks, @haxara! 🙂
You're a Rockstar!
Glad to hear that, Thank you Andrew Mukelabai! 😊
Now that's really the clean way
Thank you, @vivekbhakhri735! 🙂
Cool video! Can u please do this with bloc. Where you will use google auth and phone maybe or email
Thanks anyway!
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.
Thank You Goat Solutions! Follow this link: firebase.flutter.dev/docs/auth/usage/
I hope you will get your answer 🙂
@@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);
}
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.
Thanks for the idea, Sanjukta Ghatak! 🙂 I have added it to my list of ideas for future videos!
@@HeyFlutter Great, please share soon 😊waiting for it eagerly..
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
Hey, Saabir Mohamed 🙂 Yes you can continue from shared timestamp
Please can you also make a video on local storage ?
Thanks in advance 🙏🙏🙏🙏🙏
Thank you always for your videos. Can you please help us how to create screen as same like Flipcart filter screen.
@@HeyFlutter Thanks.. I am awaiting for this video.. 🙏
hey can u please do
fetching json data with navigation to different pages with the respective I'd please
Good Video
Thank you, David! 🙂
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."
Great tutorial. When you click the sign in button there is a little delay. Can you add a progress indicator to cover it?
Thanks for the idea Kulith Najika 😀, i have added it in my list of future videos
I started watching this video on early morning and this is end at 10:30 pm at night 😅
Great, Thank You sindha vipendrasinh
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
Thanks for your contribution Flutter With Ali
Can you tell me how to set a password in phone number authentication?
Perfection thank you !
is all of this free from firebase or are there any costs ?
Thank you, Ali! 🙂. Yes it is.
Thank you for the video!
the line 77 at 6:35 is never shown, could you tell me what it is please?
Hey, Svit Spindler 🙂 please check at 06:33
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?
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 🙂
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
navigatorKey.currentState!.popUntil((route) => route.isFirst);
@@atn3855 HEYYYY, thank you so much bro ✌️ u solve my error.. God Bless you!!
Please share your source code. I need it now. It'll be very helpful. Thanks
abt watching but i see the comments and know you making the streets happy,😂
Thank you, Tochukwu Ukpabi! 🙂
Please I want you to make a video that has to deal with flutter an api backend http post, get and other
Hey Sir! Why don't you make a video on how to make 2 FPS Gif with multiple images in Flutter?
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!
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 🙂
@@HeyFlutter 12:24 i can´t read the entire line (by the way, it´s awesome that you still replaying messages)
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
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 🙂
There are different users but each user should see his own data: How to define roles to solve any issue
Thanks for the tutorial! Would it be possible to make a tutorial for Flutter Firebase JWT authentication, please?
Thanks for the idea, @danasugu1767! 🙂 I have added it to my list of ideas for future videos!
@@HeyFlutterThanks a lot!
Can you make a video using auto_route for navigation/routing and implement an Auth Guard..?
Thanks for the idea, Agustin! 🙂 I have added it to my list of ideas for future videos!
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.
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
Thanks for the idea, Rubi Kandil! 🙂 I have added it to my list of ideas for future videos!
Please make video on Facebook authentication using firebase
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🙏
Thank you, 1000 SUSCRIBERS BEFORE DECEMBER🙏! 🙂. Try to paste the error message with your question whenever you face any issue or error.
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:
static final messengerKey = GlobalKey();
Thank you, Aditya Pandey! 🙂 for helping him.
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
Thanks for the idea, Sally! 🙂 I have added it to my list of ideas for future videos!
It sais, cant use static with final messageKey, any solutions?
Consider writting a book man!🔥
Thank you, frank mwale! 🙂
How to generate auto increment user Id while registering a new user in flutter?
I am getting an error while (await Firebase.initializeApp();) showing this error message "FirebaseOptions cannot be null when creating the default app."
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
Thank you, @vak-anton! 🙂
plz, make a video on firestore.
21:01 line 88
I was trying the Email Verification Function but I cant see the whole line. Pls Help...
Thanks, also ArturBd! 🙂 please check at 20:53
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.
If I made the application, could multiple users log in at once and communicate, or could only one user use it? (The other user will be automatically logged out if someone logs in)
Thank you, ben hmida Saif! 🙂. Multiple user can log in.
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?
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
@@HeyFlutter Great point, thnx!
Bonjour Monsieur, excellent tuto. exactement ce dont j'ai besoins, mais je n'arrive pas à télécharger le code source.
Thank you, Gustave Gustave! 🙂
Can anyone tell ne how to also add logic for landing page.
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,
Thank you, @user-kn2dj9ye8g! 🙂. Please try to provide enough details with your question
Thank for the tutotial, been trying to make an app. However I have been running into issues.
Unhandled Exception: PlatformException(channel-error, Unable to establish connection on channel., null, null)
This was the error I encounter when I ran the app to test. Due to await Firebase.initializeApp();
Is there any way for me to fix this? Because I have been searching for fixes, but I cants eem to use the flutter command on the terminal to update the dependancies?
Don't worry Calvin Hermawan, make sure to follow the tutorial step by step 🙂
@@HeyFlutter would it be an issue on my dependencies on pubspec? I checked the pub dev for the latest version, yet it feels like I am running into a brick wall. I tried checking other tutorials step by step but end up running into the same issue.
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
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: th-cam.com/video/w3krSTSGmaw/w-d-xo.html
@@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?
having an error in the stream builder part 4:17 Err: Type future is not a subtype of type Function?
Thank you habeeb makusota, make sure to follow the tutorial step by step 🙂
12:24 i can´t read the entire line (by the way, it´s awesome that you still replaying messages)
Hey, Miguel Bolaños 🙂 Please check video at 12:08 you can see whole line
Hi Johannes,
can you please make a video on
Flutter Firebase Authentication using Username and Password
Thanks for the idea, GAME TIMER MSM! 🙂 I have added it to my list of ideas for future videos!
@@HeyFlutter And please added
how to setup cloud firebase to store username?
@@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
@@kikokal5810 Thanks