Best Practices for Retrieving User Permissions in a SPA (Vue.js) with Node.js API using Auth0

Get Help
,
6

Hey @tyf, thanks again for your help and your time.

I’m going to share my solution here to help anyone else going through the same situation because for me it was difficult to figure out how to do it. So I’m going to provide a solution using client management and also an endpoint to get this information:

  • Client Management:

    • Create M2M App

      1. Go to Dashboard > Applications;
      2. Click Create a M2M (Machine to Machine) application;
      3. Choose your application name and select the API you want to authorize. It probably will
        be “Auth0 management API”;
      4. Select the permissions that you will need when start to use the Cliente Management;
      5. Click to create;

    • Create a new Flow:

      1. Go to Dashboard > Actions > Library;
      2. Click to “Build Custom”
      3. Fill the name of the action, the trigger that I am using is “Login / Post Login” and you can choose the runtime, in my case I chose Node 18 (recommended).
      4. Setup your secrets by clicking on the “key” icon, the secrets that you may need are: “domain”, “clientId” and “clientSecret” (All this information you can get on your M2M app / settings).
      5. Paste the code (that I will provide below) in your Action and change whatever you want:
      6. Run the code and check if you get any errors (it should work just fine).
      7. Access your application’s SPA, obtain the Token ID and validate the information contained therein;

Notes: You must use any user who has permission;

/**
* Uses ManagementClient to get all user permissions
*
* @param {Event} event - Details about the user and the context in which they are logging in.
*/
const fetchPermissionNames = async (event) => {
  const ManagementClient = require('auth0').ManagementClient;
  const management = new ManagementClient({
    domain: event.secrets.domain,
    clientId: event.secrets.clientId,
    clientSecret: event.secrets.clientSecret
  });

  const params = { id: event.user.user_id, page: 0, per_page: 50, include_totals: false };
  const userPermissions = await management.getUserPermissions(params);

  return userPermissions.map(({ permission_name }) => permission_name);
}

/**
* Handler that will be called during the execution of a PostLogin flow.
*
* @param {Event} event - Details about the user and the context in which they are logging in.
* @param {PostLoginAPI} api - Interface whose methods can be used to change the behavior of the login.
*/
exports.onExecutePostLogin = async (event, api) => {
  try {
    const namespace = 'http://localhost:5173';

    const assignedRoles = (event.authorization || {}).roles;
    const permissionNames = await fetchPermissionNames(event);
  
    api.idToken.setCustomClaim(`${namespace}/roles`, assignedRoles);
    api.idToken.setCustomClaim(`${namespace}/permissions`, permissionNames);
  } catch (e) {
    console.error('Error on execute post login: ', e)
  }
};

  • NodeJS API:

    • Create an API:

      1. Go to Dashboard > API;
      2. Click Create an API;
      3. Choose the name / identifier and Signing Algo of your API;
      4. Click to create;
      5. Go to API Settings and enable the “RBAC Settings”: “Enable RBAC” and “Add permissions in the Access Token”"
      6. Start to build you API (You can copy the quick start code)
      7. Paste the endpoint below in your code and you should have access to the user’s permissions based on the Access Token:
app.get('/permissions', jwtCheck, (req, res) => {
  const permissions = req.auth?.payload["permissions"] || []
  res.json(permissions);
})

.

This is basically how you can get these permissions.

1 Like