Dont understand SPA with Custom API and scopes/permissions

General
#1

I need help understanding the concept of a custom API. I created a SPA application and added 2 users. With a rule I added the role user or admin, based on the email adress.

Now in my SPA I login, authorize, get a jwt and send it to my rest API. In the rest API I verify the jwt and based on the user role I allow the user to access a route or not. That works.

I do a webauth like this:

    this.auth0 = new WebAuth({
        clientID: process.env.REACT_APP_AUTH_CLIENT_ID,
        domain: process.env.REACT_APP_AUTH_DOMAIN_ADDRESS,
        responseType: 'token id_token',
        redirectUri: process.env.REACT_APP_AUTH_REDIRECT_URL,
        audience: `https://${process.env.REACT_APP_AUTH_DOMAIN_ADDRESS}/userinfo`,
        scope: 'openid email profile',
    });

The thing I dont understand are scopes and permissions and what the use of a Custom API is. I created an API on the dashboard. Now I tried to the same thing but with the audience like my new api identifier:

audience=https://mynewapiidentifier.com

Now I get an access and id token again but the access token is much longer. when I decode it I see that I have something like this in it:

“permissions”: [
“create:posts”,
“delete:posts”,
“read:admin”,
“read:posts”
]

But what would I do now with an authorization like this that I wouldnt do without using the custom api? What is the whole idea of having the custom api when I could just verify my jwt in the backend and based on a role I set in a javascript rule allow access to a route or not.

Can someone explain this to me?