Auth0 & ReactJS RBAC permissions

If you are using Auth0 with ReactJS you may need to get the user permissions (RBAC) in order to change some elements in your react app.

I could not find any method in @auth0/auth-react so I tried a workaround for this but when i was creating a silent token the metadata was inside the JWT.

So first install a npm library to read jwt

# npm install jwt-decode

and then in my Component i used useState, useEffect, auth0 and the jwt

import React,{useState,useEffect} from "react";
import jwt from 'jwt-decode'
import { useAuth0 } from '@auth0/auth0-react';
export function MyPage() {
  const [loading, setLoading] = useState(true);
  const [permissions, setPermissions] = useState("");
  const {
     isLoading,
     isAuthenticated,
     error,
     user,
     loginWithRedirect,
     logout,getAccessTokenSilently,
   } = useAuth0();
async function getScopes() {
     const accessToken = await getAccessTokenSilently({
          audience:process.env.REACT_APP_AUTH0_AUDIENCE
        });
      const data = jwt(accessToken)
       setPermissions(data.permissions);
       setLoading(false);
     return;
   }
   useEffect(()=>{
      getScopes()
    }, []) 
  return (<>
      {loading ?  <div>Please wait</div>:
      <div>Permissions: {permissions} </div>}
     </>)
}

You can then handle the page based on the permissions result object!