Auth0 & ReactJS RBAC permissions
1 min readApr 14, 2021
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!