Vfrdtyky

My web application uses authentication through firebase. I have an appbar which shows buttons based if an user is logged in or not. I want to show another button on the appbar if that user is an admin. I am wondering if it is possible to use a user's uid to make them an admin. Below is my code so far.

import React, { Component } from 'react';

import PropTypes from 'prop-types';

import { withStyles } from '@material-ui/core/styles';

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

import AppBar from '@material-ui/core/AppBar';

import Toolbar from '@material-ui/core/Toolbar';

import Typography from '@material-ui/core/Typography';

import Button from '@material-ui/core/Button';

import logIn from '../../auth/login.js'

import logOut from '../../auth/logout.js'

import { Link } from 'react-router-dom'

import profilePage from '../pages/profilePage'

import homePage from '../pages/homePage'

import requestService from '../pages/requestService'

import requestedServices from '../pages/requestedServices'

import { Route } from 'react-router-dom';

import firebase, { auth, provider } from '../../config/firebaseConfig.js'







// All the following keys are optional.

// We try our best to provide a great default value.

const theme = createMuiTheme({

  typography: {

  useNextVariants: true,

  },

  palette: {

    primary: {

      main : '#196f3d'

    },

    secondary: {

      main : '#f7f9f9'

    },

    // error: will use the default color

  },

});



const styles = {

  root: {

    flexGrow: 1,

  },

  grow: {

    flexGrow: 1,

  },



};



class ButtonAppBar extends Component {

  static defaultProps = {

    classes: PropTypes.object.isRequired,

  };



  state = { isLoggedIn : false }

  state = { isAdmin : false }

  componentDidMount = () => {

    firebase.auth().onAuthStateChanged(user => {

      this.setState({ isLoggedIn: !!user })

      this.setState({ isAdmin : firebase.auth().user.uid='8uhMGWgWZENwT7S2YFECOlSFrHD2'})

      console.log("user", user)

    })



  }





  render()  {

    const { classes } = this.props;

    return (

      <MuiThemeProvider theme={theme}>

      <div className={classes.root}>

        <AppBar position="static" color='primary' >

          <Toolbar>

          <Typography variant="h5" color="secondary" className={classes.grow}>

              Greene Dog Walking

            </Typography>

            {this.state.isAdmin ? (

              <div>

              <Link to={'./requestedservices'}>

                <Button color="secondary">Requested Services</Button>

              </Link>

              </div>

            ) : (





            ) }





            {this.state.isLoggedIn ? (

              <div>

              <Link to={'./'}>

                <Button color="secondary">Home</Button>

              </Link>

              <Link to={'./service'}>

                <Button color="secondary">Request Service</Button>

              </Link>

              <Link to={'./requestedservices'}>

                <Button color="secondary">Requested Services</Button>

              </Link>

              <Link to={'./profile'}>

                <Button color="secondary">Profile</Button>

              </Link>

              <Button onClick={logOut} color="secondary">Logout</Button>

              </div>

              ) : (

              <div>

              <Link to={'./'}>

                <Button color="secondary">Home</Button>

              </Link>

              <Button onClick={logIn} color="secondary">Login</Button>

              </div>

            )  }

          </Toolbar>

        </AppBar>

      </div>

      </MuiThemeProvider>

    );

  }

}



export default withStyles(styles)(ButtonAppBar);

I think your code is correct if the application only has 1 administrator but isn't it better to store user role in the firebase instead of deciding the admin state in the application?

User entity has role attribute so you can decide he/she is admin by checking the role attribute

this.setState({ isAdmin : firebase.auth().role='admin'})

As Eric points out, this method works if you have one user who is an administrator, but keep in mind it's not secure. If someone could take apart the app, they could find that code and easily get around it. If your purpose is simply to hide a tab for a better user experience, then that works fine.

Instead, I'd recommend controlling access via custom claims. I made a video about it that you can check out here. There's also a blog post, a codelab, and a getting started guide in the documentation.

An example from the guide can give you an idea of how this looks in JS:

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);

  });