Display user status with custom claims in a table-CodePudding

I created an admin ui in react where a list of users is displayed and a column called "Role" displays the custom claims of the user (admin in this case)

If a user has the "admin" custom claim, it displays "Admin" in the cell, otherwise, it displays "User"

  const rows =
    users &&
    users?.data.map(user => ({
      name: user.displayName || '',
      email: user.email,
      uid: user.uid,
      role: 'User',
    }));

role property is hard-coded here.

Here I am looping over users which comes from the list all users function:

// List all users
exports.listUsers = functions.https.onCall((data, context) => {
  return admin
    .auth()
    .listUsers()
    .then(listUsersResult => {
      const result = listUsersResult.users.map(user => {
        const { uid, email, displayName } = user;
        return { uid, email, displayName };
      });

      return result;
    })
    .catch(error => {
      return { error: 'Error listing users' };
    });
});

How can I integrate this function so that it displays the correct status in the table?

// Lookup the user associated with the specified uid.
getAuth()
  .getUser(uid)
  .then((userRecord) => {
    // The claims can be accessed on the user record.
    console.log(userRecord.customClaims['admin']);
  });

How can I call this for each row in the table? Can the claims be accessed from the same list all users function?

CodePudding user response：

Each user in listUsersResult is a UserRecord that has a customClaims property. You can add that in your result as shown below:

const result = listUsersResult.users.map(user => {
  const { uid, email, displayName, customClaims, } = user;
  return { uid, email, displayName, customClaims };
});

customClaims would be a map but can be undefined if you have not set any claims yet.