I recently switched a legacy web app from using the auth0-js NPM package to auth0-react. I followed Auth0’s React guide (available here). I believe my frontend code is in order, however when I try to wire up an existing API, I now get a 401-unauthorized, with the response saying “jwt audience invalid. expected: …”.
I console logged the JWT token (screenshots below), and the overall structure of the decoded payload has changed, with the previous audience value now becoming the azp value. You can see that the value in the response value is the same as the aud and azp. Could someone please give me a little guidance on what is going on here?
Thank you in advance.
-
Which SDK this is regarding:
auth0-react -
SDK Version:
v^1.8.0 -
Platform Version:
Node 15.14.0, NPM 7.7.6
Screenshots
auth0-js
auth0-react
Response
Code
// Provider
const Auth0ProviderWithHistory = ({ children }) => {
const domain = config.auth0Domain;
const clientId = config.auth0ClientId;
const history = useHistory();
const onRedirectCallback = (appState) => {
history.push(appState?.returnTo || window.location.pathname);
};
return (
<Auth0Provider
domain={domain}
clientId={clientId}
redirectUri={window.location.origin}
onRedirectCallback={onRedirectCallback}
audience={config.auth0Audience}
scope="openid email profile"
>
{children}
</Auth0Provider>
);
};
export default Auth0ProviderWithHistory;
// index.js
ReactDOM.render(
<BrowserRouter>
<Auth0ProviderWithHistory>
<Provider store={store}>
<App />
</Provider>
</Auth0ProviderWithHistory>
</BrowserRouter>,
document.getElementById('root'),
);
// App.js
const { isAuthenticated, loginWithRedirect, isLoading } = useAuth0()
useEffect(() => {
if (!isAuthenticated && !isLoading) {
loginWithRedirect();
}
}, [isLoading])
useEffect(() => {
console.log('Logged in==>', {user});
}, [user])
// File where API call is made
createTripRequest = async (reqBody) => {
const { user, getAccessTokenSilently } = this.props.auth0;
try{
const token = await getAccessTokenSilently({
audience: `https://${config.auth0Domain}/userinfo`,
scope: 'openid email profile',
});
axios.post(`${config.apiUrl}/passengers/${user.sub}/requests`, reqBody, { headers: { 'Authorization': `Bearer ${token}` } })
.then(() => {
//
})