I am attempting to make a simple SPA that follows the Authorization Code Flow with Proof Key for Code Exchange (PKCE) flow. It appears to login, and my next step is to get the Authentication Token, but the token returned looks like
KnkWEnS7yush7x5nlAjKl46vPPjD79m-
which does not look like jwt token, and my server code will reject (of course, since it is expecting a jwt token).
What has gone wrong?
The login request seems fine
https://dev-8821kz09.auth0.com/authorize
?client_id=FYlBPbNm7vZi9YPwVFyR7J2TLKrzNtST
&redirect_uri=http%3A%2F%2Flocalhost%3A3000
&scope=openid+profile+email
&response_type=code
&response_mode=query
&state=eDlycjF%2BdXFVenV1S1ZjTDRwZzBCUjE2T3BYVXM1ZExLckVtMUhva3FwaA%3D%3D
&nonce=TnAK.HnOjq5XTn5fUfp-0gK.cFNbvYv1Pc9x7jl.ZlC
&code_challenge=eoj9EQvldgu6m7hpAcOl9ykHRbT5cSKvsTLiIEazY0o
&code_challenge_method=S256
&telemetry.name=klahnakoski%2Fauth0-spa%2Fsrc%2Fvendor%2Fauth0
I have confirmed the application is OIDC Conformant
Hi @klahnakoski,
This is an opaque access token, and is an added layer of security when the token is not meant to be consumed by any API outside of Auth0.
If you are trying to request a jwt for your custom API, then you will need to specify audience.
Hope this helps!
Thanks,
Dan
If you are trying to request a jwt for your custom API, then you will need to specify
audience.
Sorry, which endpoint is expecting an audience?
I tried adding &audience=5ce5797952ed1e0857fad60f to the /authorize endpoint, but it comes back denied.
I will continue to try permutations.
I attempted to send a request to /oauth/token, with an audience, it does not fail, but I just get back the ID Token.
{
"grant_type":"authorization_code",
"redirect_uri":"http://localhost:3000",
"audience":"https://locahost/query",
"client_id":"FYlBPbNm7vZi9YPwVFyR7J2TLKrzNtST",
"code_verifier":"rQ_ecQXnwC1ss5P4VkOYjOT0CTqyt4DmaZoh_VFg73V",
"code":"2WC39kEWeh6sJaLU"
}
Maybe a different grant type?
{
"grant_type":"client_credentials",
"redirect_uri":"http://localhost:3000",
"audience":"https://locahost/query","client_id":"FYlBPbNm7vZi9YPwVFyR7J2TLKrzNtST",
"code_verifier":"aA8Yer4Fn4-lxhhnAJ0pD-BA-kedVp9BXcpRERg_zBw",
"code":"VO-Ex4mgvmkilRxQ"
}
This does not work, after sending it, my browser redirects some number of pages and I am effectively logged out, so I do not get so capture the response.
Attempt to set audience at login time:
https://dev-8821kz09.auth0.com/authorize
?client_id=FYlBPbNm7vZi9YPwVFyR7J2TLKrzNtST
&redirect_uri=http%3A%2F%2Flocalhost%3A3000
&scope=openid+profile+email
&audience=https%3A%2F%2Flocahost%2Fquery
&response_type=code
&response_mode=query
&state=SX5yd19mc3AzQUZBVnpZUmhoNFFibkpJakxrZXE1YU5RTC4uYU84dmdrUQ%3D%3D
&nonce=3MD8qC7qwEbh2cKPeo59RdPKmdD3VPN6l4lmse8z4n2
&code_challenge=wxTRAy8NAuHA4s3Wm1soiMpDbZNV8lgR17FSRF6nKJU
&code_challenge_method=S256
&telemetry.name=klahnakoski%2Fauth0-spa%2Fsrc%2Fvendor%2Fauth0
which is a bit closer, but after some number of forwards I get logged out.
mozilla-iam suggests the audience belongs to the https://auth.mozilla.auth0.com/oauth/token endpoint
I really like this doc for setting up a SPA + API, the quickstarts are a great resource for looking at how to implement.
Just because I am curious, are you choosing not to use auth0-spa-js for a reason in particular? It could really help simplify some of these processes.
As for the audience not working, have you registered the API in your dashboard?
Let me know,
Dan
I have gone through a number of permutations, and I have still been unable unable to get a jwt access token. I still am not sure what endpoint is expecting the audience parameter.
Thank you for pointing to the SPA + API, That is exactly what I am trying to get working. There are many steps, and many unknowns that are making implementation difficult. There is also a big question about Role/Groups/Users which that example uses, and I am not certain is it important to getting an SPA working with an API.
I am using react-auth0-spa.js example. I have slimmed down the application to keep just the authentication bits and to make debugging easier. It uses the auth0-spa-js, but since the debugger in the browser seems to show only the obfuscated the code, I have vendored it’s source into the project (and did a minor convert from Flow to React/JSX). This allows me to add breakpoints and add more logging to figure out what’s going wrong. Then, during my attempt to send the audience parameter I noticed the loginWithRedirect() did not forward audience to the http request, which forced me to fix that. Then I noticed that the code was replacing a missing audience with default, which was ending up in the http requests, and since I have no “default” API, it caused some of my denials; I fixed that too. Since the code was a bit of a rube-Goldberg machine of variable renaming, I simplified it a bit. I also noticed that the scopes were not sorted, and combined in different ways, which made my code not use the cache properly, and go into loops requesting authentication.
The API example code also had some problems: It did not handle the browser’s pre-flight requests to gather the CORS rules, so I added that. It did not authenticate opaque access tokens, so I added that.
I am continuing permutations on parameters to get a jwt access token. I am still not certain if I can get a token with a second call; if I need to keep the nonce and code_verifier for longer to do so; if I should be getting all tokens during authorization; if the nonce values will mess with my call sequences. Especially since the audience request seems to leave the SPA for second time to get more permissions from the user.
Here is my API setup:
After authorize, and after processing the callback I attempt a getTokenSilently() which fails. The failure seems to make sense because we will need more user permissions. Notice this time I trying scope too.
https://dev-8821kz09.auth0.com/authorize
?client_id=FYlBPbNm7vZi9YPwVFyR7J2TLKrzNtST
&audience=https%3A%2F%2Flocahost%2Fquery
&scope=email+openid+profile+query%3Asend
&response_type=code
&state=YUpIS1VKbHFUVVNtQy1DSThUX2ZZN1cwbHFyakM1X1JxR3hkNTBWa2h5aQ%3D%3D&nonce=I4cVXPjT2m1MMRaolruD9dn6jpvM6PUajtDwtZct-H1
&redirect_uri=http%3A%2F%2Flocalhost%3A3000
&code_challenge=BpBhJe094TccY3VZe1QqmCo5O9D0ra0aKVdwn7j7rkU
&code_challenge_method=S256&prompt=none&response_mode=web_message
&telemetry.name=klahnakoski%2Fauth0-spa%2Fsrc%2Fvendor%2Fauth0
<!DOCTYPE html><html><head><title>Authorization Response</title></head><body><script type="text/javascript">(
function(window, document) {
var targetOrigin = "http://localhost:3000";
var webMessageRequest = {};
var authorizationResponse = {
type: "authorization_response",
response: {
"error":"login_required",
"error_description":"Login required",
"state":"YUpIS1VKbHFUVVNtQy1DSThUX2ZZN1cwbHFyakM1X1JxR3hkNTBWa2h5aQ=="
}
};
var mainWin = (window.opener) ? window.opener : window.parent;
if (webMessageRequest["web_message_uri"] && webMessageRequest["web_message_target"]) {
window.addEventListener("message", function(evt) {
if (evt.origin != targetOrigin)return;
switch (evt.data.type) {
case "relay_response"
r messageTargetWindow = evt.source.frames[webMessageRequest["web_message_target"]];
if (messageTargetWindow) {
messageTargetWindow.postMessage(authorizationResponse, webMessageRequest["web_message_uri"]);window.close();}break;}});mainWin.postMessage({type: "relay_request"}, targetOrigin);} else {mainWin.postMessage(authorizationResponse, targetOrigin);}})(this, this.document);
</script></body></html>
putting the audience and scope in the /authorize endpoint works, but the library cache prevents recovering it
auth0.loginWithRedirect({
audience:"https://locahost/query",
scope:"query:send"
})
Some success: I am setting both the scope and the audience; and I updated the auth0-spa-js to record both so they survive between web page loads, and update the new Auth0Client when the page reloads.
The SPA can get an jwt access token, use it, and the service can verify it.
This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.