by Mateus Yonathan, Analyst Programmer at Mitrais

Firebase in React Native

What is Firebase?

Firebase is a Software as a Service (SaaS) provided by Google.

Before, Firebase developers had to spend extra effort building their own backend after writing their chosen mobile app. There was no instant backend for API, which could be integrated with a mobile app to provide services such as authentication, real-time database access, cloud storage etc.

Firebase was released by Google on March 9th, 2017 as a public beta version. With Firebase, developers can now make applications without server-side programming, making development much quicker and easier.

With Firebase, we do not need to spend extra effort on building servers or building REST APIs, with just a little bit of configuration we can give Firebase a chance to manage all of our backend requirements, such as storing data, verifying users, and implementing access rules.

Firebase supports web, iOS, OS X, and Android clients. Applications using Firebase do not need to worry about how to store the data, they can just use and control data and synchronize across various instances of the application in real time. We do not need to write server side code or to deploy a complex server framework to get an app started with Firebase.

Below are some of the Pros and Cons of Firebase:

Pros

· Supports several authentication types: email & password, Google, and Facebook

· Real-time data

· API ready to use

· Built-in security at the data node level

· File storage backed by Google Cloud Storage

· Static file hosting

· Treats data as streams to build highly scalable applications

· No need to manage backend infrastructure

Cons

· Firebase’s data stream model may limit the ability to write complex queries

· Since it uses NoSQL, the traditional relational data models are not applicable and developers SQL query technical skill will not be useful

· There is no on-premise installation

 

Integrating React Native application with Firebase for user authentication

So let’s get started.

First, you need to register your Firebase account, by using the following link.

Create your project example ‘Test’ project

Firebase React Native test project

Go to Authentication page, and then choose tab users

Firebase React Native authentication page

Enable Email/Password

Firebase React Native enable email

Press Add User button to add new user, set its email and password, example email: Oke@ oke.com, password: 123456

Firebase React Native Add User

At this state, you have successfully created user in Firebase.

Obtaining Firebase API key

Go to Project Setting

Firebase React Native Project Setting

Obtaining Firebase API

Just simply copy the Web API key

Firebase React Native Web API key

Obtaining Authorized Domain

Go to Authentication then choose Sign-In Method

Firebase React Native sign in method

Scroll down until you find Authorized Domains, the red box is your authorized domain.

Firebase React Native authorized domain

Obtaining Database URL        

Go to the Database menu, Data tab

Firebase React Native database menu

Your Database URL is in the red box.

Obtaining Storage URL

Go to Storage menu choose Storage, you will see a link, for example in the red box is the URL of the obtaining storage

Firebase React Native storage

Setup your React Native project

Download Latest NPM setup from this link.

Install NPM via Node.js Command Prompt

Firebase React Native NPM setup

Type npm install npm@latest –g

At this step, we need to have a React Native application, which has a login form, if you do not have it, you can download all of the source code from the link below:

Download React Native Login Screen App from this GitHub repository.

After downloading all of the source codes, then type on the console based on your directory files downloaded files:

npm install

A bit explanation on the code

At folder login/index.js from the downloaded files, we can see initialization of firebase statement:

Firebase React Native statement

You can find it online from here.

You can replace the code with your Firebase API key, example below:

import * as firebase from "firebase";

firebase.initializeApp({apiKey: "<YourApiKey>", authDomain: "<YourAuthorizedDomain>", databaseURL: "<YouDatabaseUrl>", storageBucket: "<YourStorageUrl>"});

Run your React Native project

Start your emulator

Firebase React Native emulator

On the console type:

react-native run-android

 

Congratulations!

You are now up and running with Firebase.