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;