How to integrate Firebase to WordPress

I’m not sure why you want to integrate Firebase and WordPress together because they are two seperate system. The authentication is different too. But somehow, you end up here and want to combine Firebase and WordPress together. And yes, we can do it.

Download the Integrate Firebase PRO plugin

There is a FREE version of this Firebase WordPress integration plugin that you can find in WordPress plugin site. You can give it a try, however, the application is very limited. If you only want to interact with Firebase through WordPress frontend only, then the free version would be sufficient enough.

However, if you want a more secured and advanced feature of the plugin. Please support the development of Integrate Firebase PRO version.

Prepare Firebase Credentials

Before using the plugin, we need have the credentials from Firebase Console. You can get it by logging into https://console.firebase.google.com.

After signning in, you can navigate to Project Overview > Project Settings.

_images/firebase-project-settings.png

General configuration

In General tab, you can get the config at the bottom. If you don’t have any app ready, you can create a new one.

_images/firebase-create-web-app.png

Create a Web app

After creating a web app for you project, you can save your credentials for later usage.

_images/firebase-credentials.png

Firebase Credentials

Installation Process

After you have downloaded the plugin, you can use default installation process in order to install the plugin. Otherwise, you can always manually upload the plugin to your plugin folder through FTP client.

After you activate the plugin, you need to enter the Firebase credentials in the Dashboard > Firebase.

_images/general.png

General configuration

After that, you can create login form, show data, show logout button… on WordPress frontend.

Firebase Cloud Functions Deployment (PRO version only)

If you are using PRO version, there is another folder named firebase-wordpress-functions. If you want to manage database, Firebase users and custom functions, you should deploy the functions together with the plugin. Make sure that you have Nodejs installed on your machine.

In order to deploy cloud functions, you need to have Nodejs installed on your machine.

Then install firebase-tools packaged

npm install -g firebase-tools

SignIn and test firebase cli

firebase login

Since version 0.6.0, before deploying any functions, you should create two tokens for security purpose. One for Wordpress dashboard usage, the other is for Wordress frontend.

// Generate random token
node -e "console.log(require('crypto').randomBytes(20).toString('hex'))"

// Set your token to firebase configuration (dashboard token)
firebase functions:config:set api.dashboard_token=your-secret-key --project project-id

// Set your token to firebase configuration (frontend token)
firebase functions:config:set api.frontend_token=your-secret-key --project project-id

// Check your api token
firebase functions:config:get api --project project-id

Install packages and build functions. I’m using Yarn, you can use npm if you want.

cd functions/
yarn OR npm install

The code will go to functions folder, then installs packages with yarn / npm.

Start deploying firebase functions

cd functions
yarn deploy --project project-id
// OR
firebase deploy --only functions --project project-id

The deployment result should look like this

✔  functions: Finished running predeploy script.
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (103.29 KB) for uploading
✔  functions: functions folder uploaded successfully
i  functions: updating Node.js 10 (Beta) function api-user(us-central1)...
i  functions: updating Node.js 10 (Beta) function api-database(us-central1)...
✔  functions[api-user(us-central1)]: Successful update operation.
✔  functions[api-database(us-central1)]: Successful update operation.

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/project-id/overview
✨  Done in 77.56s.

After that, you should update your Firebase setting with the dashboad token and frontend token and firebase functions url (e.g. https://us-central1-project-id.cloudfunctions.net)

_images/firebase-setting.png

Firebase setting