---
title: Using permissions
slug: tvemea-app-builder-template/using-permissions
docTags: 
createdAt: 2025-12-04T10:13:34.411Z
---

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

## How It Works

1. **App.js** fetches the user's permissions on load using **getUserAccess(ims)**
2. The resulting **userPermission** object is passed down to all pages/components via props
3. Components use **hasPermission()** to check if the user has the required permissions

## hasPermission function

:::CodeblockTabs
Function signature

```nodejs
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

:::CodeblockTabs
View vs Edit Permissions

```nodejs
export default function Reports({ userPermission }) {
    // Can view if they have EITHER view OR manage permission
    const canView = hasPermission(userPermission, 'Reports', ['reports-view', 'reports-manage'], 'any');
    
    // Can edit only if they have manage permission
    const canEdit = hasPermission(userPermission, 'Reports', ['reports-manage'], 'any');

    if (!canView) {
        return <AccessDenied />;
    }

    return (
        <div>
            <h1>Reports</h1>
            {canEdit && <Button variant="accent">Create Report</Button>}
            {/* View-only content here */}
        </div>
    );
}
```

Additional examples

```nodejs
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.

:::CodeblockTabs
Example object

```nodejs
// 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

:::CodeblockTabs
Page-level component (routed)

```nodejs
// 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');
    // ...
}
```

Child component (through props)

```nodejs
// Pass userPermission down from parent to child components

// Parent component
export default function Reports({ userPermission, ...props }) {
    return (
        <div>
            <ReportsList userPermission={userPermission} />
            <ReportActions userPermission={userPermission} />
        </div>
    );
}

// Child component
function ReportActions({ userPermission }) {
    const canEdit = hasPermission(userPermission, 'Reports', ['reports-manage'], 'any');
    // ...
}
```
:::

##

## Best practices

✅ **Do**

1. **Check permissions at the top of your component** – Define canView/canEdit early for clarity
2. **Use descriptive variable names** – canView, canEdit, canDelete, canManage
3. **Include both view and manage in canView** – Users with manage permission should also be able to view
4. **Return early if user can't view** – Don't render protected content at all
   `if (!canView) {return <AccessDenied />;}`
5. **Hide UI elements users can't use** – Don't show buttons/actions the user can't perform

****

**❌ Don't**

1. **Don't rely solely on hiding UI** – Always validate permissions on the backend too
2. **Don't forget to pass userPermission to child components** – They need it for their own checks
3. **Don't hardcode permission checks** – Use the Permission Resource names from your permission configuration