maxAgeInSeconds

0

UserRoles.UserRoleClaim.validators.includes("admin")

UserRoles.UserRoleClaim.validators.includes("admin", 0)

maxAgeInSeconds

maxAgeInSeconds

ts
import { useEffect, useMemo } from "react";
import { refreshPermissionsClaim } from "shared/session.telefunc";
import Session, {
  SessionAuth,
  useSessionContext,
} from "supertokens-auth-react/recipe/session";
import { PermissionClaim } from "supertokens-auth-react/recipe/userroles";

export type ProtectedProps = {
  permission?: string;
  fallback?: React.ReactNode;
  disableRedirect?: boolean;
};

//Avoids fetching multiple times when multiple Protected components mount
let refreshingPromise: Promise<void> | null = null;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
PermissionClaim.refresh = async () => {
  if (refreshingPromise) {
    return refreshingPromise;
  }
  console.log("refreshing permissions claim");
  refreshingPromise = refreshPermissionsClaim();
  const result = await refreshingPromise;
  refreshingPromise = null;
  return result;
};

export const Protected = ({
  children,
  permission,
  fallback = null,
  disableRedirect = false,
}: {
  children: React.ReactNode;
} & ProtectedProps): JSX.Element => {
  const extraValidators: Session.SessionClaimValidator[] = useMemo(() => {
    const v = [];
    if (permission) {
      v.push(PermissionClaim.validators.includes(permission, 0.2));
    }
    return v;
  }, [permission]);

  const sessionContext = useSessionContext();

  useEffect(() => {
    const listener = () => {
      for (const validator of extraValidators) {
        if (
          !sessionContext.loading &&
          validator.shouldRefresh(sessionContext.accessTokenPayload, {})
        ) {
          validator.refresh({});
        }
      }
    };
    window.addEventListener("focus", listener);
    return () => {
      window.removeEventListener("focus", listener);
    };
  }, [extraValidators, sessionContext]);

  return (
    <SessionAuth
      doRedirection={!disableRedirect}
      overrideGlobalClaimValidators={(globalValidators) => [
        ...globalValidators,
        ...extraValidators,
      ]}
    >
      <InvalidClaimHandler fallback={fallback}>{children}</InvalidClaimHandler>
    </SessionAuth>
  );
};

const InvalidClaimHandler = (
  props: React.PropsWithChildren<{
    fallback?: React.ReactNode;
  }>
) => {
  const sessionContext = useSessionContext();
  if (sessionContext.loading) {
    return <></>;
  }

  if (sessionContext.invalidClaims.length) {
    return <>{props.fallback}</>;
  }

  return <div>{props.children}</div>;
};

ts
import { getSession } from "server/auth/session";
import UserRoles from "supertokens-node/recipe/userroles";

export const refreshPermissionsClaim = async () => {
  const session = getSession();
  await session.fetchAndSetClaim(UserRoles.PermissionClaim);
};

getSession();