We all know how tough it becomes to make a proper login and signup structure for your app while simultaneously storing the profile data provided by the user. This gets pretty daunting when you have to build everything from scratch. This is where Firebase comes to rescue.
With more than 19 services, Firebase has made everything so easy for developers across the world. Two of these services that we’ll be discussing today are Firebase Auth and Firebase Cloud Firestore.
Firebase Auth:
Firebase Authentication allows users to sign in to your app using one or more sign-in methods, including email address and password sign-in, and federated identity providers such as Google Sign-in and Facebook Login.
Firebase Cloud Firestore:
Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. Like Firebase Realtime Database, it keeps your data in sync across client apps through realtime listeners and offers offline support for mobile and web so you can build responsive apps that work regardless of network latency or Internet connectivity.
Now that we are familiar with the utility of both these services, let us start the process of integrating them into our Flutter app. The whole process can be broadly divided into 3 simple steps:
1. Creating a Firebase Project:
To start with the process, the first thing that we need to do is to register our app with a Flutter Project. For that, you need to login to firebase.google.com.
After a successful login, click on the “Go to console” option on the top right corner of the web page.
Once you are there, you will see a list of all the Firebase projects that you may have made before, else, there would be a huge button with a plus sign in the middle of it. This option lets you create a new Firebase Project.
Once you have pressed on the New Project option, you would be asked to give a name to this project. On continuing, you would be asked if you would like to add Firebase Crashlytics to the app. This way, Google will be sent the log whenever your app crashes, and Google would create a detailed analysis of the crash.
Just press continue as of now, however, if you really want to add this, you can do it now. Moving ahead, the site would take 5–10 seconds to create your project, once it is done, you’ll be redirected to your brand new Firebase project!
2. Registering your app to Firebase Project:
Now that you are done making your Firebase project, you need to connect your Flutter app to your Firebase project. To do this, you need to click on the Android logo visible on the home page of your project.
Now the first thing Firebase asks for is your ‘Android package name’. You can find this under applicationID field in your app level build.gradle file.
Once you are done adding the package name, you can skip the other two options of adding a nickname and the SHA2 key of your app to the project and click on the Register App button.
After that, the most crucial step of the whole is adding the ‘google-services.json’ file to your Flutter app. This is the most confusing step as it highly depends on small technicalities. For example, the name of the file should precisely be ‘google-services.json’. On multiple downloads, the operating system tends to add ‘(1)’ or ‘(2)’ at the end of the file name to distinguish it from previously downloaded files. However, you cannot afford to have anything added to the name of this file as the app would then fail to read the file.
Once downloaded, you need to place your file in the ‘app’ folder under the ‘android’ package of your app.
Also, you need to add the google-services plugin to your Gradle files. To do this, open your project-level file and do the following changes:
Next, open your app-level Gradle file and do the following changes at the top or bottom of everything (basically outside of any curly braces):
After you’re done making changes to the Gradle files, you need to tell your app to ‘get’ these packages. For this, run the following command in your Flutter console:
3. Making your app use Firebase services:
Now that both the app and Firebase project are connected, you need to tell your app that you would be using Firebase. In a more formal language, we say that we need to make our app ‘depend on’ Firebase.
Whenever we use some features/packages that do not come pre-installed with Flutter, we always need to make our app ‘depend’ on these packages. What this does is, it enables the user to use many features that are exclusively offered by these packages.
So to do that, you need to head to the pubspec.yaml file of your app and do the following changes:
And in the build.gradle file in the android/app directory, add the following lines in the ‘dependencies’ section:
Since you have made changes to the pubspec.yaml file, you would be prompted to run the ‘pub get’ command. Just click on ‘Pub get’ and voila! You have successfully integrated Firebase Auth and Cloud Firestore to your app! 😍
Now that we have successfully integrated both Firebase Auth and Firebase Cloud Firestore to our app, we can move on to using these services to make our app more powerful and reliable.
You can check out these links to know more about these services:
1. Firebase Auth
2. Firebase Cloud Firestore
About Me
I am a second-year student at IIIT, Allahabad. Always having a keen interest in the way mobile applications work has helped me constantly learn new stuff about the same.
