How to use role based authentication on client side reactjs?

Question

I have created 2 components one is login form and other component displays table with some random data generated through faker.js After user login, table component with some data is displayed. That component also has 2 buttons on top right corner so I want to show those buttons only if user === ADMIN if user === USER then I don't want to show those 2 buttons. How can I do this ? Should I create a separate component excluding those 2 buttons ?

Login.js:

import React, {Component} from "react";
import { Button, Form, Header } from "semantic-ui-react";
import './loginForm.css';

class LoginForm extends Component {

    state = {}

    handleChange = (e, { name, value }) => this.setState({ [name]: value })

    handleSubmit = () => {
      this.setState({ urnNumber: '', password: '' })  
      this.props.history.push('/user')
    }

    render() {
        const { urnNumber, password } = this.state 

        return(
          <Form className="formStyle" onSubmit={this.handleSubmit}>
            <Header className="title" as='h1'>Account Portal Login</Header>
            <Header className="info" as='h5'>Please login with your URN number. If you have not been assigned a
            password, you can create one below and login afterwards</Header>
            <Header className="info" as='h4'>Please login below</Header>
            <Form.Field>
              <Form.Input label="URN number" value={urnNumber} placeholder="Enter URN number" onChange={this.handleChange}/>
            </Form.Field>
            <Form.Field>
              <Form.Input label="Password" value={password} placeholder="Enter password" onChange={this.handleChange}/>
            </Form.Field>
            <Button className="loginButton">Login</Button>
          </Form>
        )
    }
};

export default LoginForm;

TableComponent.js:

const RemittancePage = () => (
    <Grid className={styles.container}>
        <Grid.Row>
            <Grid.Column width={11}>
                <Header as='h2' className={styles.title}>Remittance Page</Header>
            </Grid.Column>
            <Grid.Column floated='right' width={5}>
                <Button primary className={styles.formButton}>Remittance</Button>
                <Button primary className={styles.reportButton}>Generate Report + </Button>
            </Grid.Column>
        </Grid.Row>
        <Grid.Row>
            <Grid.Column width={16}>
                <Table celled selectable className={styles.remittanceForm}>
                    <Table.Header>
                        <Table.Row>
                            <Table.HeaderCell>ID</Table.HeaderCell>
                            <Table.HeaderCell>Name</Table.HeaderCell>
                            <Table.HeaderCell>URN number</Table.HeaderCell>
                            <Table.HeaderCell>Parishes</Table.HeaderCell>
                            <Table.HeaderCell>Remittance</Table.HeaderCell>
                        </Table.Row>
                    </Table.Header>

                    <Table.Body>
                        <Table.Row>
                            <Table.Cell>{faker.random.number()}</Table.Cell>
                            <Table.Cell>{faker.name.findName()}</Table.Cell>
                            <Table.Cell>{faker.random.number()}</Table.Cell>
                            <Table.Cell>{faker.address.streetAddress()}</Table.Cell>
                            <Table.Cell>{faker.date.weekday()}</Table.Cell>
                        </Table.Row>
                        // Some more rows 

                    </Table.Body>
                </Table>
            </Grid.Column>
        </Grid.Row>
    </Grid>
)

export default RemittancePage;

App.js:

  var user1 = {
  "number": "123",
  "role": "ADMIN"
};

var user2 = {
  "number": "456",
  "role": "USER"
};

class App extends Component {
  render() {
    return (
      <Router>
          <Switch>
              <div>
                <Route exact path="/" component={LoginForm}/>
                {/* <Route path="/user" component={RemittancePage} /> */}
                <Route path="/user" render={(user1) => <RemittancePage {...user1} />} 
                />
                <Route path="/remittanceform" component={RemittanceForm} />
              </div>
          </Switch>
      </Router>
    );
  }
}

export default App;

Screenshot: In below screenshot 2 buttons in top right should be displayed only if user == ADMIN if user === USER then I don't want to display it. How can I do this ?

Answer 1

You can just use the following structure inside of your RemittancePage jsx template:

this.props.user.permissions === 'ADMIN' ? <Grid.Column floated='right' width={5}>
                <Button primary className={styles.formButton}>Remittance</Button>
                <Button primary className={styles.reportButton}>Generate Report + </Button>
</Grid.Column> : null

Assuming you have user passed to props.

Basically, same as in plain JS. Just an inline conditional.