Modern Full-Stack Development with Nest.js, React, TypeScript, and MongoDB: Part 2

Blog Discussions
8

Routing was the issue which broke auth.

Anyway we got to another problem while following the article.
While getting the access_token using this code

const accessToken = await getIdTokenClaims();
  const response = await fetch(`${process.env.REACT_APP_SERVER_BASE_URL}/blog/post`, {
    headers: new Headers({
      "authorization": `Bearer ${accessToken.__raw}`
    }),
  });

There were all the time problems with an invalid audience, we were getting random string in the audience attribute when decoding with JWT tool: https://jwt.io/
after many hours of solving we found this issue on StackOverflow: Auth0 with ReactJS and Lumen - Audience looks like a random string - Stack Overflow

which describes differences between tokens.
And solving the problems calling getTokenSilently

    const token = await getTokenSilently()
    const response = await fetch(endpoint, {
      headers: {
        Authorization: `Bearer ${token}`
      }
    })
1 Like