How to efficiently pass permissions that control view and access of specific front-end elements from backend to the SPA using JWT

access-controlauthorizationjwtpermissions

I would like to introduce permissions based access control in my Single Page Application (SPA) front-end which authenticates the user with token based authentication (JWT).

Permission Requirement:

In my SPA, each required (html) element is mapped to a permission and depending on the availability of the user permission, the element is shown or hidden. Multiple elements can be mapped to the same permission.

Number of permissions: ~100

The problem I need to solve is:

How to efficiently pass permissions that control view and access of
specific front-end elements from backend to the SPA.

I am thinking about two possible approaches with different options on how to implement this:

Approach 1

It seems that in almost all guides and examples on permission based authentication, the permissions are included within the jwt token:

  1. User logs in the web app

  2. The user is authenticated and the server returns a jwt token to the SPA.

    Option A

    The jwt token will contain one claim per permission.

    Option B

    The jwt token will contain one claim that will have as a value all user permissions comma separated or structured.

  3. The SPA parses the jwt token and gets the permissions.

Approach 2

The above solution does not sound efficient from a network traffic perspective so here is the second approach:

  1. User logs in the web app
  2. The user is authenticated and the server returns a jwt token to the SPA.
  3. As soon as the jwt is retrieved successfully, the client requests the permissions of the user in a separate request.
  4. Once the permissions are retrieved, they are cached in the browser session.

Questions:

  • Are JWT claims well suited for passing users permissions?
  • Wouldn't 100 claims be a large size to be passed around in a token?
  • Do you see any issues with the second approach except from the drawback of having to validate the cache if the user permissions change?

Best Answer

Imho you should opt for the more secure approach 1 - option A (see why) and reduce the permission count by creating groups and leverage the possibility of flags.

The client could have:

const accessMode = Object.freeze({
  none: 0,
  execute: 1,
  write: 2,
  read: 4
});

And combine permissions:

file.accessMode = accessMode.read | accessMode.write;

The server would issue:

Claims.FileAccess: 6

Or for TypeScript see FileAccess example here: https://www.typescriptlang.org/docs/handbook/enums.html#computed-and-constant-members

Related Topic