What I want to achieve
display components based on user authority admin/!admin
//Everyone can see this login/register/reset
//Admin x paths
//regular users y paths
I have been having issues finding tutorials that explain properly step by step what I want to achieve I want to have an admin that has access to a different view than the other users, however the only video I found is not only outdated but in vue (Firebase Auth Tutorial) and not in react and I wasn't able to "translate" the code at some point to react so I got stuck it was about Custom Claims (is like 4 videos, there are more but the ones that explain the auth stuff was 17-21) I try to understand it but it was too complex for me also try to get into Firebase Security to try and see if I could do the admin thing but unsuccessful with that as well however someone mention well then what if you just simply add a value "isAdmin" in your firebase and set it up to true to w/e is gonna be admin and then anyone else when they register is false well that sounds simple.
Basically I want this view (Only this) for the admin which basically they can see all users orders with details:
While users can create/edit/delete "students" (their kids basically) and they can also create and view/edit/delete their own orders
FULL CODE, based on sugestion For some reason I can't do ANYTHING after trying this so I'm open to other suggestions
import React, { useEffect, useState } from "react";
import "./App.css";
import Register from "./Register";
import { auth, db } from "./firebase";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
import Login from "./Login.js";
import Inicio from "./Inicio";
import Reset from "./Reset";
import CrearEstudiante from "./CrearEstudiante";
import Estudiantes from "./ListadoEstudiantes"
import Pedidos from "./ListadoPedidos"
import CrearPedidos from "./CrearPedidos";
import AgregarLibro from "./AgregarLibro";
import AgregarAIB from "./AgregarAIB";
import AgregarOpcionales from "./AgregarOpcionales";
import Comprar from "./Comprar";
import VerPedidos from "./VerPedidos";
import UpdateProfile from "./UpdateProfile";
import EditForm from "./EditForm";
import DBLibros from "./DBLibros";
import DBDiccionarios from "./DBDiccionarios";
import DBLocal from "./DBLocal";
function App() {
const [user, setUser] = useState([]);
const [isAdmin, setIsAdmin] = useState(false);
useEffect(() => {
auth.onAuthStateChanged((authUser) => {
if (authUser) {
setUser(authUser);
} else {
setUser(false);
}
})
}, [user])
useEffect(() => {
const userDoc = db.collection('usuarios').doc(user.uid);
userDoc.get().then(doc => {
if (doc.exists) {
const tempData = [];
const data = doc.data();
tempData.push(data);
setIsAdmin(tempData[0].isAdmin)
}
});
}, [user])
useEffect(() => {
if(isAdmin === true){
console.log("I'm an admin")
console.log(isAdmin)
console.log(user.uid)
}
else {
console.log("No admin")
console.log(isAdmin)
console.log(user.uid)
}
}, [isAdmin])
return (
< div className="app" >
<Router>
<Switch>
{isAdmin && (
<>
<Route path = "/Agregar_Libros">
<Inicio user={user}/>
<AgregarLibro />
</Route>
<Route path = "/Agregar_AIB">
<Inicio user={user}/>
<AgregarAIB />
</Route>
<Route path = "/Agregar_Opcional">
<Inicio user={user}/>
<AgregarOpcionales />
</Route>
<Route path = "/DB_Libros">
<Inicio user={user}/>
<DBLibros />
</Route>
<Route path = "/DB_Diccionarios">
<Inicio user={user}/>
<DBDiccionarios />
</Route>
<Route path = "/DB_Local">
<Inicio user={user}/>
<DBLocal />
</Route>
</>
)}
{!isAdmin && (
<>
<Route path = "/Inicio">
<Inicio user={user}/>
<Estudiantes user={user} />
<Pedidos user={user} />
</Route>
<Route path = "/Profile">
<Inicio user={user}/>
<UpdateProfile user={user}/>
</Route>
<Route path = "/Editar_Estudiante">
<Inicio user={user}/>
<EditForm user={user}/>
</Route>
<Route path = "/Crear_Estudiante">
<Inicio user={user}/>
<CrearEstudiante user={user}/>
</Route>
<Route path = "/Crear_Pedidos">
<Inicio user={user}/>
<CrearPedidos user={user}/>
</Route>
<Route path = "/Comprar">
<Inicio user={user}/>
<Comprar user={user}/>
</Route>
<Route path = "/Ver_Pedidos">
<Inicio user={user}/>
<VerPedidos user={user}/>
</Route>
</>
)}
<Route path = "/Register">
<Register/>
</Route>
<Route path = "/Reset">
<Reset />
</Route>
<Route path = "/">
<Login/>
</Route>
</Switch>
</Router>
</div >
);
}
export default App;
When I have it like this I can't see the Register, Reset or Login ( in this case Path = "/") it pretty much depends in the order in which I have set up the routes which is weird.
