Firebase

Few plugins in the template depend on Firebase Services, i.e. Realtime Database for Post Views Counter, etc. Therefore, if you wish to use any of these plugins, you need to have a Firebase Project configured with the blog template.

Creating a Firebase Project

If you have already an existing Firebase Project created earlier, you can use it and skip the steps for creating newer one which is described below.

1. Go to Firebase Console.
2. Click + Create a project and follow the prompts to create a project. You can name your project anything you want.
3. Once the project is created, navigate to Project settings.
4. Under General > Your apps, click on </> Web and follow the prompts to create a Web app in the project.

You have now created a Firebase Project for Web Applications.

Setting up Realtime Database Rules

Adding secure rules to Realtime Database is crucial because insecure rules permits database read and write access to anyone on the internet, allowing them to read and modify anything in the database. Therefore, we need to add restrictions in order to make sure one cannot modify data without permission. Follow the steps below to protect your database.

1. Go to Firebase Project > Realtime Database.
2. Switch to Rules tab.
3. Paste the following JSON by making appropriate changes in the rules editor and click on Publish.

   Warning!
   The provided rules may update in future by our team in case any critical issue is found or new plugins are made available. It is recommended to update the rules as below regularly (atleast once in a month) by visiting this page.
   Rules was last updated on 1st September, 2023 by Deo Kumar.

   {
     "rules": {
       ".write": false,
       ".read": false,
       "blogs": {
         "$blog_id": {
           ".validate": "$blog_id.matches(/^\\d{18,22}$/) && ($blog_id === '000000000000000000' || $blog_id === '0000' || $blog_id === '0000')",
           "posts": {
             "$post_id": {
               ".validate": "$post_id.matches(/^\\d{18,22}$/)",
               "views": {
                 ".read": true,
                 ".write": "newData.exists()",
                 ".validate": "newData.isNumber() && newData.val() % 1 === 0 && newData.val() === (data.exists() ? data.val() + 1 : 1)"
               }
             }
           }
         }
       }
     }
   }

   {
     "rules": {
       ".read": true,
       ".write": false
     }
   }

Getting Firebase Configurations

We now need the configuration object of our Firebase Project Web app. Follow the steps to find it.

1. Navigate to your Firebase Project.
2. Go to Project Settings.
3. Under General > Your apps tab, select your Web app and click on Config. You will be able to see a Javascript object which looks like the following:

   const firebaseConfig = {
     apiKey: "API_KEY",
     authDomain: "PROJECT_ID.firebaseapp.com",
     databaseURL: "https://PROJECT_ID.firebaseio.com",
     projectId: "PROJECT_ID",
     storageBucket: "PROJECT_ID.appspot.com",
     messagingSenderId: "SENDER_ID",
     appId: "APP_ID",
     measurementId: "G-MEASUREMENT_ID",
   };

   If the field databaseURL is not available, that means you have not created a Realtime Database instance yet, create it through Realtime Database section and re-check to make sure the field databaseURL is available.

Keep the browser tab open as we shall need the information of this object.

Setting up Firebase Configurations

We shall now add the firebase configurations to our blog.

1. Go to Blogger dashboard and navigate to Layout.
2. Find the Link List gadget with title Firebase Configurations (if you have not renamed it), click on Edit button.
3. Create links for every key-value pairs, the key as Site name and the value as Site URL respectively as shown below.

   const firebaseConfig = {
     apiKey: "API_KEY",
     authDomain: "PROJECT_ID.firebaseapp.com",
     databaseURL: "https://PROJECT_ID.firebaseio.com",
     projectId: "PROJECT_ID",
     storageBucket: "PROJECT_ID.appspot.com",
     messagingSenderId: "SENDER_ID",
     appId: "APP_ID",
     measurementId: "G-MEASUREMENT_ID",
   };

4. Save the gadget to apply changes.

Done! You have successfully configured Firebase Project with your blog.