Firebase Authentication with Flutter | SignIn and SignUp with Firebase | Flutter and Firebase Auth

hello everyone welcome to my channel and in this video we are going to create a flutter firebase sign in and sign up screen so as you can see this would be our end result so you'll be able to create something like this and you should be able to log in and you should be able to sign up so when we click on the sign up we will see the sign up screen so if you enter the username i'll enter her shivo and i'll enter an email id i will enter my email id at gmail.com and i can enter any password which i like i will enter welcome and then i'll sign up so on click of sign up uh i will be logged in and you can see this is my home screen this there's nothing on this home screen just a logout so when you log out you will come back to the login screen and you can log in again so i can enter the email id i just entered my account and then enter the password that is welcome and sign in and i should be able to sign in so this will be doing using firebase and it should be very simple to do it so let's let's first create this ui uh so what i have over here in this project this is the sample project so you can see uh the project which we are working on that is the base project what we get from flutter so we will convert this project to the project with uh for which i showed you the demo so let's let's get right into it so let me just delete the default project first of all so let me delete this because we don't want to create that kind of screen what we want is to create a sign in screen sign up screen and now uh home screen where we'll just have a logout option right so let me just create new folders first so i'll create a folder called screens and i'll keep all my ui screens in this folder so i will have sign in sign in screen dot dot and then i'll have a sign up screen sign up screen dot dot and then i'll have my last home screen homescreen so three of the screens will have in our application so the first screen which we need is the sign in screen so let's go here and write stful stateful widget and name it sign in screen [Music] and let's import our material okay now uh we need something if you if you remember we need a background background gradient so let's convert it to scaffold right and let's just first call this from our uh from our main page so that it appears so let us sign in screen okay so that issue is gone now in scaffold i don't i don't need an app bar this is the default one so let's leave it to that let's create a body and in the body i need a container and in the container i need a box decoration which is called decoration and then we call box decoration and we need gradient right so for gradient we need colors so uh i'll just say lean ingredient and i need colors so i already have the colors defined so you see these are the color to get those uh hex colors uh into colors we have to define we have to convert the hex color to the to our color which is accepted in flutter so we will create a color suitable so let's create a new folder and call it utils and then in this folders then create a new file and we'll name it colors color underscore utils dot dot right and then in this file i have created the uh code over here what it does it this is just a function which takes a strings string hex color and then convert it into the color which is accepted in the clutter so we will just call it so over here we need a list of colors so hex to string color and we'll pass our color string so actually i have all the colors defined over here so i'll just i'll just use it so let me just replace it with all the colors so that okay so now all these colors are here so if i run my application so let's let's just go back to our current application this one so okay so i have this type or this this type of color but if you see this starting and ending is not correct so let's let's give it a begin so begin will be alignment dot top center and end would be alignment dot bottom center so we will have our alignment okay so now we have the background ready now what we want is we need an logo on the top so for the logo we need to first have the image right so we have to get the image and declare it in our perspective so let's first create a folder and call it ss right and in essence we will create one more folder and we'll call it images and in this i will put my image so this is my image so let me just drag it and put it over here yeah and i should have access to it if only if i if i just uncomment this line and i'll say essex slash images and all the images in this folder would be available to me so let me just run our perspective uh flutter pub get and i should be able to access that so let me just write let me just fast forward the ui part of this sign-in screen so that i don't know you and then and then i'll explain you now if you see we have our image ready right so what we did is we created a single child scholarly scroll view and then in that there is some padding like i am creating it from top so of height i am just uh multiplying it with 0.2 and then that is how it's created like that is how i decide from top how much distance it would be and then there's some padding like 20 20 that's that's up to you and then i have created this logo widget so i created a method which returned me a widget right or not writing it over here so that our code looks much cleaner and instead of so let's say you want to create this logo let's say you want to have this logo in your home screen or somewhere else also right and maybe you can pass your width and height also in the function instead of instead of just the image so right now i'm just passing the image path and it returns me the image so instead of keeping it here i can i can create a new folder and say reusable widgets right and i will create a new file and i'll call it reusable widget dot dot right and in that i will have my oh no no no this let me just copy it image logo widget reusable widget and just copy it from there yeah so we have this reusable so that everywhere if i need it on my signup screen also i'll just call it from here right and then i can remove it from here and just import the uh reusable widget dot dot file in this file so that's what i'll do i'll create a reusable text field as well and then call it over here so that i won't have to go create it again for username and password and email id everything so for all our uh textbook will look same so for the same look and feel we will create a reusable text field so let me fast forward the reusable text field coding part okay so if you see we have our text field ready and what we did is we created a reusable text field over here why we did it because we know that we will be using similar kind of text view multiple times we'll be using it in the sign up screen and we are already using it in signing stream so just one reusable text field we have created and it's a very simple text field we have our text field we have controller set so that we would be able to access its text and whatever the changes we are doing in the text field we will be able to handle it with this controller we i'm just sending if it is if the text field is password type or not if it is password type then we will up score the text if it is not password type then we will enable the suggestion and we will do the auto connection as well if it is not password password type if it is password type then we'll just obscure the text right and then cursor color is white and we have some text styling uh you know the input decoration we have our prefix icon so this icon which you see over here this is through this prefix icon right and then we have our label text this label text styling right we have the border set to the circular radius right and we have our keyboard type so this is our text field right so this is a reusable textbook which we can which we have used in our signing screen for enter username and password as well and i have created the email text controller and over here it would be password text controller not email text controller this one right so we have two controllers two text editing controller one is for email and one is for password which we will be using later on when we are doing the sign in uh finally right so now we need a login and a signup button so the buttons will look exactly the same it just the text will change and the functionality will change so as you might have guessed we will do the same thing we will create our reusable buttons and then we will use it in the sign in screen and we'll be using those same buttons in the sign up screen so let's let's create our reusable button okay so our reusable sign in signup button is ready right so what we have done is we have this elevated button right elevated button we have just covered it or we have wrapped it inside a container so that we can give it some styling so this is our container with the height and width and then we have given it some circular radius and in the elevated button on tap on the on pressed we are calling this on tab function this is a callback function when we will be using this function we will use it in our sign in and sign up screen right and then if is login so we have passed this is login context and function on tab right so on tab goes on on pressed ah context is being used over here to get the size and this login is used to get whether it is a sign-in button like login button or sign up button right and then we have this text styling for the sign in and sign up and then button style button style means we have uh some background color so background color we have white and when when we click on it when we press it the black background color would be black 26 right 26 is like the shade of that black color and then we have shape it would be of rounded circular 30 uh shape of this button okay so now we can call it from our sign in screen right so in sign screen after this rectangular text field uh the reusable text field i can again call one size box of 20 because i want to have some distance and then i can call my sign in sign up button context uh would be context is login would be true because this is for login not for logout and then on tap i will just create a function which it is asking for me to do so this function will basically we will use it to do our actual login so on click of login we will make our firebase api call and once it is successful we will log login right now after this i had the sign up option uh as well so the sign up option that is not very usable so we can create it over here so what i'll do i'll create a function um to return me a row so we will have something like don't have account question mark and then we'll have a uh you know sign up clickable sign up text so let's let's create a room let's create a row sign up option let me just fast forward this now we have we don't we haven't created our sign up screen yet so that's why it's giving us error so if you see the i just created a row uh with with two text one will say don't have account question mark and then assign a text and on the sign up text when you click it it will open a signup screen so let me just create this sign up screen so save screen and let's call it from here and there you have it right so let's just give some space so that it looks fine okay okay and now when we click on it it will go to the signup screen which which we haven't designed it properly so let's design the signup screen so our sign up screen is also ready so as you can see all we did is we just copy pasted our background screen uh linear gradient whatever we had written in the sign in screen i just copy pasted from here this complete portion and used it again over here and in a single scroll single child scroll view i have my column again and i have all used all my reusable widgets like reusable text field for username email id password and then reusable sign in and sign up button right so when i click on the sign up button it doesn't sign me up anything it just takes me to the home screen which is nothing in the home screen what i did is i just created in the center of the home screen i just created an elevated button which is a logout button and on click of this logo button ah i i just push it to sign in screen so it will go back to our sign in screen even in sign screen when i click on the login uh i have added this logic uh i've just added this navigator push to push me to the logout screen so everything is working as uh expected but we need to include our firebase in it right so what we have to do is first create a firebase project so you have to jump into firebase console console.firebase.google.com create a new project i will say sign in example right and continue uh all these things you want to enable you want to enable analytics analytics as well for your project because it is recommended and you might want to need it you will might need it later on in your project so it is really good right select your default account for firebase or whatever is coming in your drop down just select that and create your project so this will create a firebase project for you uh which you can you know use it in your client application so you will be uh you will be implementing you will be uh doing some steps to connect this firebase applications with your client uh mobile application so we will do it in some time let it create first okay so the project is ready i can click on continue and it will take me to the project console so as you can see i have multiple services i have authentication file store database real-time database all these services are available for you once you create your application in firebase so firebase is really cool and every developer should know about should know how to you know work with firebase so we can create our project for ios apple and web application and even for unity so we will be focusing on android for this project right so we have to enter our android package name so if you go here in your in your folder over here in android in the apps in the src in the main you have android manifest.xml in this you will get your package name so just copy it paste it over here these are optional so we don't need it but we need sha1 so let's just give it an uh name also so i will just name it firebase sign in example right this is optional so you can leave it but this sha one if you see over here required for dynamic links google sign in or phone number authentication in auth right so it is only needed for dynamic dynamic links google sign-in and phone number support uh authentication so yeah i mean for this one we can leave it but i wanted to show you how to create it so what you need to do is just click on this and see see this page see this page go over here and then it will show you for macbook you have to press enter this command and for windows you have to enter this command and it will give you the sha one uh key so all you have to do is select this go to your terminal so where is my terminal let me just bring it up okay and go to your terminal and just paste it over here and click enter and it will give it will ask me the password so if you see here it says the password is default it is android so for anything you just have to enter android if i enter the password it will give me the sha1 key so just copy this from here uh like we're not able to copy okay this much we have we need just this much and paste it over here so this is our ssh1 so you will need it if you need for dynamic links google sign in and phone number authentication but yeah we have i just wanted to show you how to do it register your app and it will give you a download config file you have to download it and keep it in your project okay so you have we have this download link so you can click on it it will download the google services.json file look it here so what you have to do in in android application in apps folder you have to keep it so close these this is my apps folder in android so make sure you are saying you have this apps folder just drag this file and put it in this apps folder as you can see it just says number five we don't want this number five so just rename it and we have our google services file over here click on next and you you will see some settings that we need to do in our build grader so this is like project level building trading so you have to go to project level builder so just close the app and you will see this build grading so in this you have to check if google is there or not in the repository so google is there no need to do anything and like that uh even at bottom google repository or repository google is there no need to do anything but in dependencies it says add this line so just copy this line by selecting this and in dependencies just go to next line and paste it so this is needed make sure you add it now it says in the app level build video so the we are at the project level build gradient now if you click on this app folder you will see a app level build grader right you have to have to make sure all these lines are there so apply plug in this must be there for already so you see com.android application it is already there this line might not be there so let's just copy it and paste it after this line and then in dependencies we have to copy this line implementation platform so let's go to dependencies and add this line take this thing as well and at this time so this say with this our google uh android service complete what the setup does is just connect your application to this firebase service we have this is a cloud service which we are getting for free which is really cool right also you have to make sure that your uh your version is set to minimum sdk version is set to 16 which is very low and five ways does not support to that level so just make sure that you just upgrade this as well so just do it 22 and this should do so what you have to do now is you have to go to your main. main dot dot and close every other file those others and yeah one more thing is we have to include firebase into prospect by ml so any outside dependency we have to add those dependencies over here as well so in the dependencies we have to add uh our external dependencies so how do you do it so we have pub dot dev go here save firebase base code and it will give you this just copy it from here and paste it and then we have something called firebase auth so both these dependencies will need and keep in order to get our email authentication working as soon as we do it our flooded publicate will start running and we will get these dependencies added also you want to add authentication right you want to sign in so you have to go to authentication tab in firebase and click on this get started and it will show you how many ways of authentication you can do you can do with email password google facebook play game so many option it gives what we are going to do in this application is use email password i'll be creating more videos for these additional providers as well uh but for this video let's go ahead with email password click on this enable this email password service and click on save with this uh you will see in the enable services you have email password is enabled so now you can use the service in your application right so just to test it um you can run your application and there should not be any error and let me just in uh initialize firebase uh before we do it so what we do is to initialize firebase before initializing we will say widget flutter binding dot insured initialize this will make sure that firebase is initialized before we run our application and we will say firebase firebase dot initializer okay and we this is a asynchronous star so we have to say s sync and we'll have to say await okay and this will make sure that our firebase is initialized before we run our application so just close the application and run it again so that all just to make sure that all our settings are working properly or not this might take some time okay so our app is running as you can see there's no error and it means our firebase initialization was proper so now what we need to do is we need to go to the signup screen and on click of the sign up button we won't just go to the navigator we we won't just go to the home screen we will make sure the user is signed up signed up and then we go to the home screen so for that we have firebase our firebase auth dot instance dot create user with email and password so this is what we will do and in this we have our email controller [Music] email text controller visit okay email text controller.text i'm not doing any validation over here so you can do it from your site that would be glass for you because we are focusing on the firebase authentication part like text so we will pass our email id and text to this function and this function will create our uh you know authentication with firebase like it will create these function in our firebase console right so once it is once the username and email id is sent to the firebase authentication it will create the account for you and then we will call this then and in this we can say if the username and account is created then we can navigate to our home screen don't go directly we will navigate it only when our username and account is created uh what is the problem oh there is an extra curly braces just remove that and yeah this should work i want to i want to show you that there is one more function which we can call that is uh dot on error so you can handle your error case scenario as well over here right now what will i do i'll just print it i'll just print it over here so i'll say if there is error just show me in the console what is the error so i'll say dollar where is the dollar and error dot q string so this will show me the error in the console so this is it uh i should be able to see i should be able to sign up and see it in my uh in my firebase console right so let me say hershey go and then email id would be first your edu at gmail gmail.com and then password would be welcome uh i wanna do one more thing that when user locks in successfully then also i want to print so that it's so that we have some block so we'll say created new account and when we click on sign up okay so you can see we have this success method created new account over here and once the account is created we have moved to our home screen so on log out on logo i want to sign out actually so that also we can do right away let's go to home screen and instead of calling this directly what we will do is again we will call our firebase or so fire firebase auth dot instance dot sign out it is as simple as that and then i can call this then function and inside this i will do our navigator.push so once user is signed out from the firebase login then we will go to the sign in screen so i can just print over here just to showcase show you that it has worked okay now if i click on log out you see signed out and then it goes to the sign in screen and uh now let's create our sign in also if we go to sign in uh again we have a very simple function to call so that's why i said firebase is amazing you just have to you just have to set it up for the application and then it's as simple as this just calling some already created functions and you would be able to login log out and sign up as well so sign i think it is sign in with email and password where is it with email link you see there are multiple ways to sign in what we have selected we have done is sign in with email and password there is sign in with email links sign in with phone number sign in with pop-up there are so many ways so we can explore more on other things but for now we will do sign in with email and password click on this you will have to enter your email so that is email controller dot text and then text and then our password controller password text controller dot text so this would uh log us in and on this also we will call our then function and once we are logged in then we want to navigate to the home screen so let's navigate to home screen save it and now we have to enter our [Music] gmail and then password would be welcome uh let's let's write our incorrect password then what will happen let's see we click on login and it says there is some exception it says the password is invalid right so we can handle that as well you can you can uh write like dot on error and then you know show the user some some uh you know some alert box saying that your password is invalid or you can write over here with the form validation whatever you want uh right now let's just print it and our dollar curly braces error dot to string so this will just print it but you can use it in multiple ways you can actually do it uh like you know you can show the uh in multiple ways what happened what is wrong over here so i have not used my curly braces over here okay so if you see if i click on login now it just shows me the error method right not the exception okay cool because we have handled the error as well now let me just enter the current correct a password and it should allow me to go to my home screen and when i click on note i see this signed out and i am on my sign out screen i can again sign up and you can see all these users in your authentication page itself so i have hershey edu gmail.com in my users list right and i can see at what time she was created i mean this account was created right so this is how we uh include our this is how we embed our firebase authentication with our android application with our xcode not not sorry not xcode with our flutter applications it was as simple as that for ios if you want to set it up for ios uh then what you have to do is just go to this project overview and as we added our android settings we just have to add this uh click on that add app and click on this ios icon and it would be similar settings as we did for android you have to uh show your bundle id so for that uh i mean you can check it in visual code but i prefer to check it in our in our xcode so actually what you have to do is go to your folder where you have created your application and go to your ios folder and then click on this runner xc project space so once this opens up you will be able to see your bundle id and we will do some changes as well which will uh which would be needed for our firebase setup right so first of all this is our bundle identifier right here you have to click on this runner and then in the targets when you select this in general you will have bundle identifier just copy it and paste it over here this is optional this is optional so we can leave it register your app and then you will have to download the config file the google services config file as we did it for android so in android it was a json file in ios it's a plist file so just download it once it is downloaded you will have to go to your xcode or you can put it in um through visual studio as well but uh let's do it in xcode because we have it open so in runner see this info.plist we have to keep it next to it so in the runner folder just drag this we don't want to open it we just want to drag it where did it go okay i think it's gone in the downloads okay there it is and let's go to my xcode and drag it over here finish and we will see ours in post uh google service dot info file let's remove this four and we have it great so this is this is fine now what we have to do is if you see uh like we did in android we had to upgrade the minimum sdk world supported version the same thing we have to do for ios you have to go over here and see this is supported uh deployment info the target os is 9.0 which we don't want we want to select something higher we will select 12 okay and then go to in uh project or as well and here also wherever you see 9.0 selected as always select 12 i think over here as well you have to just enter 12.0 and that should be it that's that's all the setting we need to uh you know embed our ios embed our firebase application in ios application for ios application as well for flutter okay so we can close it and go back to my visual studio and just run your application and it should work so what i will do instead of pixel i will select my iphone 12 pro max and run the application so this will take some time because we are running it for first time okay so our app is running now and if i try to log in with the email id which i used while signing up in the android phone i should be able to log in over here as well so the password was welcome and login and i'm in okay if i log out and i want to sign up let's let's do another signup i will call this one gmail.com i'm not into the edu and i will say welcome one sign up i should be able to end and i should be able to see it over here so let me just refresh this page and there we go we have both our email ids one which we entered through uh android phone and one from the ios phone and we can use both the email ids on both our devices as well so there you go you have your application uh linked up with firebase authentication and you can log in in both android and ios using your firebase authentication so that's it for this video if you like this video please do not forget to subscribe and do let me know in the comment section if you have any suggestion for my next video or if you have any comments on this video as well so thank you so much bye

Channel: Harsivo Edu

Views: 122,535

Keywords: flutter tutorial, flutter with firebase, flutter firebase, flutter with firebase tutorial, flutter authentication firebase, flutter, flutter for beginners 2021, flutter for beginners, flutter firebase authentication - email and password, flutter firebase auth, flutter login and signup with firebase, flutter auth, futter login Ui, flutter login and signup ui, flutter tutorial for beginners

Id: GvIoBgmNgQw

Length: 41min 34sec (2494 seconds)

Published: Thu Dec 16 2021