# Getting invalid token from client using react-auth0-spa.js

**URL:** <https://community.auth0.com/t/getting-invalid-token-from-client-using-react-auth0-spa-js/35814>\
**Category:** Get Help\
**Created:** [January 4, 2020, 8:06am UTC](https://community.auth0.com/t/getting-invalid-token-from-client-using-react-auth0-spa-js/35814 "2020-01-04T08:06:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![garym](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/garym/32/18281_2.png) [@garym](https://community.auth0.com/u/garym)\
**Post date:** [January 4, 2020, 8:06am UTC](https://community.auth0.com/t/getting-invalid-token-from-client-using-react-auth0-spa-js/35814/1 "2020-01-04T08:06:31Z")

</div>

I’ve been spending days trying get this working, and I’m close but at this point I’m always getting `invalid token` on the server when verifying it the token sent up from the client.

Here’s what I got:

**React client (with apollo) that uses react-auth0-spa.js**  
Here’s the settings:

```
{
  "domain": "myappdomain.auth0.com", // domain from Auth0 SPA app
  "clientId": "FstBEWbbWYZFjwyi0UbU1rNkhCI1_wqp", // client id from Auth0 SPA app
  "audience": "https://api.myappdomain.com" // from a newly created API on Auth0
}

```

Using the ApolloClient, I am able to successfully `getTokenSilently()`. I send it up with the “Bearer” prefix.

**ApolloServer node server**  
In the `context` function I am able to retrieve the same token from the request.headers.authorization with Bearer prefix (shown below). I then utilize `jsonwebtoken` library to verify the token, but it ALWAYS gives `JsonWebTokenError: invalid token`. Here’s what the token looks like:

`Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6IlEwTTJSRFUwTkRjM01UUTNPVGxGTUVJd09FUkdNa0kzUkVJeFFVUkZSamxDTlRJMU5UWXhNUSJ9.eyJpc3MiOiJodHRwczovL3RydXRoeC5hdXRoMC5jb20vIiwic3ViIjoiZ29vZ2xlLW9hdXRoMnwxMTI2NzEyMTU3MjUwNDk2NDE5OTciLCJhdWQiOlsiaHR0cHM6Ly9hcGkudHJ1dGh4LmFwcCIsImh0dHBzOi8vdHJ1dGh4LmF1dGgwLmNvbS91c2VyaW5mbyJdLCJpYXQiOjE1NzgxMjIxODUsImV4cCI6MTU3ODIwODU4NSwiYXpwIjoiRnN0QkVXYmJXWVpGand5aTBVYlUxck5raENJMV93cXAiLCJzY29wZSI6Im9wZW5pZCBwcm9maWxlIGVtYWlsIn0.2Sk0vy8f77sPvmoU1yp9xD7Nm-ajEXfJd6dEUoL66dZ6vcqQ1aKGYyppjqpjP-RyZXj77QVvkXxbTtB3Es3fnMh6sBkF4xE1mVsIkJWLt1RvRV9OZVvrgG612GHmxRPBbLIap17XfPH12Oj5kQIKMa_XkWELAXVxCmW1p-gIg0vGcurh8Rh_qrJVVQWta2Je87mnSDbdl2vuKhUPLp3SixV5IlBhTBSs40UBRtH5pUPldJBb43yZdZ5tnwHCgAm_jgwBfWiJDHG2e4a70w3ZPpDDGYr2UGCjN2gaIqDbhMdkf4A0m_oeaa1LRoRRM5OyxQ5IzRASOYkZ09tog-fCug`

* * *

**Here’s the server code that verifies it:**

```
const jwt = require("jsonwebtoken");
// ...
const options = {
  audience: "FstBEWbbWYZFjwyi0UbU1rNkhCI1_wqp'", // which is my AUTH_CLIENT_ID
  issuer: `https://myappdomain.com/`,
  algorithms: ["RS256"]
};

jwt.verify(
      token,
      "<MY_CLIENT_SECRET_KEY>",
      options,
      (err, decoded) => {
        console.log("err);
        if (err) throw new AuthenticationError("You must be logged in");
        // ...
      }
 );

```

The error is always **JsonWebTokenError: invalid token.**

NOW, if I change the \<MY\_CLIENT\_SECRET\_KEY\> to a PEM encoded public key that I get from the Auth0 SPA advanced settings, I get this error:  
`{ JsonWebTokenError: jwt audience invalid. expected: FstBEWbbWYZFjwyi0UbU1rNkhCI1_wqp`  
But that IS the audience value I give in the options, so I don’t get it.

Any ideas?

---

<div class="post-metadata">

**Author:** ![thomas.osborn](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/thomas.osborn/32/22282_2.png) [@thomas.osborn](https://community.auth0.com/u/thomas.osborn)\
**Post date:** [January 4, 2020, 5:32pm UTC](https://community.auth0.com/t/getting-invalid-token-from-client-using-react-auth0-spa-js/35814/2 "2020-01-04T17:32:44Z")

</div>

Hi garym, and welcome to the community! 🎉

I noticed your audience is being set as:

FstBEWbbWYZFjwyi0UbU1rNkhCI1\_wqp’

But the expected audience does not have the single quote on the end:

FstBEWbbWYZFjwyi0UbU1rNkhCI1\_wqp

Have you tried removing the extra single quote and seeing if that works?

---

<div class="post-metadata">

**Author:** ![garym](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/garym/32/18281_2.png) [@garym](https://community.auth0.com/u/garym)\
**Post date:** [January 11, 2020, 11:44pm UTC](https://community.auth0.com/t/getting-invalid-token-from-client-using-react-auth0-spa-js/35814/3 "2020-01-11T23:44:17Z")

</div>

Hello Thomas, thank you for your reply (and pardon my delay in getting back).

That extra single quote was an accidental typo in my forum post only, so unfortunately that is not it. I’ve confirmed the settings while reviewing pages like your guys’ [react/graphql/apollo article](https://auth0.com/blog/develop-modern-apps-with-react-graphql-apollo-and-add-authentication/#Building-CoolReads-GraphQL-API) and I can’t seem to find what is amiss.

Just to confirm: on the **client side** , the `audience` is the API identifier given by a separate API application created in the Auth0 dashboard (looks like “[https://api.myappdomain.com](https://api.myappdomain.com)”).

On the **server side** , my `audience` is the AUTH0\_CLIENT\_ID (as indicated in above article) found in my Web Application created in Auth0 dashboard and issuer is my auth0 domain (e.g. [myappdomain.auth0.com](http://myappdomain.auth0.com)). Interestingly, on another article of yours regarding [express/auth0](https://auth0.com/docs/quickstart/spa/react/02-calling-an-api#specify-the-api-audience), it says to set `audience` as YOUR\_API\_IDENTIFIER which is different. I’ve tried both ways (and other various tests) and I am still getting the below error in the server:

```auto
{ JsonWebTokenError: invalid token
    at Object.module.exports [as verify] (/home/gary/development/myapp/api/node_modules/jsonwebtoken/verify.js:75:17)
    at ApolloServer.context (/home/gary/development/myapp/api/src/index.js:67:7)
    at ApolloServer.<anonymous> (/home/gary/development/myapp/api/node_modules/apollo-server-core/src/ApolloServer.ts:737:24)
    at Generator.next (<anonymous>)
    at fulfilled (/home/gary/development/myapp/api/node_modules/apollo-server-core/dist/ApolloServer.js:5:58)
    at process._tickCallback (internal/process/next_tick.js:68:7) name: 'JsonWebTokenError', message: 'invalid token' }

```

I’ve checked again and as I indicated in my first post, the server IS receiving the token from the client as shown in first post (with the "Bearer " prefix) and that’s what I give as my first argument in `jwt.verify()`. Any help is very much appreciated.

---

<div class="post-metadata">

**Author:** ![garym](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/garym/32/18281_2.png) [@garym](https://community.auth0.com/u/garym)\
**Post date:** [January 13, 2020, 6:17am UTC](https://community.auth0.com/t/getting-invalid-token-from-client-using-react-auth0-spa-js/35814/5 "2020-01-13T06:17:51Z")

</div>

Interesting. I’ve been trying different variations and I found something that didn’t result in an error.

First, I removed the prefix "Bearer " on the token before using it. Then I tried the secret key in `jwt.verify(token, secretOrPublicKey, option)` which resulted in the same invalid token. Yet when I tried my PEM encoded public key, it resulted in invalid `audience` with a recommended setting of ‘FstBEWbbWYZFjwyi0UbU1rNkhCI1\_wqp’, which is the exact `audience` setting I DO have in the options object. On a whim, I then tried commenting out the `audience` in options:

```auto
const options = {
  // audience: "FstBEWbbWYZFjwyi0UbU1rNkhCI1_wqp",
  issuer: "https://myappdomain.auth0.com/",
  algorithms: ["RS256"]
};

```

And when I use that, the call succeeds and the result is:

```auto
{
  iss: 'https://myappdomain.auth0.com/',
  sub: 'auth0|5e1a5d134659590cc78665f5',
  aud:
   [ 'https://api.myappdomain.com',
     'https://myappdomain.auth0.com/userinfo' ],
  iat: 1578893195,
  exp: 1578979595,
  azp: 'FstBEWbbWYZFjwyi0UbU1rNkhCI1_wqp',
  scope: 'openid profile email'
}

```

Is that correct? And if correct, why would the aforementioned articles ([here](https://auth0.com/blog/develop-modern-apps-with-react-graphql-apollo-and-add-authentication/#Building-CoolReads-GraphQL-API) and [here](https://auth0.com/docs/quickstart/spa/react/02-calling-an-api#specify-the-api-audience)) all mention the inclusion of `audience` in the options? And why would this ONLY work with the publicKey option and not secret key as also stated in the docs? Please help clarify.

---

<div class="post-metadata">

**Author:** ![thomas.osborn](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/thomas.osborn/32/22282_2.png) [@thomas.osborn](https://community.auth0.com/u/thomas.osborn)\
**Post date:** [February 5, 2020, 9:04pm UTC](https://community.auth0.com/t/getting-invalid-token-from-client-using-react-auth0-spa-js/35814/6 "2020-02-05T21:04:08Z")

</div>

Hi garym,

Sorry for the delay in getting back to you.

Per the RFC, the audience is optional when verifying the token. We choose to include it in our guides but it is not required.

In your situation, I believe the correct audience would be " [‘[https://api.myappdomain.com](https://api.myappdomain.com)’,  
‘[https://myappdomain.auth0.com/userinfo](https://myappdomain.auth0.com/userinfo)’ ]" as this is the audience listed in the token.

Could you tell me where in the docs it instructed you to use the private key? I could not find that in the documentation you linked me (but maybe I missed it as they are quite long).