Designating a user as an admin and making a Navigation Link only visible to them using React and Firebase

Viewed 56

I'm building a webapp using React for a project. I'm using Firebase authentication and real time database to store my users. I would like to designate one specific user as an admin and make the admin page on my NavBar only visible to that user. However, I'm having trouble either getting the user from the database or using the hidden JSX attribute. Any help would be appreciated, thanks.

I have marked the sections of importance with //here

Firebase file

import firebase from "firebase";
import 'firebase/auth';
import 'firebase/database';

const config = {
  ...
  };

  class Firebase {
    constructor() {
      firebase.initializeApp(config);
      firebase.analytics();

      this.auth = firebase.auth();
      this.db = firebase.database();
    }

    doCreateUserWithEmailAndPassword = (email, password) =>
    this.auth.createUserWithEmailAndPassword(email, password);

    doSignInWithEmailAndPassword = (email, password) =>
    this.auth.signInWithEmailAndPassword(email, password);

    doSignOut = () => this.auth.signOut();

    doPasswordReset = email => this.auth.sendPasswordResetEmail(email);
 
    doPasswordUpdate = password =>
    this.auth.currentUser.updatePassword(password);

    user = uid => this.db.ref(`users/${uid}`);

    adminuser = () => this.db.ref(`users/vU6rm45ZTyQFEkX2FgkuqOjauuO2`) //here 

    users = () => this.db.ref('users');

  }

  export default Firebase;

Navigation file

import React from "react";
import {
    Nav,
    NavLink,
    Bars,
    NavMenu,
    NavBtn,
    NavBtnLink
} from './NavBar'
import SignOutButton from '/Users/dogualemdar/Desktop/Coding/kocmun/src/components/SignOut/index.js'
import * as ROUTES from './routes';
import Firebase from "../Firebase";

const Navigation = ({ authUser }) => (
  <div>{authUser ? <NavigationAuth /> : <NavigationNonAuth />}</div>
);

const NavigationAuth = () => (
    <>
    <Nav>
      <NavLink to = {ROUTES.HOME}>
       <img src = "http://kocmun.mydp.tech/kocmun_icon.png" alt= "Not Found" width = "75" height = "75"/>
      </NavLink>
      <Bars />
      <NavMenu>
          <NavLink to = {ROUTES.PROFILE} activeStyle>
              Profile
          </NavLink>
          <NavLink to = {ROUTES.ADMIN} activeStyle hidden = {!Firebase.adminuser} > //here
              Admin
          </NavLink>
          <NavLink to = {ROUTES.PWFORGET} activeStyle>
              Reset Password
          </NavLink>
      </NavMenu>
      <NavBtn>
        <NavBtnLink to = {ROUTES.HOME}>
          <SignOutButton /> 
        </NavBtnLink>
      </NavBtn>
    </Nav>
  </>
  );

const NavigationNonAuth = () => (
    <>
      <Nav>
        <NavLink to = {ROUTES.HOME}>
         <img src = "http://kocmun.mydp.tech/kocmun_icon.png" alt= "Not Found" width = "75" height = "75"/>
        </NavLink>
        <Bars />
        <NavMenu>
            <NavLink to = {ROUTES.ABOUT} activeStyle>
                About
            </NavLink>
            <NavLink to = {ROUTES.ENTRY} activeStyle>
                Entry Requirements
            </NavLink>
            <NavLink to = {ROUTES.CONTACTUS} activeStyle>
                Contact Us
            </NavLink>
        </NavMenu>
        <NavBtn>
            <NavBtnLink to = {ROUTES.SIGNIN}> Sign In </NavBtnLink>
        </NavBtn>
      </Nav>
    </>
);

export default Navigation;
0 Answers
Related