Calling the UserInfo enpoint - Issues / Confusion

Getting advice
1

Hi,

I started to look at the potential of using KeyCloak in some future projects of mine last week and I have managed to setup a new realm via a KeyCloak docker container and configure a VueJS client which is communicating successfully to a dotnet core API backend (bearer only) with relevant role checks etc.

Anyway, I have a valid id token and access token when I login via the VueJS client and all seems great with that, I’m really impressed with KeyCloak so far, however I’m a bit stuck when trying to call the userinfo endpoint ([realm-url]/protocol/openid-connect/userinfo) with the access token directly from the front end client I get the following error:

WWW-Authenticate: Bearer realm="...", error="invalid_token", error_description="Token verification failed"
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block

I do see a CORS error displayed in web tools “MissingAllowOriginHeader” along with the above but I’ve added the correct Content Security-Policy for the client to allow the login to work as needed.

As an alternative, I have tried to call an endpoint in my API from my front end, that passes on the bearer token to the …/userinfo endpoint for the realm on KeyCloak and that throws a 401 unauthorized error. Do I need to use the client id / client secret on top of the access token received from the VueJS client to achieve this? I did also wonder if this was to do with the ‘audience’ value on the access token not including the realm as I’ve seen this can be a problem in Auth0, I couldn’t spot how to add it as an audience though.

None of this is actually holding me back but it’s more to get an understanding of whether how I’m calling the userinfo endpoint is right and to see if it should work then why it isn’t (I’m a bit of a novice with oauth + oidc and just have a general understanding of parts of it).

Thanks for any help or clarification,
Steve

2

Can you post the raw request? Complete with header?

Also, are you using the loadUserInfo method in the keycloak-js library? That should do the right thing for you.

3

Thanks for the tip about the loadUserInfo function, I wasn’t aware of that, tried it and it worked then I was able to compare the requests and the problem was the domain used, I was calling localhost:8080 instead of 127.0.0.1:8080 in my test request and I’d only setup access calling 127.0.0.1 so the CORS error made sense and was pointing me in the correct direction. Sometimes it’s easy with oauth and oidc to miss the obvious when you doubt you’ve implemented things in the right way.

Schoolboy error from me!

Cheers

1 Like