Lets take an abstract domain where user can create groups, invite other users and assign permissions within these groups.

Schematically it looks like this

[
  {
    "groupId": 1,
    "name": "Group 1",
    "users": [
       { "id": 1, "name": "User 1", "permissions": ["A", "B", "C"] }, // same
       { "id": 2, "name": "User 2", "permissions": ["A", "B"] }
       { "id": 3, "name": "User 3", "permissions": ["C"] }
    ]
  },
  {
    "groupId": 2,
    "name": "Group 2",
    "users": [
       { "id": 4, "name": "User 4", "permissions": ["A", "B", "C"] },
       { "id": 5, "name": "User 5", "permissions": ["A", "B"] }
       { "id": 1, "name": "User 1", "permissions": ["C"] } // same
    ]
  }
]

There are 5 users in the app (from 1 to 5). Each of the users has permissions within their group (A, B, C).

The question is: Where to store this permission on the web-client?

I use React.js + Node.js and manage my authentication via JWT. Is it okay to have an object in user's JWT which stores permissions per group. Something like this

Fake-JWT

{
  "userId": 1,
  "groups": [ 
    { "groupId": 1, "permissions": ["A", "B", "C"]  },
    { "groupId": 2, "permissions": ["C"]  }
  ]
}

I also expects to update user permissions on the fly without logging out the user

Any suggestion of how to do it correctly?