How to prevent queries by roles

[eddyhdzg]

Any proper way to prevent triggering a query if I know in the client beforehand that the user can't make the query?

My current code

import { useFirestore, useFirestoreCollectionData } from "reactfire";
import { Project } from "types";
import { useUserRole } from "hooks";

export const adminArray = new Set([
  "admin",
  "moderator",
  "superUser",
]) as Set<UserRole>;

export default function usePrivateProjects() {
  const role = useUserRole();

  const query = adminArray.has(role) ? "projects" : " ";
  const projectsRef = useFirestore().collection(query);

  return useFirestoreCollectionData<Project>(projectsRef, {
    initialData: [],
    idField: "id",
  });
}

[eddyhdzg]

I solved it by using useSigninCheck as in #368 (comment) and a Wrapper similar to the AuthWrapper in the example folder.

A Simple hook to check if user is an admin

import { useSigninCheck } from "reactfire";
import { UserRole } from "types";
import { adminArray } from "constant";

export default function useIsAdmin() {
  const { status, data: signInCheckResult } = useSigninCheck({
    validateCustomClaims: (userClaims) => {
      return {
        hasRequiredClaims: adminArray.has(userClaims.role as UserRole),
        errors: {},
      };
    },
  });

  return { status, signInCheckResult };
}

AdminWrapper

import { CenterLoader, MessagePaper } from "components";
import { useIsAdmin } from "hooks";

export default function AdminWrapper({
  children,
  fallback = (
    <MessagePaper message="You need to be an admin to use this route" />
  ),
}: React.PropsWithChildren<{
  fallback?: JSX.Element;
}>): JSX.Element {
  const { status, signInCheckResult } = useIsAdmin();

  if (!children) {
    throw new Error("Children must be provided");
  }
  if (status === "loading") {
    return <CenterLoader />;
  } else if (
    signInCheckResult?.signedIn &&
    signInCheckResult?.hasRequiredClaims
  ) {
    return children as JSX.Element;
  }

  return fallback;
}

[jhuleatt]

Thanks for sharing your solution @eddyhdzg! It makes sense to me.

[jhuleatt]

One note is that the useSigninCheck argument object takes another field, forceRefresh, which refreshes the auth token before checking the claims.

It would look like:

useSigninCheck({
  validateCustomClaims: (userClaims) => {
    // ...
  },
  forceRefresh: true,
});

The downside of this is that it will take a little longer to check, since it needs to re-fetch the auth token from Firebase. The benefit is that if someone became an admin very recently, their current auth token may not reflect their new custom claims unless it is refreshed.

[eddyhdzg]

I doubt that we will change roles often, so the trade off would not justify it.