How to Work With Firebase Custom Claims in WordPress
Tags: firebase, wordpress, webdev, tutorial
Published: 2019-11-26 22:42:29

---
description: 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.
---

> 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](https://dev.to/dalenguyen/how-to-retrieve-data-from-firestore-and-display-on-wordpress-abj?id=199634)
+ Article 3: [How to Work With Firebase Custom Claims in WordPress](https://dev.to/dalenguyen/how-to-work-with-firebase-custom-claims-in-wordpress-4913?id= 211659)

I wrote a Plugin to [integrate Firebase to WordPress](https://github.com/dalenguyen/firebase-wordpress-plugin) 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](https://dev.to/dalenguyen/how-to-retrieve-data-from-firestore-and-display-on-wordpress-abj?id=199634)

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](https://firebase.google.com/docs/auth/admin/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.