I’m very much a newbie when it comes to Okta, so I’m possibly missing something very basic. I’m trying to access the Okta API within a React application.
I’ve started from this sample:
And have got it working as expected. I’ve then modified the Home page to call the Users API by adding the following code within the useEffect:
fetch("https://xlio.okta.com/api/v1/users/me", {
headers: {
Authorization: 'Bearer ' + authState.accessToken,
}
}).then(value => console.log(value));
I’ve confirmed that the okta.users.read.self scope is granted for the application that I’ve created within the Okta admin UI.
The above code results in a 401 error, with the message “The access token is invalid.”
I suspect I’m missing something very basic, but am not sure what it might be. I would greatly appreciate a pointer in the right direction, or hints as to how to debug this.
Thanks!
Hi, two things you should probably check are that:
- You are requesting the okta.users.read.self scope in your authorize request and that the token itself contains this scope
- The token was minted by the Org Authorization Server and not a Custom Authorization Server (https://developer.okta.com/docs/concepts/auth-servers/#org-authorization-server). The sample that you linked to is using a Custom Authorization Server.
Thanks @dzeller.
I wasn’t requesting the okta.users.read.self self scope in the authorize request, but doing so doesn’t change the behaviour that I’m seeing
. How would I check “that the token itself contains this scope”?
I believe that I’m using the Org Authorization Server. My org is called “xlio” and I’ve set ISSUER to https://xlio.okta.com/oauth2/default in the testenv file.
@paulbutcher that would be the issuer of a Custom Auth Server (specifically the default one). The Org Authorization Server’s issuer would just be https://xlio.okta.com
See https://developer.okta.com/docs/guides/implement-oauth-for-okta/overview/ for more information on using scoped tokens intended for Okta
Ah! I think the penny’s just dropped. Thank you!