How to Setup Firebase in Flutter | Firebase CLI | Flutter 2024

Salam alikum and welcome back to coding with t today we are going to learn how to set up Firebase INF flutter we are going to use a very simple approach to set up Firebase we not going to use the old methods to manually copy and paste the files okay so let's quickly have a look how we are going to divide our tutorial into very few basic points so that we can quickly set up Firebase so the first thing is that definitely we need to create new project in the Firebase console after that we going to install the Firebase CLI which is Firebase command line interface using that we can run the Firebase commands on our terminals we will definitely use node.js to enable that Firebase tools first and once enabled we will activate our Firebase CLI and once activated we will login using Firebase and once our account on which we have at the point one we created Firebase project once that account is login using the C command line interface this means that now we can access that specific project project or all the projects related to that specific ID which we will be logged in and once logged in definitely we will fetch all the products using the flutter fire configure command and once everything set up we will add dependency in our project perform few modifications on the Firebase console and definitely we're going to add sh1 and s256 which will be reused when you're going to work on the authentication in upcoming videos so let's get started okay we are creating flutter e-commerce application and we have divided the e-commerce app into five major sections in which we have already covered the first three so the first one is to set up everything for the flutter project and once the project set up we learn how to design folder structures Etc and once done we are going to move towards the section two and in that section we'll learn how to design the login part and right on that login part we going to start the backend Firebase authentication and in the section three we have already designed the e-commerce application you can get the complete code link is in the description and you can also watch the the playlist link is in the description or from the right top corner so we are obviously starting the section 4 which is the first video of the back end so make sure to watch the video till end do not skip any part and I hope there will be lot to learn in this tutorial so let's get started first of all open your browser and you have to head towards the console. fire. goole.com and login using your Google account once login you will see the button over here which is to add the project this this is the step one in which we have to create the Firebase project so click on it give a nice name to the project click on continue enable or disable the Firebase Google analytics it's all up to you you can enable or disable it click on continue and you have to select the account for the Google analytics because previously in here we enabled it let's say we're going to disable create project and it will simply create the project nothing else we have to do project is created click on continue everything is ready and set up and over here you can see we have bunch of of options iOS Android web unity and flutter so we are going to set up the flutter Firebase so click on it and we have three main steps and at the top you can see the easiest way to get your started is to use the flutter fire CLI so CLI is command line interface that definitely we're going to follow that so the first thing is we have to install the Firebase CLI so click on this it will open a new window and in here you can see we have three options go for the windows Ma and Linux I'm going for the windows which is already open and inside this we have two options Standalone binary and npm Standalone binary is simply the x file which you can download over here and try to install it there might be chances that you get an error while installing the Standalone binary because it's an XZ so we cannot do much about this one so that's why the recommended one is to use the npm and to use the npm we have to first install the node.js if you have already installed node.js s in your system you don't have to do this install the node click on this and in here from these two options in the node vs. you have to go for the recommended for the most users download it and install the njs it's a simple XG again so once you have downloaded the node.js close this one head back over here and the reason to use the node is same that either go for the Standalone go for the npm we have to use npm and node install once the node.js is installed you just have to copy this command install the Firebase tools open up your terminal paste this line and hit enter and it going to take few minutes okay here you can see we have added four packages change 64 packages because I have already added before because I'm working on this machine so once done head back over here installing the Firebase tools using node.js is completed we can close this one head towards over here and it is saying now you can run the Firebase login command copy this and you have to paste it over here hit enter okay here you can see I was logged in using this command which is already logged in and I have to run the Firebase log out command to log out from this and now when I'm going to paste Firebase login again it's going to pop up a new window it's your choice to allow to collect anything I'm going to pass n for no and you hit enter it is going to pop up the list of emails you have to select the same email on which we are going to create the project we have already created a project over here so make sure it's the same one click on it click on allow Firebase CLI login successful we can close this open the terminal and you can see it is saying success logged in as your email this means that we are done with the fireb c as well over here we have to install the flutter SDK flutter is already installed we are working on our e-commerce application if you don't know how to install flutter I'll drop the link in the description or you can get it from the right top Corner after that we have to create a fter project which is already created and we have already designed flutter e-commerce application click on next and the next thing is we have to activate the flutter fire CLI because we have to use the Firebase related commands on the terminal So currently we installed everything we have not activated here to activate it we have to run this command which is Dart and at the top you can see we can run it from the any directory so again we going to go for the terminal and in here past this command hit enter previously I had the Fier C at the version 0 to7 it's being updated maybe when you run this command currently it's all succeeded because we have already activated there might be an issue that uh you facing that Pub install executables into some path it is going to give you that path which is very important and that path is not in your path so what does that mean you can fix that by adding that into the path environment variables so to do that to solve that issue you have to go to the windows or click on this search button right en andv you can write environment variables and you have to open the edit the system environment variables inside this you have to go for the environment variables button click on it and you should have the path variable if it is not there you can simply create a new one you have to name path and you have to paste the path which you are just seeing on your terminal you just have to paste it over here it's probably the same as mine so let me show you if you already have a path variable creat over here you have to edit it and paste it as a new entry right over here because I have already added which is this one which is C users your username app data local pub cach and Bin so might be same for you as well so you just have to paste it click okay click okay again and click okay to close now when you're going to run this command hopefully it will work which ISP Global activate flut fire CLI currently we have configured everything related to flutter fire CLI our flut fire commands are now available globally throughout on all the terminals we can run it so let's close this one and now we have to configure the projects and remember that we are loging with the same email now that email might have list of projects so to configure one specific project for this application you can see the command over here which is flutter fire configure command so this is the command that we going to use this is the command for the one specific project you can simply copy and paste it but just for the additional information and also you can see over here then add the root of your flutter project directory so this is important you have to open your flutter project directory open this currently we have this project we are working on go to the terminal and make sure you are pointing towards the same directory over here and once you're pointing you can paste the flut fire configure hit enter it is going to fetch all the Firebase projects under the Google ID we have created so we have some list of projects we have to find the project which we have just created using upper and lower Keys you can find one and click on e-commerce app hit enter you have to use the space to select and unselect move up and down using upper and lower Keys we're not going for the Mac OS web is fine IOS and Android is fine hit enter it is going to fetch everything when you go to the lip folder and in here you can see currently we don't have anything over here related to Firebase so if it is going to be successfully registered this project we should have the Firebase options new class right over here so let's wait okay so in here you can see we have registered a new Firebase Android iOS and for the web and these are the Firebase app IDs and in here you can see we also have fire options and the error is that we don't have anything related to fire core to solve this we have two hers toward the props speec rml file and in here we have to add the new packages to add a new package you two ways you can directly add the package from the terminal write flutter Pub add space name of the package hit enter the second ways you just have to open the browser go to pub. Dev search for the project click on the project not the project sorry the package and you just have to copy it from here and currently you can see by using command line it is already added which is fire score 2.30 and it's the same that we going to copy need to copy it add commands because down below after this we are going to add all the packages related to Firebase which will be Firebase authentication Firebase storage Google signin Etc so once done it is going to automatically do the FBG for us and you can see the Firebase options error is gone we can close this this means that we can now easily use Firebase inside our project and we will going to configure that Firebase from the next video onwards which is the onboarding video but we first have to configure the Firebase over here so before going to do anything head towards your project click on next and you can see the text over here which is saying you have to initialize your app so let's copy this click on continue to console this means that we are done with the installation and in here you can see we have some of the todos already created initialize authentication initialize Firebase so we are going to initialize the Firebase over here using the command that we received we have to import the Firebase import this package package column Firebase sc/ score. Dart it is going to import the Firebase do initialize part for us and because we have to await this make it async function so when you hover over this it is saying that convert this main method to async Method there's a return type as future Main async and to import another package which is default Firebase options so hit enter basically this is a simple class that we have just added which is Fus options do once imported you can see we have successfully removed all the errors but here we going to perform another thing that whenever the Firebase initialization is ready we are going to check our own Firebase authentication uh if user is logged in if user is logged out maybe if user is user created his account but his email is not verified so we will redirect the user email to some other screen and ask the user to First verify his email to do all these operations before running anything directly from the Run app we going to perform one more thing for the authentication we are going to use the dot then package right after this command this command is basically choosing the options from the Firebase options. current platform if it's web Android or iOS once this initialization is done we going to use the then property after the initialization we will get the Firebase value we don't need it so after this then insert this function we have to call the authentication repository using get.put command because using the gex trate management if you're not using gex State Management you can use any method you just have to invoke the authentication repository because when we going to create this authentication repository from next tutorial onwards we just have to trigger its on init function on init function is going to check the current state of the user redirect user screen to some relevant screen and simply we will add loaders inser this app instead of calling manually the onboarding screen we will add a nice loader circular loader over here that loader will not be visible because we also keep showing the splash screen until everything authenticated and we will stop the splash screen appearance right inside this authentication so nothing to worry but we just have to replace this onboarding with a circular animation and we will let the authentication repository decide which screen the user will see so once done go back over here if you're going to download the code and if you're facing some errors or problems the reason is that you have to enable these things so first thing is the authentication click on get started inside your fire console we're first going to use the email and password authentication click on enable save it it's enabled add new provider go for the Google hit enable use the sport email save it and you can see that enabling Google signin for the first time creates all all credentials clients which are automatically added to the config files of your app so download and replace the configuration files in your app so that you can use Google signin for your app this means that we have to redo the Google signin nothing to worry just on a one click we can redo that and also for the Android you can see we don't have to do anything for the iOS just to download this one but for the Android we have to provide sha1 fingerprint and then download and replace the configuration file so first you directly go to Project settings click on it otherwise go to this gear icon click on Project settings and in here make sure you select this Android and at the bottom you can see we have add the fingerprint click on ADD add the Sha 1 and 256 in Windows I have all these three keys and I will again share these three keys in the description to add using a Windows you have to copy this key tool command till Android copy this open your project and in the terminal paste this command hit enter and if you're going to paste it and you might have this error which is key tool error java. l key store file does not exist so to solve this issue there are two things that you either have to provide a complete path right over here or you can run it inside the debug. key store file so first open your folder go to C inside users we have to find the main user and inside you can see we have dot Android folder so click on it and in here you can see we have debug. key store so this is the file that we have to point the first way is to copy this path till do Android head towards over here inside this command you can see we have already do Android over here we can remove this and paste right from the start C users your username Android debug. key store hit enter and it is going to get you sha1 and 256 inside your project directory wherever you are pointing and the other ways open the same folder where you have the debug. key store right click open this path in the terminal and and you have to paste not this one but the complete Command that we have already pasted over here right from the key tool till the Android and it is going to generate two sha certificates sha 1 is the only requirement for the Firebase Google signin but we going to add sh 256 in case you want to use some other authentications so in that case you have to use sh 256 like phone authentication Etc so inside your fire console in the Android paste it it is automatically going to detect the certificate fingerprint click on Save copy 256 same add fingerprint paste it and click on save so these two are also added this means that authentication part is completed for the next signin method click on ADD provider and for the Facebook definitely we need app ID and app secret that we will handle when we going to create the Facebook sign tutorial so leave it for that time head towards next to the firestore database this should be enabled otherwise you cannot access the fire store click on create database and you have to select the server location select it I'm going to go for the same one or the default one click on next you have to choose production mode or the test mode keep a test mode it has some time stamp when this time is going to be over you will definitely get the error so click on enable now you can see we enabled it and by using this way we can now easily access the fire store as well and same for the storage click on the storage click on get started choose in the test mode click on next choose the server location same as the fire store click on done okay the storage is also created once everything is created we are done with all the steps but for the fresh files because we added the shs inside the Android to do or to refresh everything you don't have to do anything manually just again go to the terminal and in here press the upper Arrow to Reet the command until we have flutter fire configure hit enter it is going to regenerate the new file or the new Firebase options do file and also for both Android and iOS which will be the latest files select your project hit enter again hit enter it is going to recreate and re-register all the files with the latest changes so this is the power of CLI and you can see the option generated Firebase options file already exist do you want to override it yes is default hit enter and by this way we have updated the Firebase options and that's it for the complete Firebase setup inside your flutter application I hope you find this video helpful and stay tuned hit the like button if you learn something new from this video and from the onwards from the next video we going to start the coding again okay so that's it for today's tutorial I hope you learn something new if you learn something new please like the video and if you're new to this channel don't forget to subscribe and hit the Bell icon to get notified for all the upcoming videos you can also get the complete playist link from the description below to watch previous or the upcoming videos so thank you for watching take care Allah h

Channel: Coding With T

Views: 10,510

Keywords: how to setup firebase in flutter, firebase flutter setup, setup firebase in flutter, firebase setup in flutter, flutter firebase setup, firebase cli flutter, firebase cli setup, firebase cli in flutter, firebase cli setup in flutter, flutter cli firebase, how to install firebase cli in flutter, firebase setup, flutter firebase setup using cli, firebase cli install windows, firebase setup in flutter 2023, Coding with t, flutter firebase tutorial, Flutter firebase setup 2024

Id: 91fmyvqBoEo

Length: 19min 36sec (1176 seconds)

Published: Fri Nov 24 2023