Flutter Web Firebase Authentication - Firebase Login user - Website Development Course for Beginners

so now we will write the code in order to implement the authentication in our admin web portal using the flutter dot programming language okay so for that purpose as you know that we have our login button okay when the admin click on this login button what we want to do we will simply call a method which you will implement now that is allow admin to login allow admin to login so now let's just implement this method okay copy this method name and here above the widget build we can simply implement it it will be a synchronous so you can say async and let's create an instance of user which is on the firebase or dot dot okay and let's give it name as a current user that is the admin okay the current user means the using the authentication we want to authenticate the admin so let's say let's say we can give this instance any name we want okay so we will give it the proper name which is current admin and then we can wet and we can basically authenticate the admin that is we have to check in the authentication that is the email and password provided in the text field whether these email and password exist in the database or not okay so we can say file base or dot instance dot sign in with email and password and as you know it required two parameters one is the email second one is the password so let's just break this code in pieces so that we can see it easily okay so email is basically in our email admin email and the password is in the admin password okay and then after it we can say dot then let's give it name as f auth we will assign the effort user to the current admin and in case if any error occur for that we can use dot catch error make sure to add one more time parenthesis okay on error and then we can add curly braces so if any error occur we will simply display error message so we can do that using snag bar so we can say final let's give it name as snack bar equals to snack bar content will be the text which we will display using the text widget and we will say that error occurred okay and then using the concatenation sign plus we will display that error message as well on error dot to string let's add some text style so the text style for this will be font size okay the font size will be 36 will be good and then make sure to add a cost modifier here the background color you can also add for the snag bar okay so after the content you can simply say background color and the color for this will be colors dot let's go with the pink accent okay or you can add your own color as well that is which color you like okay so anyways this is the background color for our snag bar okay and for the text you can of course that is for displaying the error message that is this text color which color you want for it so of course you can do that by simply typing here color and we will go with the black color then the durations that is for how much seconds we want to display this snag bar so after the background color you can simply type here duration and we want to display this for let's say five seconds will be enough we can add the cost modifier here and in order to display this snack bar we have to simply right here that is scaffold messenger dot off context dot show snake bar and here we have to pass over this snag bar so this is for displaying the error message okay in our i mean with the help of snack bar we are displaying the error message now the same uh that is at the start okay before executing this piece of code which i will explain okay don't worry what it means let's copy this whole snake bar code okay and here at the top we can just tell the admin okay after clicking the login button that is remove this on error dot to string and this concordination sign plus here we will say that loading or you can sell checking credentials please that okay and for how much time you want to display for four second will be good four or five seconds or i mean six will be good i mean it is totally up to you whatever guys that is for how much time you want to display this snack bar okay make sure to remove this cost from here as well as this const and also remove the final keyword from it and we can simply say snack bar okay just like this so this one is for displaying that is checking credentials please vat so what we have done so far okay first of all as you know that when the admin click on the login button and the admin click on the login button we are simply calling that method which is allow admin to login okay and then here we at the start display for six seconds the stack bar that is checking credentials please wait okay and basically with the help of firebase auth we in the firebase authentication we are checking that is the email and password provided in the text field by the admin if that email and password okay if that email and password if that are correct and if that exists in the authentication for example let's say this one okay so if that exists then get the this user okay this user data that is their email their user id from the authentication okay and we get that in case of successful okay we get that and we assign it to our current admin okay this is the successful statement in case of success okay otherwise if any error occur that is catch error so if any error occur you can say here that is in case of error so in case of error that is of any error record we simply display that error message to the admin for five second using the snag bar widget in flutter so now after that what we want we also want to check that the user let's say in case of successful success okay that is let's say the admin or the user who has i mean who's uh who is authenticated successfully okay using the firebase authentication okay let's say if the email provided and password is correct then we have to check that is if the record for that specific admin also exists in the file store database okay if that exists only in that case we will allow the admin to use the web portal otherwise we will not allow the admin to use the web portal so how we can do that let's just do that here okay so first of all here we can minimize the code okay outside the cache error okay here outside we can add a condition first that is if current admin not equals to null which simply means that if the admin is authenticated successfully using the firebase authentication that is if your email and password match with the firebase authentication then after it we want to check further that is check if that admin record first we will make a query to the firestore admins collection okay so we can say firebase file store dot instance dot collection and collection admins which is this one okay and then after that means that specific admin so you can say dot document okay and here we have to pass the current admin who is trying to login currentadmin dot uid okay that current admin who is trying to login we will get that specific admin record from the admins collection in the firestore database and then we can add a condition that is first of all we say dot 10 and let's give this name as snap so we will say that if snap dot exist so if that admin exists if that specific admin record exists in the admins collection it simply means that we have to allow that specific admin to use the web portal so we will simply send that send the admin to the page which is the home page using the material page route and our page name which is home screen okay so we can say home screen okay in cash if that specific admin record exists in the admins collection in the firestore database okay this if condition will be executed else if no record exists if no record exists then of course in that case we have to display a message that is hey no record exist okay and for that purpose just copy this snag bar okay and we will simply paste it inside the else statement and we will change this that is no record found no record found and you can further add message that is you are not an admin okay so let me quickly give you an overview of the code first of all what we have did when the admin click on the login button we call this method okay and we tell the admin to please what we are checking the credential using the snack bar widgets and then after it with it within the authentication okay for our best authentication we are checking if that email and password of the admin if that has been provided correct okay and if that exists in the authentication then simply get that admin and assign it to the current admin and if any error occur then simply display error message and then after it if the admin is successfully authenticated okay if the admin is successfully authenticated which simply means if the current admin is not equals to null that is if the current admin is online okay authenticated using the firebase authentication successfully then after it we have to check that is if that specific admin okay if that specific admin record exist inside the admins collection in the firestore database so if that exists if that record exists in the firestore database then simply allow the admin to go to the home screen and use the admin web portal otherwise display a message that is no record for found you are not an admin so now let's just test the app open up the terminal and simply paste the command for testing the application on the web browser and our app is running now but it is just displaying this white screen which simply means we have got an error in order to check you have to right click here okay in your browser and then quickly simply click on the inspect and in the inspect you have to click on console where you will see this that is uncaught syntax error identifier initialize app has already been declared and so on okay here you can see option not equals to null i mean we will get these two errors so let's just fix that so for that purpose go to the web index.html and in here above this script type module okay here we can simply say script and then inside the starting script we have to write simply src equals to and then double quotes now inside this double quotes we have to paste this firebase fjs okay this one just select and cut this and paste it here okay and change this to at 10 zero and remove these three imports which is for the auth firestore and this one okay just remove this so then we have to copy past it two times in order to use the auth and the fire store and of course we have to copy past it one more time for using i mean for writing the script for firebase analytics so we can say firebase and analytics and then after it we have our firebase config so we can say that firebase dot initializer and also we can say firebase dot analytics and one more thing is here we have to add a script first we have to define the source which is our main dot dot dot js vendor dot dot js and after this we can define the type which will be application slash javascript application slash javascript and make sure to remove this type from this here again type module we do not need that so now let's just test the app to see if it is working or not so here we go our app is working now successfully now first of all i am trying to login i mean right here the seller email and password okay for example if i show you then let's try to login using italian okay which is a seller and not admin so we can say italian address gmail.com okay and then of course the password so if you click on login it says checking credentials please vote no record found you are not an admin because this is a seller this is not an admin even if you give it any email that is let's say an email who's even do not exist in the authentication okay so checking credential please that and let's see what we get as a result for a dummy okay error occurred there is no record corresponding to this identifier okay so in short you have to provide the exact email and password for the admin whose record exists in the admins collection in the firestore database okay for example i'm now going to login using parker who is admin okay so i will simply write here parker parker gmail.com and then of course the password then click login checking credential please vote we got an error for this email because it is not parker at gmail.com i mean we are not authenticating successfully from the authentication because it is parker at the redfoodapp.com okay so by mistake we forgot to use this i mean serve the same email for the parker admin let's just change that quickly because we are getting no response from the authentication which simply means i mean we are getting the response but it's saying that is no record exist related to parker at gmail.com okay so let's just change this to parker at great food app.com okay by mistake i write gmail or it is foodapp.com okay so anyways now let me just write here the correct foodapp.com okay and if i log in checking credential please wait so here we go we are successfully logged in to the app now let's try to check using the second admin which is admin one at the dot foodab.com let me confirm the record in the firestore database as well admin one at the redfoolab.com okay so now i'm going to write here admin one at the red foodapp.com okay and i'm going to now put a wrong password just to see i mean what we get as a result if we have wrong password checking credentials please vat and error record the password is invalid or the user does not have a password so we must provide the correct password and by the way let's change the background color of our snag bar widget okay inside the authentication login screen let's use the xi'an color which will looks good according to the user interface okay so also here we will change this to cn and then here as well okay now let's restart our app so our app is running now and now let's provide the correct email and password foodapp.com and then the correct password and login so checking credential please wait so here we go we are logged in successfully to the admin web portal after providing the correct admin email and correct admin password so let me tell you one more time if that record exists that is if the authentication is successful that is if the same email and password exist in the firebase authentication okay if that exists in the authentication after that it will check also the record that is if the record exists in the fire store database then only then we will be allowed to go to the home screen and use the admin web portal that is the admin will be allowed to use the admin web portal

Channel: Muhammad Ali's Coding Cafe

Views: 4,265

Keywords: firebase hosting website, flutter web firebase hosting, flutter widgets, flutter firebase realtime database, flutter firebase crud, firestore flutter, firebase web login, firebase web push notification, firebase web authentication, flutter web, flutter web development, flutter web app, flutter webview, flutter website, flutter web firebase, flutter web tutorial, flutter web app tutorial, flutter website tutorial, web development full course, web, app, web app, web flutter app

Id: lKIDaT85bCo

Length: 24min 15sec (1455 seconds)

Published: Wed Mar 02 2022