Add custom scopes in token with RBAC

I have implemented a Sample POC with RBAC where I have an API application and React SPA application.

I have defined 2 roles

  1. Organizer : Scopes => event:create event:delete event:update event:view
  2. Participant: Scopes => event:view event:register

I have also enabled MFA as there are some actions like deactivateAccount which may need to request token with additional scope which is this case “account:deactivate”.

Current Implementation
I create a token using MFA flow and pass the additional scope to it.

Problem
There is a rule which is defined in rule template which adds permissions assigned to role in token but it also filters out the requestedToken by using

var filteredScopes = requestScopes.split(’ ').filter(el => el.indexOf(“:”) > 0); // this removes the additional scopes requested by user.

As these scopes are required by API to allow the deactivate operation we made changes to above rule by adding scopes requested by an application to the token by using a clientId or auth0.domain.

ClientID seems to be insecure as it is exposed in the browser so we use the domain.

Is there any problem related to security as we are adding scopes which are requested by Client SPA.

Also, the client needs to keep information about the scopes which is in my opinion, not a good way of defining it.

Sample Application can be found on GitHub - kailashyogeshwar85/auth0-rbac-example: Implementing RBAC with auth0 React Sample

Also we wish to provide integration support for third party apps how can we securely provide access to those applications and what scopes should be exposed to third party apps.