Insufficient scope in VueJS 3 SPA

Help
1

Hello,

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 (https://github.com/nybblex/vue3-auth0-app) 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' ]);

//CRUD API
router.use("/CRUD/:id", jwtChecker.check(), readLimitedScope, controllerEquipmentCRUD.checkIdValidity);
router.post("/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:

2

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

  1. Use https://jwt.io 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 vue3-auth0-app/index.js at master · nybblex/vue3-auth0-app · GitHub, 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"
  })
2 Likes
3

Hello,

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

Have a nice week,
David

2 Likes
4 
scope:"write:equipement read_limited:equipement read:equipement"

Was missing

1 Like
5

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