Using permissions

6 min

This guide explains how developers can use the hasPermission function to control access to custom features based on user permissions.

How It Works

App.js fetches the user's permissions on load using getUserAccess(ims)

The resulting userPermission object is passed down to all pages/components via props

Components use hasPermission() to check if the user has the required permissions

hasPermission function

hasPermission(userPermission, permissionResource, permissions, operator) => return BOOLEAN

Parameter	Type	Required	Description
userPermission	Object	Yes	The user's permission map (passed as prop from App.js)
permissionResource	String	Yes	Internal name of the Permission Resource (e.g., 'MyFeature')
permissions	String \\| Array	Yes	Permission name(s) to check (e.g., 'myfeature-view' or ['myfeature-view', 'myfeature-manage'])
operator	'any' \\| 'all'	No	'any' (default) = user needs at least one; 'all' = user needs all

Implementation examples

import { hasPermission } from './functions/appAccessFunctions';

// Check if user has ANY of the specified permissions
const canViewOrManage = hasPermission(userPermission, 'Reports', ['reports-view', 'reports-manage'], 'any');

// Check if user has ALL specified permissions
const hasFullAccess = hasPermission(userPermission, 'Reports', ['reports-view', 'reports-create', 'reports-delete'], 'all');

// Check if user has at least one permission in a resource
const hasAnyReportAccess = hasPermission(userPermission, 'Reports', [], 'any');

// App access (has at least one permission in any resource)
const isPublic = hasPermission(userPermission, '', [], 'any'); // Returns true

The userPermission object

The userPermission object maps Permission Resource names to arrays of permission option names. This object is generated by getUserAccess(ims) in App.js and passed to all components.

// Example userPermission object
{
    "App": ["app-permissions-view", "app-configurations-manage"],
    "Reports": ["reports-view", "reports-manage", "reports-export"],
    "SandboxTooling": ["sandbox-cleanup"]
}

Passing userPermission in to your component

// If your component is a page rendered by React Router
// it receives userPermission directly from App.js

// In App.js Routes:
<Route path="/my-feature" element={
    <MyFeature 
        ims={ims} 
        userPermission={userPermission} 
        ToastQueue={ToastQueue} 
    />
} />

// In your component:
export default function MyFeature({ ims, userPermission, ToastQueue }) {
    const canView = hasPermission(userPermission, 'MyFeature', ['myfeature-view'], 'any');
    // ...
}

Best practices

✅ Do

Check permissions at the top of your component – Define canView/canEdit early for clarity

Use descriptive variable names – canView, canEdit, canDelete, canManage

Include both view and manage in canView – Users with manage permission should also be able to view

Return early if user can't view – Don't render protected content at all if (!canView) {return <AccessDenied />;}

Hide UI elements users can't use – Don't show buttons/actions the user can't perform

❌ Don't

Don't rely solely on hiding UI – Always validate permissions on the backend too

Don't forget to pass userPermission to child components – They need it for their own checks

Don't hardcode permission checks – Use the Permission Resource names from your permission configuration