I managed to run the backend following the steps described in this link: NestJS Code Sample: API Role-Based Access Control
I managed as well to run the frontend following the steps described in this other link: React Router 6/TypeScript Code Sample: Basic Authentication
However whenever I try to retrieve content from both pages protected or admin I get Unathorized, even though I am getting a token with getAccessTokenSilently right before sending the request. When I check the API call in the bakend I cannot see any signal from Bearer tokens.
Here goes a piece of the react code that I use to access the protected endpoint:
useEffect(() => {
let isMounted = true;
let token: string
(async () => {
token = await getAccessTokenSilently()
console.log(token)
const getMessage = async () => {
const { data, error } = await getAdminResource(token);
if (!isMounted) {
return;
}
if (data) {
setMessage(JSON.stringify(data, null, 2));
}
if (error) {
setMessage(JSON.stringify(error, null, 2));
}
};
getMessage();
})()
return () => {
isMounted = false;
};
}, []);
And here goes the getAdminResource function:
export const getAdminResource = async (token: string): Promise<ApiResponse> => {
const config: AxiosRequestConfig = {
url: 'http://localhost:3030/api/messages/admin',
method: "GET",
headers: {
"content-type": "application/json",
"Authorization": `Bearer ${token}`
},
};
const { data, error } = (await callExternalApi({ config })) as ApiResponse;
return {
data,
error,
};
};
What am I doing wrong?