So I have read through several SO questions about this, and read many Auth0 tutorials on this, but I still cannot get the Access Token to work with my custom API.
I have followed the Auth0 SPA tutorial for React. I then followed the "Call Your API from Your Single-Page App" tutorial. I have created an "auth0-authorization-extension-api". I enabled API access to my custom API.
I feel I have done the necessary steps, but I feel I am missing how to request the proper access token from my React client.
My Axios custom hook contains the following code inside a useEffect:
const send = async () => {
try {
await getTokenSilently().then(async (token: string) => {
const config = {
method: method as "GET" | "POST",
withCredentials: true,
data: providedData,
headers: {
Authorization: "Bearer " + token
}
};
const result = await axios(address + uri, config);
});
} catch (error) {
if (!canceled) {
dispatch({ type: "FETCH_FAILURE" });
}
}
};
The access token being sent to my API is not a full jwt, but a string of numbers and letters approximately 35 digits in length.
Every time I get the error UnauthorizedError: jwt malformed
from my custom API.
My audience for the React SPA is http://localhost:3000
, and the API audience is http://localhost:8080
.
Am I missing something simple here or am I looking in the wrong place?
The access token you got is just a pure random string. With Auth0, if you want to a JWT as access token, you have to indicate the audience i.e. the API identifier.