Auth0 Admin Role

Help
1

Sorry for the re-post - I deleted the previous post because the formatting was off, and it would not allow me to edit the question…

I have implemented Auth0 for use in our platform, and I am creating “roles” to assign to particular users. For now, I want to only create an “admin” role and assign it to users. The aim is so that I only want these particular “admins” to be able to have the ability to either view or click the “Answer” button on our forum page.

Below, is some of the code for the forum page…

return (
      <div>
        {/* Table of questions - with option to answer
      using bootstrap 'Table' component */}
        <Table striped bordered hover variant='dark' responsive>
          <thead>
            <tr>
              <th>ID</th>
              <th>Question</th>
              <th>Asked by</th>
              <th>Labels/Tags</th>
              <th>Answer</th>
              <th>Display Answers</th>
            </tr>
          </thead>
          <tbody>
            {/* within the table, take array  */}
            {this.state.questions.map((question) => {
              return (
                <tr key = {question._id}>
                  <td>{question._id}</td>
                  <td>{question.questionText}</td>
                  <td>{question.username}</td>
                  <td>{question.labels}</td>
                  <td><Button onClick={() => this.handleClickPostAnswer(question._id, question.questionText)}>Answer</Button></td>
                  <td><Button onClick={() => this.handleClickReadAnswers(question._id)}>Display</Button></td>
                </tr>
              );
            })}
          </tbody>
          {/* renders AnswersModal if this.state.displayAnswers is true */}
          <AnswersModal show={this.state.displayAnswers}/>
        </Table>
      </div>
    );

Below is the line of code that creates the Answer button. I only want this visible or be able to be clicked on for admins which I will assign as roles in Auth0.

<td><Button onClick={() => this.handleClickPostAnswer(question._id, question.questionText)}>Answer</Button></td>

Is anyone able to suggest the best way of doing this, or point me towards a resource that could help with this? Do I need to perhaps instead of roles, create rules on Auth0?

Thanks!

3

Hi @jkm151997!

For just visibility of an element, you could use a similar method to here to add logic for rendering different items based on the returned user profile -

To get the roles into the user object, you would need to also add a rule like this: Sample Use Cases: Rules with Authorization

You could then check for a certain role and render conditionally, here is a basic example based on the Profile.js view in the Auth0 React quickstart, in this case I set my custom namespace to be http://reactapp.net, but this can be any non auth0 domain and is just for avoiding name collisions and won’t be actually called by Auth0:

import React from "react";
import { Container, Row, Col } from "reactstrap";

import Highlight from "../components/Highlight";
import Loading from "../components/Loading";
import { useAuth0, withAuthenticationRequired } from "@auth0/auth0-react";


export const ProfileComponent = () => {
  const { user } = useAuth0();
  const userRoles = user && user["http://reactapp.net/roles"];
  const userHasAccess = userRoles.some(function (role) {
    return "React Admin" === role;
  });

  return (
    <Container className="mb-5">
      <Row className="align-items-center profile-header mb-5 text-center text-md-left">
        <Col md={2}>
          <img
            src={user.picture}
            alt="Profile"
            className="rounded-circle img-fluid profile-picture mb-3 mb-md-0"
          />
        </Col>
        <Col md>
          <h2>{user.name}</h2>
          <p className="lead text-muted">{user.email}</p>
        </Col>
      </Row>
      <Row>
        <Highlight>{JSON.stringify(user, null, 2)}</Highlight>
      </Row>
      <Row>
        <Col>
          <h2>Roles:{userRoles}</h2>
          {userHasAccess &&
          <h2>User has access</h2>}
        </Col>
      </Row>
    </Container>
  );
};

export default withAuthenticationRequired(ProfileComponent, {
  onRedirecting: () => <Loading />,
});

However as this is a SPA, a savvy user could still find the button, so ideally any sensitive content/functions would be behind a backend API, which would in turn validate the user’s access token for the correct roles/permissions before allowing them to actually ‘answer’.

2 Likes