Permission Based Access Control with JWT

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?