Hi Nicolas,
Thanks for the reply. Your comment pushed me along trying a few different things. getTokenWithPopup didn’t work either, but for a different reason. In this case, I was getting an error reading from a cache within auth0-spa-js.production.js:
t.prototype.getTokenWithPopup = function(t, e) {
return void 0 === t && (t = {
audience: this.options.audience,
scope: this.options.scope || this.DEFAULT_SCOPE
}),
void 0 === e && (e = Cn),
r(this, void 0, void 0, function() {
return o(this, function(n) {
switch (n.label) {
case 0:
return t.scope = Fn(this.DEFAULT_SCOPE, this.options.scope, t.scope),
[4, this.loginWithPopup(t, e)];
case 1:
return n.sent(),
[2, this.cache.get({
scope: t.scope,
audience: t.audience || "default"
}).access_token]
}
})
})
}
The error is on the call to access_token there. In this case, the cache is returning undefined. I think that’s probably something worth cleaning up since a cache miss probably shouldn’t be catastrophic. But, the real problem is the t.audience value is set to "default", whereas the lone cache entry uses the audience value I specified in the provider.
This led me to try specifying the audience attribute in both the getTokenWithPopup and getTokenSilently calls. With that in place, things appear to be working now.
Just to provide a quick recap, I’ve been following the API calling section of the React SPA quick start guide. That guide shows specifying the audience only on the provider. The call to getTokenSilently does not pass the audience. I assumed that meant the audience value was inherited, but it looks like that’s not the case. I have to believe the docs worked for someone, so I don’t entirely understand why it’s not for me.
So, the full truth table for this is:
| Provider Audience | Token Fetch Method | Token Fetch Audience | Result |
|---|---|---|---|
| None specified | getTokenSilently | None specified | Opaque access token |
| None specified | getTokenSilently | API audience | Opaque access token |
| None specified | getTokenWithPopup | None specified | “Invalid state” error from loginWithPopup definition |
| None specifed | getTokenWithPopup | API audience | “Invalid state” error from loginWithPopup definition |
| API audience | getTokenSilently | None specified | The “login_required” error I mentioned |
| API audience | getTokenSilently | API audience | Functioning JWT |
| API audience | getTokenWithPopup | None specified | The bogus cache read error I mentioned |
| API audience | getTokenWithPopup | API audience | Functioning JWT |
So, 10 hours later I’m happy to have a way to authorize my GraphQL backend. Thanks for pointing me in the right direction. I really don’t think there’s anything particularly unique about my environment here. This looks like maybe the docs and the library fell out of sync somewhere along the way. I think the error messages could be improved to help guide the correct solution as well.
There’s still the open question of what would happen if I tried to get a JWT for another API, since that audience value would not be able to match the audience specified in the provider config (since the provider audience would have to match the first API’s audience). But, it’s not something I need now so I won’t spend the time figuring that out.