The Complete Guide to React Authentication with Auth0

Blog Discussions
27

Howdy, asdFletcher!

I consulted with our engineer @luciano.balmaceda to come up with the following answer. Thanks, Lucho!

If you open http://jwt.io/, replace what is on the left by the following:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzY29wZSI6InJlYWQ6eCx3cml0ZTp4In0.V43LGfx51FDmy4HPPRTZQUE8lfXWUglb9arCREWqn74

You get the following decoded payload:

{
  "scope": "read:x,write:x"
}

Now, change the scope of the payload. For example, add an entry:

{
  "scope": "read:x,write:x, data:admin"
}

Notice how the signature of the access token on the left changes: Weg6q1N4WawkuQBh6OZdSKtp3gTs1VUfe4AQIvHHhuc.

Now that you have changed the scope, replace the blue part of the access token on the left (the signature) with the signature the original token had: V43LGfx51FDmy4HPPRTZQUE8lfXWUglb9arCREWqn74

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzY29wZSI6InJlYWQ6eCx3cml0ZTp4LCBkYXRhOmFkbWluIn0.V43LGfx51FDmy4HPPRTZQUE8lfXWUglb9arCREWqn74

Look below the token box and notice how it says “Invalid Signature”. When you use the original signature but change the scopes, the token becomes invalid. If you were to send that token in the authorization header of a request to your API, it would reject the request as the token is invalid.

The access token in JWT format is public but you cannot change the content of the header or the body without changing the signature.

This is how it works in practice:

  1. The user logs in to your app on a mobile phone and gets an access token with the audience to consume your backend API. The Auth0 authorization server signed that access token using a private key or client secret.

  2. The user makes a request to your API passing the token it got from Auth0 in the authorization header, without changing it.

  3. Your API verifies that the access token signature matches using a client secret or public key to recalculate the signature in the backend.

  4. If the token is valid, has a valid audience, and has the required permissions to access the requested endpoint, the request goes through and the server replies to the user.

To explain the concept of “Auth0 APIs” and how the audience helps this whole process, I’ll link to this amazing answer by @nicolas_sabena:

Please let me know if you have any further questions! This was a great question! Thank you for asking it.