Adding Firebase Database + RestAPI to React App

Using the latest version of Firebase SDK. 9+.

Start by creating a free, google account. Then open the following link to create a new Google Firebase project. The account will be under Google’s Spark plan which is 100% free.

Click get started. https://firebase.google.com/. Follow the steps. You need to be signed in to your google account. This project will be created under your google account (gmail).

Firebase Set Up

After you are done going through the wizard to create a new project. You will need to add “Firebase firestore” in this project. Firestore is a scalable noSQL database on the cloud. Since Firebase has a ton of other features like authentication, you can add a Database, Cloud Storage, etc. But for now, only add the Firestore Database.

Click create database:

Follow the instructions. Select test mode for now. Then choose a location, anything in north america will be fine for our purposes. We can switch to production mode at the end of this tutorial.

Once ready, you can now create a table, or a collection.

Click start collection, and enter the name of your data, for example pets:

Click auto id, to auto generate an ID. This will be non repeatable and completely unique.

Then start by adding your first pet. They are called documents. Choose your data, and their data types.

• column name
• type: number, string, boolean ..etc
• value: ..

To add more, click add Document.

To edit existing documents, you can select them by clicking on them, and click the add field button.

You can also edit values using the pencil icon.

The firestore database automatically can give you a FREE simple API to use. Since your data is in test mode, it is public.

All you need is your project id. You can grab that from the project settings.

ex. pet-store-a6611

Then plop it into this default API url:

https://firestore.googleapis.com/v1/projects/PROJECTID/databases/(default)/documents/pets/

Ex.

https://firestore.googleapis.com/v1/projects/pet-store-a6611/databases/(default)/documents/pets/

And that will give us a list of all our documents..we can use this JSON object inside our react app!

Using fetch we can call the API and we will get this data back.

GET Request

const response = await fetch(“https://firestore.googleapis.com/v1/projects/pet-store-a6611/databases/(default)/documents/pets/”);
const data = await response.JSON();
console.log (data);

POST Request

const response = await fetch(“https://firestore.googleapis.com/v1/projects/pet-store-a6611/databases/(default)/documents/pets/”,
{
    headers: {
      'Content-Type': 'application/json'
    },
    method: "POST",
    body: data
})

where data is a JSON object, that follows the following syntax. JSON.stringify can be used.

const data = {
    "fields": {
        "id": {
            "stringValue": "3"
        },
        "breed": {
            "stringValue": "ragdoll"
        },
        "age": {
            "stringValue": "3 years"
        },
        "name": {
            "stringValue": "Luna"
        }
    }
}

Securing your firebase API

After 30 days, your test mode will expire. Therefore navigate to the rules section and update it.

As you can see it will stop allowing you access the database after a certain time. The new rule should allow indefinitely for only logged in users. In order to do this you must add a login and sign up page to your application.

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

There are more rules you can put below, such as restricting the user to only seeing documents if they are the ones who created it. But the above will do for our purposes.

Basic Security Rules | Firebase Documentation

Click publish, and wait a few minutes.

First, add authentication using Firebase to your application. Please follow my other tutorial before continuing.

Now when sending requests, you must send something special with the request.

Each user logged into Firebase, inside your application will have their own temporary access token. It is like a ticket to access secure data.

In order to do use the token, we first get it from user.accessToken. We can get the user who is logged in using getAuth.

const user = getAuth().currentUser;
const token = user.accessToken;

We need to pass the user’s token inside our GET, POST ..etc requests. To do so we use the request options. We first create our options object, and inside we add headers. Inside headers we create an Authorization property. This needs to have a value of

“Bearer <token>” 

So all together:

const requestOptions = {
     headers: {
          'Authorization': 'Bearer' + ' ' + user.accessToken,
     },
  };

Then right under, we pass our requestOptions as a second argument to the fetch method. (API URL, options).

const response = await fetch('https://firestore.googleapis.com/v1/projects/pet-store/databases/(default)/documents/pets/', requestOptions);