In my app I have a protected Route 'userRoute' and verifyJWT middleware. On the front end I have a page where I make a request to an endpoint "getUsers" that is in the protected 'userRoute',
When I refresh the page, the current user needs to get a refreshToken from the refreshToken controller in the 'refreshTokenRoute', the verifyJWT middleware is also run and then they would be able to access the getUsers route.
The problem is the usersList on the frontend returns a 401 "Unauthorized" error when I refresh the page but when I navigate to a different page and then return to the userList page, the currentUser can access the userList now that they are authorized.
Is there a way to get the getUsers query to refetch once an 'Authorized User' is found on the site?
My code for the usersList here below:
const {
isSuccess,
isLoading,
isError,
error
} = useGetUsersQuery();
const users = useSelector(selectAllUsers);
// Irrelevant MUI Code
{
users.map((mappedUser) => {
const labelId = `checkbox-list-secondary-label-select-${mappedUser.firstName} ${mappedUser.lastName}`;
return ( <
MenuItem key = {
mappedUser._id
}
value = {
mappedUser._id
} >
<
ListItemAvatar >
<
Avatar className = {
classes.circle
}
alt = {
`${mappedUser.firstName} ${mappedUser.lastName}'s avatar`
}
src = {
mappedUser.avatar
} >
{
mappedUser.firstName.substring(0, 2).toUpperCase()
} <
/Avatar> <
/ListItemAvatar> <
ListItemText id = {
labelId
}
primary = {
`${mappedUser.firstName} ${mappedUser.lastName}`
}
secondary = {
mappedUser.email
}
/> <
Checkbox color = "primary"
edge = "end"
inputProps = {
{
"aria-labelledby": labelId
}
}
checked = {
participants.includes(mappedUser._id)
}
/> <
/MenuItem>
);
})
}
