The useAccessControl() hook is used to check if the user has a specific permission or has reached a specific quota programmatically from the frontend.

​
Returns

An object with the following properties:
​
isLoading
boolean
A boolean indicating whether the authentication state is still being loaded.
​
permissions
Permission[]
The list of permissions the user has.
​
quotas
Quota[]
The list of quotas the user has including the limit, the usage and remaining credit.
​
hasPermission
function(permissionName: string | string[]) => boolean
A function to check if the user has a specific permission.
​
hasRemainingQuota
function(quotaName: string | string[]) => boolean
A function to check if the user has remaining quota for a specific quota.

​
Examples

​
List user’s permissions

import { useAccessControl } from '@kobbleio/next/client';

export default function MyComponent() {
    const { isLoading, permissions } = useAccessControl();

    if (isLoading) {
        return <div>Loading...</div>;
    }

    return (
        <div>
            <h1>Permissions</h1>
            <ul>
                {permissions.map(permission => (
                    <li key={permission.name}>{permission.name}</li>
                ))}
            </ul>
        </div>
    );
}

​
List user’s quotas usage

import { useAccessControl } from '@kobbleio/next/client';

export default function MyComponent() {
    const { isLoading, quotas } = useAccessControl();

    if (isLoading) {
        return <div>Loading...</div>;
    }

    return (
        <div>
            <h1>Quotas</h1>
            <ul>
                {quotas.map(quota => (
                    <li key={quota.name}>
                        <strong>{quota.name}</strong>: {quota.usage} / {quota.limit}
                    </li>
                ))}
            </ul>
        </div>
    );
}

​
Check if user has a specific permission

import { useAccessControl } from '@kobbleio/next/client';

export default function MyComponent() {
    const { hasPermission } = useAccessControl();

    return (
        <div>
            {hasPermission('my-permission') ? (
                <p>User has permission</p>
            ) : (
                <p>User does not have permission</p>
            )}
        </div>
    );
}

​
Check if user has remaining quota

import { useAccessControl } from '@kobbleio/next/client';

export default function MyComponent() {
    const { hasRemainingQuota } = useAccessControl();

    return (
        <div>
            {hasRemainingQuota('my-quota') ? (
                <p>User has remaining quota</p>
            ) : (
                <p>User does not have remaining quota</p>
            )}
        </div>
    );
}