From auth0-js to auth0-react, jwt audience invalid

Help
,
1

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-js

auth0-react
auth0-react

Response
401-unauthorized

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(() => {
                //
            })
3

Hi @paxatax,

It looks like you are mixing up the ID token and the Access Token.

The payload from auth0-js that you shared looks like an ID token, and the payload from auth0-react appears to be an access token.

The audience claim is used to indicate the intended consumer of the token; the ID token consumed by the client app and the access token consumed by the backend/API.