What prevents scope tampering?

I’m struggling to understand how to securely use Auth0 to deliver tokens to my private API and handles scope/permissions this way.

I have create an API on the dashboard with a couple of scopes , user and admin. In my Angular4 app, as soon as the users validates their credentials using auth0-js webauth().client.login I want to silently authenticate the user to my API with their matching scope.
I am using again webauth.client.login to do so :

this.lock.getWebAuth().client.login({ realm: "Username-Password-Authentication", username: email, password: password, scope: "user", audience: "https://company.com/api" }

All this works but I don’t understand how it would prevent my users to change their scope and access an admin level by just opening their Developer tools , replaying the https://company.auth0.com/oauth/token POST with a tampered body and then copy/paste the resulting access_token in their localStorage.

Am i not handling permissions are the right level ? How can I make sure that authenticated users are not tampering with their permissions ?

If the scopes you define in association with a given API have different levels of authorization then you can implement that authorization decision through a custom rule. The logic in the rule would override the requested scopes and only allow a scope if the required conditions were met (in your case you could only allow an administration scope for certain users). By default, all scopes are allowed so you’ll need the rule if you want restrictions.

The custom rule is basically Javascript code so you can either do the decision based on available user data at the profile level or just call to an external system; for sample code about how to actual override the returned scopes from a rule you can check this section of the docs, but the key part is setting context.accessToken.scope from within the rule.

I just tried this and it works, thank you so much !