Trouble with React/M2M switching from auth0 v1 to v2

[wwzeitler]

I have a React front end and an M2M backend. The following
code works with auth0 1.10.2, but fails with 2.0.1 with the message ‘jwt malformed’. (Note: I am still relatively new to the React ecosystem.) I have:

– React:

import {useAuth0} from '@auth0/auth0-react';
const {user, getAccessTokenSilently} = useAuth0();
const token = await getAccessTokenSilently();
const response = await fetch(
`${serverUrl}/api/client/get-user-profile/${clientId}`,
  {
    method: 'GET',
    headers: {
      Authorization: `Bearer ${token}`,
      'Content-Type': 'application/json'
    },
  }
);
const responseData = await response.json();

– React package.json:

 "@auth0/auth0-react": "^2.0.1",
  "npm": "^9.6.2",
  "react": "^18.2.0",
  "react-bootstrap": "^2.7.2",
  "react-dom": "^18.2.0",
  "react-hook-form": "^7.43.8",
  "react-router-dom": "^6.9.0",
  "react-scripts": "5.0.1"

– Backend:

clientsRouter.get("/get-user-profile/:user_id", checkJwt, async (req, res) => {
...
}

const checkJwt =
  jwt({
    secret: jwksRsa.expressJwtSecret({
      cache: true,
      rateLimit: true,
      jwksRequestsPerMinute: 5,
      jwksUri: `https://${AUTH0_DOMAIN}/.well-known/jwks.json`
    }),
    audience: AUTH0_AUDIENCE,
    issuer: `https://${AUTH0_DOMAIN}/`,
    algorithms: ["RS256"]
  });

– Backend package.json:
"auth0": "^2.42.0"

I would greatly appreciate your assist!

[dan.woda]

Hi @wwzeitler,

Welcome back!

Sometimes, if you aren’t setting a valid audience param, you will get an encrypted token which would be interpreted as a malformed JWT.

Make sure the audience param you are submitting is actually in the request, and is a valid, registered audience.

You can test the token on JWT.io too, if that helps.