Firebase : Realtime Database
What is Firebase?
For starters, Firebase is actually a collection of various products that all fall under the Firebase family. In Google’s own words, Firebase as a whole is described as the following:
Firebase gives you the tools to develop high-quality apps, grow your user base, and earn more money. We cover the essentials so you can monetize your business and focus on your users.
Getting Set Up with Firebase
When you first log in to Firebase, which you can do by simply being logged in to your Google account in your browser and clicking “Go to console” in the upper right hand corner here, you will come to a welcome screen.
The first thing you want to do is create a project using this screen’s prompt. It will ask you to input:
- The project’s name
- Whether or not you want to enable Google analytics for the project (I typically will enable)
- Configure Google analytics if you have enabled it
Once your project is ready, click continue and you will be taken to your project dashboard. One thing to note, is that each project can and likely will have multiple apps. iOS, Android, and web are each loaded in individually under one project.
Connecting to Firebase
To connect to Firebase, you need to set up a firebase config file in your codebase. In this file, you will add your firebaseConfig variable, which can be downloaded from Project → Settings → General → Your apps, where you will select the app that you are working on, then click the download google-services.json button:
This file will have the information that you need for the firebaseConfig variable:
And then your firebase app is initialized by just importing firebase and using this one line of code:
firebase.initializeApp(firebaseConfig);Firebase Authentication
Before we dive into topic, We would like to say that, for those of you who have not, We strongly encourage that you first learn to build and implement authentication from the ground up. Building your own authentication system teaches you about encryption, hashing, and authentication flow, which in our opinion is extremely valuable knowledge. While it’s invaluable to have tools that strip you of the need to recreate something like authentication each time (and, let’s be honest, Google is doing it more securely than we could on our own anyway), it is still important to understand what it is that you are implementing. Now that that’s out of the way, let’s begin. Back to your Firebase console.
Setting up Firebase Auth
From the menu on the left hand side, select the “Develop” dropdown, and then select “Authentication”.
This dashboard is where you can manage everything related to users and authentication for your app. Firebase offers an authentication solution that supports traditional email/password auth, phone auth, and social auth such as Google and Facebook login. Firebase also stores all necessary user and login information in a Firebase database, so you don’t need to concern yourself with that part.
The users tab is where you can access a list of the project’s users and user information. You can also manually add users here.
The sign-in method tab allows you to enable your preferred social sign-in options, such as sign in through Google, Facebook, Twitter, Github, etc. The full list of options is pictured below. This shows a project with email/password, Google login, and Facebook login enabled.
On this same tab, under “Authorized domain”, you can (and need to) list domains to be authorized for OAuth redirects.
The templates tab very conveniently allows creation of templates for things like email verification and password reset, which are automatically triggered on signup and forgot password, respectively.
Lastly, the usage tab just displays the app usage statistics for the current billing period.
Implementing Firebase Auth
Firebase is now setup to receive, authenticate, and manage your users, and now just needs to be implemented into your code. The sign up and login flows here are really no different than the would be elsewhere. You can route as you would otherwise, but then when you get to the login and sign up functions, usually called under something like onClickLogin and onClickSignUp, you are going to use the below, where “firebaseMethod” is whichever firebase method that is appropriate for your route:
firebase.auth().firebaseMethod(email, password)So if you want to create a user, you would add the below line of code to your register/sign up function, where the email and the password is taken from the user’s input:
firebase.auth().createUserWithEmailAndPassword(email, password)Firebase has made a process which is complicated and costly to do right amazing simply to implement.
Firebase has two options to select from — Cloud Firestore and Realtime Database. On comparing, Google offers the below:
Cloud Firestore is Firebase’s newest database for mobile app development. It builds on the successes of the Realtime Database with a new, more intuitive data model. Cloud Firestore also features richer, faster queries and scales further than the Realtime Database.
Realtime Database is Firebase’s original database. It’s an efficient, low-latency solution for mobile apps that require synced states across clients in realtime.
If you’d like to learn more about Cloud Firestore, you can find the documentation here and check out the below video.
Realtime Database
Realtime Database is a NoSQL cloud database that prides itself on its realtime updates, scalability, and ability to operate offline. The realtime component is one of its most unique aspects. Data updates and database updates usually only happen when an HTTP request is made, a GET request updating the former and a POST or PATCH request updating the later. Inherently, this process relies on the client making that request, and updates will not happen otherwise.
Realtime Database uses something other than HTTP requests though for getting new data, which negates the need for client requests and facilitates this real-time updating. It uses data synchronization, meaning that whenever data is updated, all connected devices are automatically updated nearly instantaneously without the need for a new request. Think about that for a second. All connected devices anywhere are updated — that’s incredible.
Updates, of course, require a connection, but conveniently Realtime Database utilizes disk storage for the times that a user is offline. Users can still access the latest data from before they went offline, and as soon as they are reconnected, the data synchronization picks up where it left off and updates automatically.
In addition, Realtime Database can be used seamlessly with mobile applications and has you covered when it comes to securing your application’s data. It offers Firebase Realtime Database Security Rules, allowing you to easily maintain control of permissions and rules as they pertain to your database. You can read more about these rules here.
Setting Up Realtime Database
From the Develop menu on the left-hand side of your Firebase application, select ‘Database’. Scroll down to ‘Or choose Realtime Database’ , and click on ‘Create database’.
You will see a prompt to start in locked mode or test mode. We are starting in test mode for this example, but depending on your needs you can select either one. you have a Realtime Database and will be redirected to the dashboard for it.
Connecting to Realtime Database
Here, we will be covering connecting with a web application using JavaScript. iOS, Android, and languages other than JavaScript will have their own guides to connection.
First, set up your config folder and files, however, you typically structure these. In this config file, use the below code to initialize your connection:
// Set the configuration for your app
var config = {
apiKey: "apiKey",
authDomain: "projectId.firebaseapp.com",
databaseURL: "https://databaseName.firebaseio.com",
storageBucket: "bucket.appspot.com"
};
firebase.initializeApp(config); // Get a reference to the database service
var database = firebase.database();
You will need to find your apiKey, projectId, databaseName, and bucket. Your database name can be found on the dashboard for your database, under the data tab:
To get your bucket, you will first need to configure a default storage bucket for your database. To do this, select “Storage” from the Develop menu, and then select “Get Started”.
You will be prompted to set the rules for your storage bucket, and then the location for your default storage bucket. Hit “Done” once completed and your default storage bucket will be created. You will be redirected to the dashboard for your new storage bucket, where you can find the bucket name for your database config file:
The remaining pieces are specific to the project rather than the database, and can be found in Project Settings:
Under the “General” tab, you can find your projectID and Web API Key:
And just like that, your Realtime Database is set up within Firebase and properly configured from within your codebase. Complete documentation for this database can be found here. Check back for more on Firebase’s Crashlytics and Analytics tools.
Blog Created by:
TY CS A Group N0. 14
