Insufficient scope in VueJS 3 SPA


I have a VueJS 3 SPA and an Express API. I did all the back configuration according to the official doc and the front from this repo ( since the doc doesn’t support VueJS 3.

Then, I tried to request the API. It works when no routes are scoped limited. But I get a 403 - Insufficient scope when I protect the rout with a permission. I am connected with a user with the sufficient permissions.

Back routes

const writeScope = jwtAuthz([ 'write:equipement' ]);
const readLimitedScope = jwtAuthz([ 'read_limited:equipement' ]);
const readFullScope = jwtAuthz([ 'read_limited:equipement', 'read:equipement' ]);

router.use("/CRUD/:id", jwtChecker.check(), readLimitedScope, controllerEquipmentCRUD.checkIdValidity);"/CRUD/", jwtChecker.check(), writeScope, controllerEquipmentCRUD.create);
router.put("/CRUD/:id", jwtChecker.check(), writeScope, controllerEquipmentCRUD.modify);
router.delete("/CRUD/:id", jwtChecker.check(), writeScope, controllerEquipmentCRUD.delete);
router.get("/CRUD/:id",  jwtChecker.check(), readLimitedScope, controllerEquipmentCRUD.getById);

Front request

import {getToken} from "../auth";

export async function getAll(){
    const accessToken = await getToken();
    const result = await fetch('http://localhost:3000/v1/equipment/CRUD/123', {
        method: 'GET',
        headers: {
            Authorization: 'Bearer ' + accessToken
    const data = await result.json();
    return data;

Front auth/index.js

export const getToken = async function() {
    const auth0Client = await getAuthClient();
    return auth0Client.getTokenSilently();

Thanks in advance :wink:

If the API code complains about insufficient scopes, we’ll need to troubleshoot the access token issuance part of the equation.

  1. Use and verify that the access token you are trying to use does not contain the expected scopes. You’ll see a scope claim: does it have the scope expected?
  2. Check the token request piece. When you do getTokenSilently, the Auth0 client will use the configured audience and scope setting when requesting a token. So, when you create the client, make sure to add those values.

At, add the above values:

return await createAuth0Client({
    domain: process.env.VUE_APP_AUTH0_CONFIG_DOMAIN,
    client_id: process.env.VUE_APP_AUTH0_CONFIG_CLIENTID,
    redirect_uri: process.env.VUE_APP_DOMAINURL_REDIRECT,
    audience: "your API identifier",
    // all the scopes your application can use
    scope:"write:equipement read_limited:equipement read:equipement"


Thank you so much for your response. I am creating a pull request on the repo.

Have a nice week,

scope:"write:equipement read_limited:equipement read:equipement"

Was missing

1 Like

Glad you have figured it out and thanks for sharing with the rest of community!