Flutter Firebase Authentication Tutorial - Firebase Auth using email and password 2023
ฝัง
- เผยแพร่เมื่อ 8 ก.ค. 2024
- In this flutter tutorial, we will learn flutter firebase authentication using email and password.
COMPLETE PLAYLIST: • Flutter Login App - UI...
We will use GETX State Management to keep the code clean and use the cleanest way to perform firebase authentication.
We will learn to Create user with email and password, Sign In user with email and password, logout the user, keep the firebase user logged in even app close, keep the separation of concern with a separate Authentication repository controller and Signup, login controller with the backend logic.
LOGIN APP PLAYLISTS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► COMPLETE PLAYLIST: • Flutter Login App - UI...
► FIREBASE PLAYLIST: • Flutter Firebase Basic...
DOWNLOAD PROJECT
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► CODE & RESOURCES: codingwitht.com/flutter-login...
VIDEOS
▬▬▬▬▬▬▬▬▬▬ DESIGN ▬▬▬▬▬▬▬▬▬▬
► 01 - Flutter Folder Structure • Flutter App with Fireb...
► 02 - Flutter Folder Structure • How to Create a Flutte...
► 03 - Setup Theme Light & Dark: • How to Setup a Custom ...
► 04 - Flutter Native Splash • How to create Flutter ...
► 05 - Custom Splash with Animation • Flutter Splash Screen ...
► 06 - On Boarding Screen • Flutter Onboarding Scr...
► 07 - Welcome Screen Design • Welcome Screen | Flutt...
► 08 - Animate any widget • Flutter Animation 2023...
► 09 - Flutter Login UI • Flutter Animation 2023...
► 10 - Flutter Signup UI • Modern Signup form in ...
► 11 - Flutter Forget Screen • Flutter Forget Passwor...
► 12 - Flutter OTP Design • Flutter OTP Verificati...
► 13 - Flutter Dashboard • Flutter UI Design Tuto...
▬▬▬▬▬▬▬▬▬▬ FIREBASE ▬▬▬▬▬▬▬▬▬▬
► 14 - Setup Firebase in Flutter • Simplest way to Setup ...
► 15 - Firebase Authentication • Flutter Firebase Authe...
► 16 - Firebase Phone No Auth • Flutter Firebase Phone...
► 17 - Flutter Profile UI • Flutter Profile Page U...
► 18 - Store Data in Firestore • How to store data in F...
► 19 - Verify Email in Flutter • Verify Email in Fireba...
COURSES
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► FLUTTER CRASH COURSE • Flutter Crash Course f...
► LOGIN APP with GETX • Flutter Login App - UI...
► E-COMMERCE APP • Professional Flutter E...
CHAPTERS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
00:00 Firebase Auth example and Overview
03:06 Enable Email and password in Firebase Console
04:05 Setup Firebase auth in Flutter
05:27 Add Logic to get user data
08:41 Firebase Authentication Repository Signup, Login and Logout
15:44 Firebase Auth Exceptions
19:40 Test the Code
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
FOLLOW US ON SOCIAL MEDIA!
💻 Facebook: / codingwithtea
💻 Instagram: / coding_with_tea
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
SUPPORT
To support the creation of a free content please visit:
► Subscribe th-cam.com/users/Codingwithtea...
►► Support codingwitht.com/support-the-c...
#flutterapp #flutterfirebase #firebaseauth #codingwithTea - วิทยาศาสตร์และเทคโนโลยี
![Flutter Firebase Authentication Email and Password [Part 1] full Tutorial with etech](/img/n.gif)
Hi sir, first of all thank you very much for this videos , i have question i have test in on real device but there is problem in signup form screen when i pressed on the field the keyboard just show and disappear in less than one second .. can i know why ?
Great video. Can you also make a tutorial for the Login logic? Your code that I purchased has a lot of things that have not been covered in this tutorial yet and is a bit confusing so will be great if you could explain in a similar fashion as you did for the Sign Up logic. Thanks!
Hi, Sir. The code of userChanges() in video 12:41, it shows "The method 'userChanges' isn't defined for the type 'FirebaseAuth'." for my project. I have upgrade my firebase_auth version but it still the same. May I know any solution for this? and really appreciate for your videos, they help me a lot in my studies.
Hello Sir, when I click on a text input field in my app's signup form, the keyboard keeps disappearing repeatedly.
I'm folowing this series from the start. Sir where is the code block for loginUserWithEmailAndPassword? If you already create a video on it, please mention
Bro. I have ListTile icon in the Drawer header. I want to perform logout by clicking on ListTile Logout icon. How to do this. I tried but not logout.
I wanted to take a moment to express my appreciation for your great videos. They have been a valuable resource in my studies. However, I do have a small complaint. I have spent a lot of time going through your playlist, and now I am eagerly waiting for the video on login authentication. Unfortunately, my project evaluation is starting next week, and I am running short on time.
I kindly request that you consider creating a video on login authentication before this Saturday or Sunday.
Hi Ali Haider, thank you so much 🥰. I will create login authentication video soon but you can also send me a message at +923178059528 for quick fix 😆
@@CodingwithT You're welcome! and I'm on way to disturbing you on WhatsApp hahaha😂
Hello everyone, Most of the people asked for LoginScreen Code as it's already added in the codingwitht.com and link was given in the description. You can also follow this link.
codingwitht.com/flutter-firebase-authentication-tutorial-2022-using-getx/
sir pls help in this why splash screen is not showing i am getting this error
Great Series , please make admin panel as well
Thank you. I'll make it
hello how can I create a Flutter app with a login interface that allows the user to choose between admin or client login
Simply create a field in the firebase and name it roles, based on that when the user is authenticated, check its role from the database and redirect accordingly.
You are CodeStar big brother..🎉🎉
Thank you 😊
followed your last video step by step. I did the same for this video. however when initialized the app at 5:00 I did not have a src folder in my lib. what am I doing wrong????????
If you watch my first tutorials of this course in which I thought about folder structure, then you'll know that src is just a folder nothing else.
If you don't have that. Don't worry.
he use flutter_native_splash for the first loaded screen before everything in authcontroller fine
where do you create the getxcontroller class and the get method for get.find etc.. Sory if I have missed some points hehe
Same problem here... Hope u will answer bro
in terminal > flutter pub add get
Hi, thank you so much for the very detailed code, but when I want to log in or log in to the program, I get such an error in the console. The code is the same as in the video [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled exception: You are trying to use context-free navigation without . I will be grateful for your help.
firebaseUser.value != null ? Get.offAll(() => const profile()) : Get.to(() => const MyApp());
You welcome 🤗.
Have you changed MaterialApp to GetMaterialApp
You Need to Add GetMaterialApp In Your Main.dart file for GetX .
hey, in 21:43 min - I follow code with you but in my app signOut() does not working, only after hot reload user logouts..
Make sure to check if authentication listener is working and also if you're not using that then manually redirect to Login screen in logout()
Thanks!
Thank you Buddy Wasif for your love and support 💕.
great video. it signup the user successfully but where is the functionality of login screen? how can we send email verification mail
Email verification is actually a Complete new tutorial, IA i will cover it soon.
Whereas you can Login by calling the login function from the auth repository on the login button onPressed
how do i handle this error 'Unhandled Exception: Instance of 'SignUpWithEmailAndPasswordFailure'
Try to run it in debug mode. There is an uncaught exception inside your Email and password failure.
@@CodingwithT thanks I did but now I'm getting "W/System ( 9315): Ignoring header X-Firebase-Locale because its value was null." assistance will be highly appreciated..
why I am redirecting to the dashboard without entering the signup details email and password.
Send me code at support@codingwitht.com
Same issues here
@@skydoesblue4854 try implementing the logout functionality. It is just because the user is already logged in to your app so the app redirects the user to its dashboard. So when you will logout the user. it will work fine.
I have a question. Can Getx be used for a larger application?
Yes easily
Hi Sir, thank you so much for your videos. But I am facing the error E/flutter (12573): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Instance of 'signUpEmailAndPasswordFailure'.I have changed the Material App to GetMaterialApp but app is not switching from signup screen to dashboard screen and the problem is same.I will be very thankful for your help.E/flutter (12573): #0 AuthenticationRepository.createUserWithEmailAndPassword (package:flutter_login/src/repository/authentication_repository/authentication_repository.dart:39:4)
.This is also alongwith problem.
Sir I sort out the issue by replacing "firebaseUser.value!=null ? Get.offAll(()=>dashboard()): Get.to(()=>welcomeScreen());" with "Get.offAll(()=>dashboard()):". May be firebase user value creating problem with "null".
can you answer my question ? im having an error with LateInitializationError: Field 'firebaseUserl has not been initialized... why this happened? i already follow ur code
Please check if it's late or ? Nullable as both have different approaches.
Also it should be initialized in onReady if the error is in Authentication Repository
@@CodingwithT im using late final as in the video. there is no error code but error on the profile page at the phone
I'm currently experiencing this by the way. How did you fix it? @ikekun
@@favouradeshina4354 i give up bro, i recommend you to find another way
Wa alaykoum essalam.
geat video thanks a lot.
please make video about Sqlite.
Thank you 😊 and I will
Workaround for login page logic is to add these lines of code to login_form_widget.dart that was made in previous tutorial that Tea posted.
1. add controllers into LoginForm widget:
@override
Widget build(BuildContext context) {
final controller = Get.put(SignupController());
[...]
//EMAIL FIELD
TextFormField(
controller: controller.email,
[...]
//PASSWORD FIELD
TextFormField(
controller: controller.password,
[...]
2. Add OnPressed Login Button logic:
onPressed: () {
FirebaseAuth.instance.signInWithEmailAndPassword(
email: controller.email.text.trim(),
password: controller.password.text.trim()
);
How to show users that info they inputted is not correct is another problem I'm facing now.
add this in your textformfield widget :
validator: (value) {
if (value == null || value.isEmpty) {
return " enter the thing. Idiot!!!";
} else
null;
}
then put your onpressed function in this:
if (_formkey.currentState!.validate()) {
}
so yours will be like:
onPressed: () {
if (_formkey.currentState!.validate()) {
FirebaseAuth.instance.signInWithEmailAndPassword(
email: controller.email.text.trim(),
password: controller.password.text.trim();
}
}
ps: _formkey is private hence the underscore
@@mrman4636 thank you! Only problem is that it only checks if the input field is empty. My problem is comparing data that is input by user with firebase data.
Say I am I user and I put in wrong password with one letter/number/symbol missing. The validation above would not show anything to me. Right?
Most of the people asked for LoginScreen Code as it's already added in the codingwitht.com and link is given in the description of the video but now you can get it from right below...
codingwitht.com/flutter-firebase-authentication-tutorial-2022-using-getx/
Which code is helping the app remember the login state on relaunching ?
In the authentication repository look for onReady() function and call that in main.dart
Super videos.
Thank you 😊
SIRRRR!!!! where did that loginwithwithemailandpassword come from .... explain plzzz , it is giving error .... i dont have that code
Sorry for the inconvenience. Please watch the current ongoing e-commerce playlist and see the updated videos.
That'll be helpful 😃
how to make signin man??
Most of the people asked for LoginScreen Code as it's already added in the codingwitht.com and link is given in the description of the video but now you can get it from right below...
codingwitht.com/flutter-firebase-authentication-tutorial-2022-using-getx/
great video bro. bro how can we upload image with userAuthontication
That's easy dear. You have to store images and videos in Firebase Storage
How about login sir? What should we put in login button to make login?
Once the account email and password has been successfully registered (authenticated) you can use the same email and password to login .
@@CodingwithT //LOGIN BUTTON
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: Text(tLogin.toUpperCase())),
)
I mean, what code should we put in this sir, I look for another videos on TH-cam and I can't understand most of them. I understand your video but I lack of info about login. Thanks
@@CodingwithT I encounter same problem sir. What we will put into login form to recognize the credentials from the sign in we created?
any solution to this , doesn’t work
same issue please help
where did that signupwithemailandpassword came from...just after loginwithwithemailandpassword....its giving errors plz explain
i am sorry i got it...i didnt imported the firebase_core Package
Sorry for the delay and glad it worked 😃
Eyvallah baba eyvallah
so what is the purpose of the package that we created before
First I thought to add things in the package but after realizing that people will easily get confused, therefore I decided to not use it 😭.🤓
@@CodingwithT that would be better if you used modularizing is something important so I wish I can see that on this course but I will try by myself with other resources thanks a lot for this great course
I will do that soon
can you please provide the login controller code
Most of the people asked for LoginScreen Code as it's already added in the codingwitht.com and link is given in the description of the video but now you can get it from right below...
codingwitht.com/flutter-firebase-authentication-tutorial-2022-using-getx/
Whenever I try to enter text into a TextFormField, the keyboard pops up for a second and hides away instantly.
Please help🙏
Is your issue resolved? Sorry for the late reply 😃
Its ok🤗..but no my issue is not yet resolved..
same issue please help
You can make the GlobalKey variable static and initialize in init
@@CodingwithT working thanks😁
if anyone confuse how to login then come into my comment i will share the code Thanks
Thank you Faizan for help.
Most of the people asked for LoginScreen Code as it's already added in the codingwitht.com and link is given in the description of the video but now you can get it from right below...
codingwitht.com/flutter-firebase-authentication-tutorial-2022-using-getx/
share please
Plz ,I need login backend :/
You will see the login back-end tutorial in this ongoing e-commerce app playlist.
Login video will be uploaded this week.
Hallo sir, I got error message like shown:
The following message was thrown while handling a gesture:
"AuthenticationRepository" not found. You need to call "Get.put(AuthenticationRepository())" or "Get.lazyPut(()=>AuthenticationRepository())",
how to solve it, thanks and regards
As it says, you just have to use the final controller= Get.put(AuthenticationRepository())
It means that you first have to create the instance of any class using Get.put and in the rest of the Classes later on you can use an instance.
@@CodingwithT Where would we be putting this code? Thank you so much for all your help!
i am getting the same error but i still cant figure it out. it would be very helpful if u could explain how to solve this issue in detail@@CodingwithT
help@@CodingwithT
Please include signin_email_password_failure.dart
options: DefaultFirebaseOptions.currentPlatform
This line is showing error
Check if the dependency added and also tro to Run Pub clean and Pub get