How to Work With Firebase Custom Claims in WordPress

If you are interested in the Integrate Firebase PRO version, read the fully updated documentation: https://firebase-wordpress-docs.readthedocs.io/

• Article 1: How to integrate Firebase to WordPress
• Article 2: How to Retrieve Data from Firestore and Display on WordPress
• Article 3: How to Work With Firebase Custom Claims in WordPress

I wrote a Plugin to integrate Firebase to WordPress a long time ago, but haven’t put a proper guide on how to use it yet. In this tutorial, I will show you how to work with Firebase custom claims in WordPress. This is the next part of How to Retrieve Data from Firestore and Display on WordPress

We already knew how to get and display data to WordPress. What if you want to display data to the user who is admin (through custom claims of course), and display something else to the others or just show nothing.

This is the original code to retrieve and display data.

(function ($) {
    'use strict';
    $(document).ready(function () {
        const showFirestoreDatabase = () => {
            const db = firebase.firestore();
            const firestoreEl = jQuery('#custom-firebase');

            // You can get the collectionName and documentName from the shortcode attribute
            const collectionName = 'users';
            const documentName = ‘document-1'

            if (collectionName && documentName) {
                const docRef = db.collection(collectionName).doc(documentName);

                docRef.get().then(doc => {
                    if (doc.exists) {
                        // console.log('Document data:', doc.data());
                        let html = '<table>';
                        jQuery.each(doc.data(), function (key, value) {
                            // You can put condition to filter your value
                            // and it won't show on the frontend
                            html += '<tr>';
                            html += `<td> ${String(key)} </td>`;
                            html += '<td>' + value + '</td>';
                            html += '</tr>';
                        })
                        html += '</table>';
                        firestoreEl.append(html)
                    } else {
                        // doc.data() will be undefined in this case
                        console.error('Please check your collection and document name in the [custom_firebase] shortcode!');
                    }
                }).catch(error => {
                    console.error('Please check your collection and document name in the [custom_firebase] shortcode!', error);
                });
            } else {
                console.warn('Please check your collection and document name in the [custom_firebase] shortcode!');
            }
        }

        showFirestoreDatabase()
    })
})(jQuery)

The showFirestoreDatabase() function will display data on WordPress. Now, we will wrap it under custom claims check.

(function ($) {
    'use strict';
    $(document).ready(function () {
        const showFirestoreDatabase = () => {
            ...
        }
        // We won't call the function directly here
        // showFirestoreDatabase()

        const getUserCustomClaims = () => {
            firebase.auth().onAuthStateChanged(function (user) {
                firebase.auth().currentUser.getIdTokenResult()
                .then((idTokenResult) => {
                    // Confirm the user is an Admin.
                    if (!!idTokenResult.claims.admin) {
                        // We will call the function here
                        showFirestoreDatabase()                        
                    } else {
                        // Show something else 
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
            });
        }

        getUserCustomClaims()
    })
})(jQuery)

After checking the user's custom claims, and make sure that it's admin. Then we will call showFirestoreDatabase() function.

This tutorial doesn't limit to retrieve data from Firestore, you can put any functions or features after checking the custom claims.

In the next update, I will update the plugin to support custom claims through shortcodes.