In this tutorial we are going to learn how to integrate in our app the Firebase authentication, so we will use email, Facebook and Google to register and login the user.
Under the hood we will use the MVVM architecture. It means we will have a ViewModel and some MutableLiveData and LiveData to store the data and share it with the user interfaces.
The app will be very simple, to focus on the important part, which is the back-end. The app will have a
Firebase is a mobile and web application development platform developed by Firebase, Inc. in 2011, then acquired by Google in 2014. In October 2018, the platform has 18 products, which are used by 1.5 millions of apps.
Firebase evolved from Envolve, a prior startup founded by James Tamplin and Andrew Lee in 2011. Envolve provided developers an API that enables the integration of online chat functionality into their websites. After releasing the chat service, Tamplin and Lee found that it was being used to pass application data that were not chat messages. Developers were using Envolve to sync application data such as game state in real time across their users. Tamplin and Lee decided to separate the chat system and the real-time architecture that powered it. They founded Firebase as a separate company in September 2011 and it launched to the public in April 2012.
Firebase’s first product was the Real-time Database, an API that synchronizes application data across iOS, Android, and Web devices, and stores it on Firebase’s cloud. The product assists software developers in building real-time, collaborative applications.
In May 2012, a month after the beta launch, the company raised $1.1 million in seed funding from venture capitalists Flybridge Capital Partners, Greylock Partners, Founder Collective, and New Enterprise Associates. In June 2013, the company further raised $5.6 million in Series A funding from Union Square Ventures and Flybridge Capital Partners.
In 2014, Firebase launched two new products. Hosting and Authentication. This positioned the company as a mobile backend as a service.
In October 2014, the company was acquired by Google. A year later, in October 2015, Google acquired Divshot, an HTML5 web-hosting platform, to merge it with the Firebase team.
In May 2016, at Google I/O, the company’s annual developer conference, Firebase introduced Analytics and announced that it was expanding its services to become a unified backend-as-a-service (BaaS) platform for mobile developers.
Firebase now integrates with various other Google services, including Google Cloud Platform, AdMob, and Google Ads to offer broader products and scale for developers. Google Cloud Messaging, the Google service to send push notifications to Android devices, was superseded by a Firebase product, Cloud Messaging, which added the functionality to deliver push notifications to both iOS and web devices. In January 2017, Google acquired Fabric and Crashlytics from Twitter to add those services to Firebase.
In October 2017, Firebase has launched Cloud Firestore, a real-time document database as the successor product to the original Realtime Database.
As we have already introduced at the beginning of this chapter, we are going to build up a small app.
Basically it will contain 4 activities
The user interface of the SplashActivity::class will contain only a one ImageView. In our case it will be an image about this website. What else?! 😉
In the background we will implement a few seconds delay. During this time the activity will check, if the user is already logged in, or logged out.
If she/he is logged out then the user gonna be automatically redirected to the login page.
If she/he is logged in, then to the MainActivity::class. In this case we are going to fetch the currently logged in user’s data from Firestore.
After the fetch the name of the user will be written out in a TextView.
On the RegisterActivity‘s UI we will have
- An ImagView for the logo
- Three TextInputEditTexts for the name, email, password
- A Button
- Two ImageViews for the Facebook and Google registration
- And a TextView to open the LoginActivity::class
The LoginActivity::class consists of fewer elements.
- An ImagView for the logo
- Two TextInputEditTexts for the email and password
- A Button
- Two ImageViews for the Facebook and Google login
- And a TextView to open the RegisterActivity::class
On the MainActivity::class will be a TextView, which will show us after the successful login or registration the name of the currently logged in user.
The second object will be a Button, what will ne used to log out the current user and open the LoginActivity::class.
The architecture of the code
In this tutorial we are going to use the Google’s recommendation and we will build up the app using the MVVM architecture.
The MVVM architecture
Model-View-ViewModel is a template of a client application architecture, proposed by John Gossman as an alternative to MVC and MVP patterns when using Data Binding technology. Its concept is to separate data presentation logic from business logic by moving it into particular class for a clear distinction.
- View: that informs the ViewModel about the user’s actions
- ViewModel: exposes streams of data relevant to the View
- Model: abstracts the data source. The ViewModel works with the Model to get and save the data.
If you are not familiar with the Android app architecture, then it is highly recommended to read this articel, very helpful. 😉
In our app we are going to use Koin as a dipendecy injection framework.
Koin is a Dependency injection framework for kotlin. It is written entirely in pure kotlin that’s why it’s so efficient and lightweight and have very good support for android.
If you are not familiar with Koin, then check out our tutorial about this framwork.
Let’s start coding 😉
In the next chapter we are going to build up the user interfaces for our app.
We gonna start with the UI of the SplashAcitvity.
I hope the description was understandable and clear. But if you have still questions, then leave me comments below! 😉
Have a nice a day! 🙂