How to render a page if the role is equal to "admin"?

Question

I am currently working on displaying different components that depends on the documents role field. I already mapped the usersList from the firestore.

What do i need is to check if the logged in email and password and the roles are equals to "admin" then i will render the specific component for them.

This is my firebase collection

the pages who wanted to be rendered is Admin and Guest

[

My useEffect

Answer 1

As suggested by @Harry , Then you need to create two components admin and guest which i think you probably have, i can see in the screenshot you have shared. Now as you have to get data in the console, using that data just put if-else logic to render the admin/guest component like below.

firebase.auth().currentUser.getIdTokenResult()
  .then((idTokenResult) => {
     // Confirm the user is an Admin.
     if (!!idTokenResult.claims.admin) {
       // Show admin UI.
       showAdminUI();
     } else {
       // Show regular user UI.
       showRegularUI();
     }
  })
  .catch((error) => {
    console.log(error);
  });

For more information on the above can refer to stack overflow link and firebase documentation