Auth0 & ReactJS RBAC permissions

Dimitris Moutsatsos
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!

--

--

Dimitris Moutsatsos

developer and weirdo / current: Tychetech / MAD TV / WARR