UnauthorizedError: jwt audience invalid. expected: undefined

[9swampy]

Sorry, probably a PICNIC but I've converted https://github.com/connor11528/vuejs-auth-frontend to VueJS2 and it's wired up to an instance of this server; LogIn/SignUp/LogOut are all working and the server's creating, memorizing & returning an id_token back fine as long as the server instance is up. However when I call the protected random-quote I get a 401 response and the server logs

UnauthorizedError: jwt audience invalid. expected: undefined

..in the console.

getQuote() {
	    let token = auth.getAuthHeader();
		console.log(token)
        this.$http.get('http://localhost:3001/api/protected/random-quote', { headers: {
		Authorization: token
		}})
		  .then((data) => {
            this.quote = data;
          })
          .catch((err) => console.log(err))
      }

If I remove the authorization header the server logs the following in the console:

UnauthorizedError: No Authorization header was found

I'm certain I'm passing in the Authorization header in the "Bearer {jwt}" format correctly. What else am I missing?

Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6ImsiLCJpZCI6MiwiaWF0IjoxNDkzOTQyMjQ5LCJleHAiOjE0OTM5NjAyNDl9.RVrM7JL7D0ClQ-zOJijdJxZnUQHXVZKFO8wBvN469C8
xhr.js?14ed:177 GET http://localhost:3001/api/protected/random-quote 401 (Unauthorized)
dispatchXhrRequest @ xhr.js?14ed:177
xhrAdapter @ xhr.js?14ed:12
dispatchRequest @ dispatchRequest.js?91bc:52
xhr.js?14ed:177 XHR finished loading: GET "http://localhost:3001/api/protected/random-quote".
dispatchXhrRequest @ xhr.js?14ed:177
xhrAdapter @ xhr.js?14ed:12
dispatchRequest @ dispatchRequest.js?91bc:52
SecretQuote.vue?325d:31 Error: Request failed with status code 401
    at createError (eval at <anonymous> (app.js:782), <anonymous>:15:15)
    at settle (eval at <anonymous> (app.js:890), <anonymous>:18:12)
    at XMLHttpRequest.handleLoad (eval at <anonymous> (app.js:761), <anonymous>:77:7)

[Mazzzy]

Even, I am facing the same issue. :(

When I try to get protected quotes, it gives the error
UnauthorizedError: jwt audience invalid. expected: undefined

Can anyone please help on this?

[unicodeveloper]

@Mazzzy and @9swampy. This repo returns two tokens, an id_token and an access_token. The access_token should be the token sent as an Authorization Header.

Also, did you specify the audience in the backend when you cloned this repo?

[Mazzzy]

What audience value do I need to specify in config.json of backend?

[unicodeveloper]

Any value of your choice can be your audience in the config.json. Example:

So, when the access_token is been signed, it takes it into consideration before signing.

function createAccessToken() {
  return jwt.sign({
    iss: config.issuer,
    aud: config.audience,
    exp: Math.floor(Date.now() / 1000) + (60 * 60),
    scope: 'full_access',
    sub: "lalaland|gonto",
    jti: genJti(), // unique identifier for the token
    alg: 'HS256'
  }, config.secret);
}

It then goes ahead to validate the access_token before given access to the protected random route.

// Validate access_token
var jwtCheck = jwt({
  secret: config.secret,
  audience: config.audience,
  issuer: config.issuer
});

[Mazzzy]

Same above values are there in code, but dont know whats wrong with it.
Do I need to configure something different?

[unicodeveloper]

You have an audience value in your config.json file? @Mazzzy

[unicodeveloper]

Hello @Mazzzy please try this:

// Validate access_token
var jwtCheck = jwt({
  secret: config.secret,
  aud: config.audience,
  issuer: config.issuer
});

Change audience to aud in the jwtCheck function as seen in the above piece of code. That should work!

[jaydioar]

i think the audience is not checked correctly if it is set. ... if i set audience not at all then i also dont need to set aud so it's not aud that does the "fix".. it just works when audience is not set. ( "express": "^4.16.2", "express-jwt": "^5.3.0", "jwks-rsa": "^1.2.1")

jwtCheck = jwt({
 secret: jwks.expressJwtSecret({
    cache: true,
    rateLimit: true,
    jwksRequestsPerMinute: 5,
    jwksUri: "https://xx.eu.auth0.com/.well-known/jwks.json"
  }),
  //audience: 'xx-xx-api',
  issuer: "https://xx.eu.auth0.com/",
  algorithms: ['RS256']
});

Internally seems to be used the client id.. because if you set audience to your client id then its the only way audience is not making that error.

[ArthurianX]

I'm struggling with the same issue for the past few hours.

I added as an actual audience in my express api the clientID, because the application token always get signed with the actual client Id.

Like this I'm imagining we can accept only 'calls' from our desired application, if we'd have many we'd get an error.

I guess it's good for something.

[tizah]

Thanks guys, was struggling with similar situation some hours ago...but reading through the comment lit me up.

[teebot]

Only worked for me with aud instead of audience and removing issuer ʕ⁠ノ⁠•ᴥ•ʔ⁠ノ ︵ ┻━┻
([email protected])

export default jwt({
  secret: jwks.expressJwtSecret({
    cache: true,
    rateLimit: true,
    jwksRequestsPerMinute: 5,
    jwksUri: `https://${process.env.AUTH0_DOMAIN}/.well-known/jwks.json`
  }),

  // documented as audience but only works as "aud"
  aud: process.env.AUTH0_AUDIENCE,

  // documented as required but only works without
  // issuer: `https://${process.env.AUTH0_DOMAIN}`,

  algorithms: ["RS256"]
});

[Standaa]

Apparently you are not supposed to bypass audience by using aud in an SPA <> API authorization flow.
I found an amazing summary of how its supposed to be done in that comment. It works flawlessly on my end (Angular2 + Nodejs API).