Need a better approach to handle roles, permissions and calling Management API from the frontend

So, I need to assign admin role to whitelisted users.
I created the Role, the added a post login script to assign the role to that user.
But when I get to add permissions to the role, I was asked to create an API and add permissions there.
Created an API, added permissions, I called one read:users.
I know it’s not as easy as I thought, I ended up settings a M2M applications, linked it with the management API and gave it one permission : read:users.
Now on my next js ssr page, I send a request to get the token from the M2M app.

 const res = await fetch(
      "my-auth0-domain/oauth/token",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        body: new URLSearchParams({
          grant_type: "client_credentials",
          client_id: "M2M clientId",
          client_secret:
            "M2M clientSecret",
          audience: "my-auth0-domain/api/v2/",
        }),
      }
    );
    const data = await res.json();

this code will return a token that I can use to access the mangment API with this request :

   const usersRes = await fetch(
      "my-auth0-domain/api/v2/users",
      {
        method: "GET",
        headers: {
          Authorization: `Bearer ${data.access_token}`,
        },
      }
    );

works fine , I get the users, if I try to get the roles as an example I get an error :

 message: 'Insufficient scope, expected any of: read:roles',

which is expected and great!
I wanted to handle it using roles and assign permission to that role , from the Auth0 dashboard, but I did not figure it out.
If this approach is valid let me know.
Thanks :slight_smile: