Snippet

BigInt Bitmask Evaluation for Multi-Tenant Permission Gates

Leverages BigInt primitive bitwise bitmasks to perform arbitrary-precision flag comparisons beyond JavaScript's 32-bit bitwise integer limit for fine-grained permission UI gating.

snippet.js

javascript

import React, { createContext, useContext, useMemo } from 'react';
 
const PERMISSIONS = {
  READ_ANALYTICS: 1n << 0n,
  WRITE_SETTINGS: 1n << 32n,
  EXECUTE_DEPLOY: 1n << 64n
};
 
const AuthContext = createContext(0n);
 
export function PermissionGate({ requiredBit, children }) {
  const userFlags = useContext(AuthContext);
  const hasAccess = useMemo(() => {
    return (userFlags & requiredBit) === requiredBit;
  }, [userFlags, requiredBit]);
 
  return hasAccess ? <>{children}</> : null;
}

react

Breakdown

WRITE_SETTINGS: 1n << 32n,

Uses BigInt literals (n-suffix) and left shift to define flags higher than 32 bits.

return (userFlags & requiredBit) === requiredBit;

Performs bitwise AND operation on BigInt primitives to evaluate permission bit masks.

const hasAccess = useMemo(() => {

Memoizes the evaluation to avoid recalculating complex bitmask checks on un-related renders.

Previous snippet Next snippet

More Expert JavaScript exercises →

BigInt Bitmask Evaluation for Multi-Tenant Permission Gates

Related