How To Setup Custom Claims In My React Website For a Login Page-CodePudding

I want to set up custom claims to a certain number of users let's say 5 users would be admins on my website. I want these 5 users to be able to log in through the login page which would redirect them to the dashboard.

but I still don't fully understand the concept of the custom claims and how to use them and firebase documentation is limited with examples.

In their example they show that I can pass a uid that I want to assign a custom claim to, but how is this supposed to be a variable when i want certain users uid's from my firestore database Users collection to be admins and have a custom claim, in other words, where would I put this code or how would I assign a custom claim to more than one user at a time and how and where would this code be executed.

if anyone can give me an example of how I would make this work.

here is what I did:

created a firebaseAdmin.js file:

 var admin = require("firebase-admin");
 // lets say for instance i want these two users to be admins
//2jfow4fd3H2ZqYLWZI2s1YdqOPB42
//2jfow4vad2ZqYLWZI2s1YdqOPB42 what am i supposed to do?
    admin
      .auth()
      .setCustomUserClaims(uid, { admin: true })
      .then(() => {
        // The new custom claims will propagate to the user's ID token the
        // next time a new one is issued.
      });

I honestly don't know what to do from here.

CodePudding user response：

Custom Claims can only be set from a privileged server environment via the Firebase Admin SDK. The easiest ways are either using a Node.js script (running the Admin SDK) or a Cloud Function (which also uses the Admin SDK).

Let's look at the example of a Callable Cloud Function that you call from your front-end (and in which you could check the UID of the user who is calling it, i.e. a Super Admin).

exports.setAdminClaims = functions.https.onCall(async (data, context) => {

    // If necessary check the uid of the caller, via the context object

    const adminUIDs = ['2jfow4fd3H2ZqYLWZI2s1YdqOPB42', '767fjdhshd3H2ZqYLWZI2suyyqOPB42'];

    await Promise.all(adminUIDs.map(uid => admin.auth().setCustomUserClaims(uid, { admin: true })));
    
    return { result: "Operation completed" }
    
});

A Node.js script would be similar:

#!/usr/bin/node
const admin = require('firebase-admin');

admin.initializeApp({
    credential: admin.credential.cert(".....json") // See remark on the private key below
});

const adminUIDs = ['2jfow4fd3H2ZqYLWZI2s1YdqOPB42', '767fjdhshd3H2ZqYLWZI2suyyqOPB42'];

Promise.all(adminUIDs.map(uid => admin.auth().setCustomUserClaims(uid, { admin: true })))
    .then(() => {
        console.log("Operation completed")
    })

You must generate a private key file in JSON format for your service account , as detailed in the doc.

Then, when the Claims are set, you can access these Claims in your web app, and adapt the UI (or the navigation flow) based on the fact the user has (or not) the admin claim. More detail here in the doc.