Firebase WordPress Integration Release 2.12.0 Sep 26, 2021 First steps 1 Products 3 2 First steps 5 2.1 Introductions...............................................5 2.2 IF-PRO Plugin Configuration......................................6 2.3 Firebase Cloud Functions Deployment.................................7 2.4 List of Current Shortcodes........................................ 12 2.5 Update the Plugin............................................ 17 3 Authentication 19 3.1 Enable FirebaseUI Web......................................... 19 3.2 Register & Login Form.......................................... 20 3.3 Custom Registration Form (Contact 7)................................. 22 3.4 One Tap Sign Up & Email Link Sign In................................. 23 3.5 WordPress User Integration....................................... 24 3.6 Firebase User Profile on WordPress................................... 32 3.7 Manage Firebase Users in WordPress Dashboard............................ 34 4 Database 39 4.1 Retrieve Data from Firestore and Display on WordPress........................ 39 4.2 Dynamically Display Firestore Data on WordPress........................... 40 4.3 Save Data from WordPress to Firebase (Realtime + Firestore)..................... 41 4.4 How to Work With Firebase Custom Claims in WordPress....................... 46 5 Cloud Storage 49 5.1 Cloud Storage Integration........................................ 49 6 Analytics 53 6.1 Configure Analytics........................................... 53 7 Firebase Features 55 7.1 Sync Post Data from WordPress to Firebase............................... 55 7.2 Sync User Data From WordPress to Firebase.............................. 57 7.3 Firebase Cloud Message Integration................................... 60 8 Hooks 65 8.1 Integrate Firebase PRO Filter Hooks................................... 65 i 8.2 Woocommerce Extension Filter Hooks................................. 67 9 Developers 69 9.1 Add Custom Scripts........................................... 69 9.2 Retrieve Data and Display on WordPress................................ 71 10 Extensions 75 10.1 Integrate Firebase Template....................................... 75 10.2 Integrate Firebase Users......................................... 75 10.3 Woocommerce.............................................. 76 10.4 JWT - Restful API............................................ 82 10.5 Realtime Google Maps.......................................... 86 10.6 BuddyPress................................................ 86 11 Usecases 87 11.1 WordPress CMS for Mobile Apps.................................... 87 12 Miscellaneous 89 12.1 Troubleshooting............................................. 89 12.2 Performance - Optmization....................................... 89 12.3 Internationalization............................................ 90 12.4 Roadmap................................................. 90 12.5 CHANGELOG.............................................. 94 ii Firebase WordPress Integration, Release 2.12.0 Last updated: Sep 26, 2021 Follow Twitter for updates. Integrate Firebase PRO is a WordPress plugin that brings Firebase features to WordPress site. E.g. sign in to WordPress and Firebase with one tap / email link or read & write to Firbase from WordPress. Demo site: https://wordpress.dalenguyen.me Download plugin: https://firebase.dalenguyen.me Video Tutorials: Youtube Playlist - Firebase WordPress Integration If you are interested in the development progress, please check the Road map. First steps 1 Firebase WordPress Integration, Release 2.12.0 2 First steps CHAPTER 1 Products • Integrate Firebase PRO- v2.18.0 • Firebase WordPress Functions- v1.2.0 (bundle with PRO plugin) • Integrate Firebase Woocommerce- v2.5.0 (Extension) • Integrate Firebase Users- v1.2.0 (Extension) • Integrate Firebase Template- v1.0.0 (Extension) 3 Firebase WordPress Integration, Release 2.12.0 4 Chapter 1. Products CHAPTER 2 First steps This guide is mostly for the PRO version, if you are using the FREE version, please refer to the WordPress.org Guide • Introductions • IF-PRO Plugin Configuration • Firebase Cloud Functions Deployment • List of Current Shortcodes • Update the Plugin 2.1 Introductions After downloading the Integrate Firebase PRO plugin, please follow the video in order to have better review of how to install and make use of this plugin in your WordPress site. The current version of the plugin works best in the situation that you want to take advantage of Firebase features without connecting with the default WordPress users database. List of features • Login to WordPress with Firebase Authentication • A headless CMS solution from WordPress • Firebase User Management in WordPress Dashboard • Save data from WordPress to Firebase • Retrieve data from Realtime / Firestore • Dynamically display Realtime / Firestore Data • and more. 5 Firebase WordPress Integration, Release 2.12.0 2.2 IF-PRO Plugin Configuration Please deactivate and remove the Free plugin before installing the Integrate Firebase PRO version. 2.2.1 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. So, if you want a more secured and advanced feature of the plugin, support the development of Integrate Firebase PRO version. 2.2.2 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. Fig. 1: 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. Fig. 2: Create a Web app 6 Chapter 2. First steps Firebase WordPress Integration, Release 2.12.0 After creating a web app for you project, you can save your credentials for later usage. 2.2.3 Installation Process After you have downloaded the plugin, uncompress the zip file in order to install the plugin file (integrate-firebase- PRO.zip). 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. After that, you can create login form, show data, show logout button. on WordPress frontend. 2.2.4 Select Firebase Services - Optimization With the new update since v1.1.0 you have to pick the services (General Tab) for optimization purposes. I have choose either Realtime / Firestore or both of them in order to interact with Firebase Database on the frontend. 2.3 Firebase Cloud Functions Deployment 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. The cloud functions is only Admin Dashboard tasks, you don’t have to deploy the cloud functions for frontend inter- actions such as login, display or retrieve data. If you want a hands-on guide, you can watch this tutorial: How to Deploy Cloud Functions 2.3.1 Prerequisite In order to deploy cloud functions, you need to have Nodejs v12 installed on your machine. On Google Cloud Platform, go to your project and make sure Cloud Buid API and Cloud Functions are enabled. And the account that you use to deploy has Service Account User Role in order to deploy cloud functions to Firebase. 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) (continues on next page) 2.3. Firebase Cloud Functions Deployment 7 Firebase WordPress Integration, Release 2.12.0 Fig. 3: Firebase Credentials 8 Chapter 2. First steps Firebase WordPress Integration, Release 2.12.0 Fig. 4: General configuration Fig. 5: Firebase Optimization 2.3. Firebase Cloud Functions Deployment 9 Firebase WordPress Integration, Release 2.12.0 (continued from previous page) 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 2.3.2 Change Your Plan to Blaze Why will I need a billing account to use the Node.js 10 runtime for Cloud Functions for Firebase? Because of updates to its underlying architecture planned for August 17, 2020, Cloud Functions for Firebase will rely on some additional paid Google services: Cloud Build, Container Registry, and Cloud Storage. These architecture updates will apply for functions deployed to the Node.js 10 runtime. Usage of these services will be billed in addition to existing pricing. Fig. 6: Firebase pricing plans 10 Chapter 2. First steps Firebase WordPress Integration, Release 2.12.0 2.3.3 Change