Using access_token for authentication to Spring Security API

Help
,
1

Hello,

I have a Java Spring Security API which is successfully integrated with auth0 as detailed in the quick start backend documentation. This works very well and I use Postman to successfully authenticate with a POST ***.eu.auth0.com/oauth/token and get an access_token and id_token returned. I can then use the access_token to access the end points on my API.

My front end is a vue.js single page app and I am using the auth0-js library as detailed in the vue.js quick start documentation. My app successfully triggers the hosted login page and I can authenticate successfully and get back and an access_token and id_token which are stored in my local browser storage.

Here’s the settings I use to create a WebAuth object in javascript, (I’ve redacted some private info) -

auth0 = new auth0.WebAuth({
    domain: '*****.eu.auth0.com',
    clientID: '********',
    redirectUri: 'http://localhost:8081/callback',
    audience: 'https://*******.eu.auth0.com/userinfo',
    responseType: 'token id_token',
    scope: 'openid'
  })

When I then use the access_token as the Authorization Bearer on the header I receive a 401 from my backend API. Looking at the access_token returned from the hosted login page it seems to be a very different format than when I get one returned from a call to the auth0 API using Postman. It looks like this -

xMzDhIuVQZnVJONL

Were as when I get one back from Postman it looks like this -

eyJ0eKAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ik9VRkdSVVUyUVVKRE1UTTRPVGMwTVVWR1FrRkVPVVl6UTBVMVF6STRRa1pGTnprMU1VRkVSZyJ9.eyJpc3MiOiJodHRwczovL2pvaG5odW5zbGV5LmV1LmF1dGgwLmNvbS8iLCJzdWIiOiJhdXRoMHw1OTI1NjRhMDAxZTkxZDE0MGU5OWQxNmQiLCJhdWQiOlsiaHR0cDovL2xvY2FsaG9zdDo4MDgwL2V2ZW50cyIsImh0dHBzOi8vam9obmh1bnNsZXkuZXUuYXV0aDAuY29tL3VzZXJpbmZvIl0sImF6cCI6InVVMnV1dVFSMUpYMmxKQ3ZodWtvMzNvQXE1clpzNkdhIiwiZXhwIjoxNTAwMDI2MzEzLCJpYXQiOjE0OTk5Mzk5MTMsInNjb3BlIjoib3BlbmlkIHByb2ZpbGUgZW1haWwgYWRkcmVzcyBwaG9uZSBjcmVhdGU6ZXZlbnQgcmVhZDpldmVudHMiLCJndHkiOiJwYXNzd29yZCIsImh0dHA6Ly9qb2huaHVuc2xleS5ldmVudHMuY29tL29yZ2FuaXNhdGlvbiI6ImNvbXBhbnkxIn0.37E2Bg-dl2fDaW2Kr8nQPftaLB3VyLW_BUQZQ5HfW9Bn5uJ7wFBS6OgWvsiliw5Cf9OXzQ7tvmIVFc-gn6iFLCx9nDMv25IjE23f3TLeWahCjYzTBRPDfa8MPC6zXzFBL4TaAmAiHccO-j-zLSH3Cosw2nE2HHwZLKv2KEIW_pbTo3d1hpyxSxkqiRh7NZ69SmS9FLPT68AbjAA2AzMYdTgxIsYNm–r8mhtFNgt8VgG42SwYEUCtrdo1PuALVRPMhMeM_uK7zeLdmc_QOPGLJIPYKatZSEyeGImWT6RREes5UsCxVx5fMr1HsE4DzykKWE7DWz2kfBWj9_5wuoOZB

If I copy and paste the access_token from Postman into my local storage and fire off a request through my Single Page app it works as expected. So I am happy my CORS settings etc… are all correct both in the request from Vue.js and on my Java backend API.

My question is: Why is the format of the access_token different in the response from the hosted login to the API? It looks like it’s base64 encoded. How do I decode that token and use it successfully?

Many thanks in advance for your help, I’m very stuck on this one and can’t really progress any further until this is resolved.

Regards,

John

2

Isn’t it always the case that you spend days trying to work out a problem, give up and use the last resort of asking the question on the forum, then two seconds later revisit the problem and solve it!!! :slight_smile:

So I figured it out, in my WebAuth settings I need to specify the correct audience.

auth0 = new auth0.WebAuth({
     domain: '*****.eu.auth0.com',
     clientID: '********',
     redirectUri: 'http://localhost:8081/callback',
     audience: 'https://localhost:8080/myapp',
     responseType: 'token id_token',
     scope: 'openid'
   })

Oh well, all’s well that ends well!