error page show if not staff

src/react/pages/AppPage.tsx

@@ -1,7 +1,7 @@
 import { AppMain } from "../AppMain"
 import { firebase } from "../utils"
 import { useEffect } from "react"
-import { useFirebaseUserInfo } from "../utils/query";
+import { useFirebaseUserInfo, useUserProfile } from "../utils/query";
 import { AppBar } from "../components/AppBar";
 import { UserInfoPage } from "./app/UserInfoPage";
 import { EmailVerificationPage } from "./app/EmailVerificationPage";
@@ -19,6 +19,7 @@ export const AppPage = () => {
     const { user, hasLoaded } = useFirebaseUserInfo()
     const { currentPage, navigate } = useAppRouter()
     const emailVerified = firebase.auth.currentUser?.emailVerified ?? false
+    const this_user = useUserProfile()
 
 
     useEffect(() => {
@@ -27,10 +28,14 @@ export const AppPage = () => {
                 location.href = "/login"
             }
             if (user && !emailVerified && currentPage !== "verify-email") {
-                navigate("verify-email")
+                location.href = "/"
             }
         }
-    }, [user, hasLoaded])
+        if (this_user.isFetching && this_user.data?.role != "staff"){
+            navigate("not-allowed")
+        }
+        console.log(this_user)
+    }, [user, hasLoaded, this_user.isFetching])
 
     return <div className="flex flex-col h-full w-full justify-start" style={{minHeight: "100vh"}} >
         <AppBar></AppBar>
@@ -45,6 +50,7 @@ export const AppPage = () => {
                         currentPage == "qrscan" ? <QRScan />:
                         currentPage == "leaderboard" ? <LeaderBoard /> :
                         currentPage == "quiz-info" ?  <QuizInfo /> : 
+                        currentPage == "not-allowed"? <div className="text-2xl">You are not allowed to access this page</div> :
                         "Loading..."
                     }
                 </Container>

src/react/pages/app/QRScan.tsx

@@ -8,15 +8,15 @@ import { FiCameraOff } from "react-icons/fi"
 import { useState } from "react"
 import { Space } from "@mantine/core"
 import { useForm } from "@mantine/form"
-import { useUserProfile } from "../../utils/query"
+import { useUserProfileById } from "../../utils/query"
 import { addPointsToUsers, colorConverter } from "../../utils"
 import { FaTrashAlt } from "react-icons/fa";
 import { notifications } from "@mantine/notifications"
 import { useQueryClient } from "@tanstack/react-query"
 import { FaCheck } from "react-icons/fa";
 
 const UserRowInfo = ({ uid, removeUser }: { uid: string, removeUser: (uid: string) => void }) => {
-    const user = useUserProfile(uid)
+    const user = useUserProfileById(uid)
     return <>
         <div
             className="flex justify-between items-center p-2 border rounded-xl mb-3 sm:flex-row flex-col"

src/react/pages/app/QuizInfo.tsx

@@ -2,7 +2,7 @@ import { Button, Checkbox, Input, Radio } from "react-daisyui"
 import { IoMdArrowRoundBack } from "react-icons/io"
 import { TitleBar } from "../../components/TitleBar"
 import { useAppRouter } from "../../utils/store"
-import { useQuizzes, useUserProfile } from "../../utils/query";
+import { useQuizzes, useUserProfileById } from "../../utils/query";
 import { BsQrCodeScan } from "react-icons/bs";
 import { useDisclosure } from "@mantine/hooks";
 import { Modal } from '@mantine/core';
@@ -74,7 +74,7 @@ export function QuizInfo() {
 
 const QuizDetails = ({ quiz }: { quiz: Quiz }) => {
 
-    const createdBy = useUserProfile(quiz.creatorUid)
+    const createdBy = useUserProfileById(quiz.creatorUid)
     const [showSecrets, setShowSecrets] = useState(false)
     const quizzes = useQuizzes(); //Useful only for checking cache state
     const [quizToggled, setQuizToggled] = useState(false)

src/react/utils/index.ts

@@ -203,6 +203,21 @@ export const getQuizList = async () => {
     return JSON.parse(data) as Quiz[];
 }
 
+
+export const getUserProfile = async () => {
+    const func = httpsCallable(firebase.functions, "getUserProfile");
+
+    const response = await func();
+    const rawData = response.data;
+    const { error, data } = JSON.parse(rawData as string);
+
+    if (error) {
+        throw data.error;
+    }
+
+    return JSON.parse(data) as UserProfile;
+}
+
 export const getUserProfileById = async (uid: string) => {
     const func = httpsCallable(firebase.functions, "getUserProfileById");
 

src/react/utils/query.ts

@@ -1,6 +1,6 @@
 import { onAuthStateChanged } from "firebase/auth"
 import { useEffect, useState } from "react"
-import { firebase, getQuizList, getUserProfileById } from "."
+import { firebase, getQuizList, getUserProfile, getUserProfileById } from "."
 import { useQuery } from "@tanstack/react-query"
 
 
@@ -25,7 +25,14 @@ export const useQuizzes = () => {
     })
 }
 
-export const useUserProfile = (uid: string) => {
+export const useUserProfile = () => {
+    return useQuery({
+        queryKey: ["user-profile"],
+        queryFn: getUserProfile
+    })
+}
+
+export const useUserProfileById = (uid: string) => {
     return useQuery({
         queryKey: ["user-profile", uid],
         queryFn: () => getUserProfileById(uid)

src/react/utils/store.ts

@@ -2,7 +2,7 @@
 
 import { create } from 'zustand'
 
-export type AppPage = "app" | "verify-email" | "profile" | "add-quiz" | "leaderboard" | "qrscan" | "quiz-info";
+export type AppPage = "app" | "verify-email" | "profile" | "add-quiz" | "leaderboard" | "qrscan" | "quiz-info" | "not-allowed";
 
 type AppRouterStore = {
     currentPage: AppPage,