Our Okta Adminstrator has set up claims based on scope. Meaning we have specific claims under a specific scope. This is done so our JWT Token doesn’t have to bring all claims at once as we want to keep the JWT token size less than 9 KB. When the user is in specific part of the application, we want to retrieve the claims specific for that scope. How do we get new sets of claims by switching scope?
Our application is written in React JS
Hello,
Your application would need to do another /authorize call into Okta with the new set of scopes you want to retrieve claims for.
Thanks. Is there a specific function such as getIdToken under OktaAuth to invoke authorize again without having to enter user credentials again (username and password)? I would rather not make a fetch API call. Alternately code sample illustrating authorize call would be helpful. Thanks in advance.
As long as the user still has a session in the browser, a second /authorize request will succeed without prompting users to re-authenticate
This was my understanding. However I did not find an authorize method to invoke from react Js. The OktaAuth object doesn’t have an “authorize” method. Should I just make a fetch call to “/authorize”? Is so is there sample code?
Are you using our React SDK? Are you not already prompting the users to authenticate, e.g. when they hit a SecureRoute? The SDK is designed to authenticate the user if they are not considered authenticated yet when they hit a SecureRoute. More info about that built in behavior here: GitHub - okta/okta-react: Okta OIDC SDK for React
Yes. We are using React SDK. Once the user is logged in using Okta we use OktaAuth object to obtain the claims using getIdToken(). However I haven’t seen how to re-authorize to invoke /authorize. The link provided doesn’t talk about how to /authorize. Is there a method “authorize()”?
IMPORTANT NOTICE: This email, including any attachments, may include non-public, confidential, proprietary or legally privileged information. If you are not an intended recipient, you are hereby notified that any use, disclosure, dissemination, distribution or copying of the information (in whole or in part) in this e-mail is unauthorized and prohibited. If you are not an intended recipient, please immediately (i) notify the sender by reply email that this message was inadvertently transmitted to you and (ii) permanently delete this e-mail (including attachments) from your system. Thank you for your cooperation.
Whats the purpose of reauthorizing the user? To get new tokens due to them expiring or to get new tokens even though the current set have not yet expired?
The reason for reauthorizing is that we want to get new claims after switching scope. The JWT token size can get large if you store all claims under the original scope. When the user visits a new page we want to retrieve the claims only pertinent to that page based on the new scope.
Currently if we switch the scope it doesn’t update the claims. That’s why we have to re-authorize.
Milind
IMPORTANT NOTICE: This email, including any attachments, may include non-public, confidential, proprietary or legally privileged information. If you are not an intended recipient, you are hereby notified that any use, disclosure, dissemination, distribution or copying of the information (in whole or in part) in this e-mail is unauthorized and prohibited. If you are not an intended recipient, please immediately (i) notify the sender by reply email that this message was inadvertently transmitted to you and (ii) permanently delete this e-mail (including attachments) from your system. Thank you for your cooperation.
Is there a sample code in JavaScript or python that shows how to authorize with new set of scopes after logging in? I am unable to find such example under the /authorize documentation.
Here is my sample code.
const reauthorize = async (sessionToken) => {
var headers = new Headers();
headers.append(‘Authorization’, ‘Basic Og==’);
headers.append(
‘Cookie’,
‘DT=DI1usxRWcpSTxSzPRj3Ml6m-w; JSESSIONID=F734A8BCAEBB3D6521A2DFFA0CC00E16; sid=102LxiXZRDsRMWmRZcpHXpsXQ; t=default’
);
headers.append(‘Accept-Encoding’, ‘gzip, deflate, br’);
headers.append(‘Connection’, ‘keep-alive’);
headers.append(‘Access-Control-Allow-Methods’, ‘GET’);
const redirectUri = encodeURIComponent(
'http://localhost:3000/login/callback'
);
const scopes = encodeURIComponent(
'openid profile email somescope.module'
);
const responseType = encodeURIComponent('id id_token');
var requestOptions = {
method: 'GET',
headers: headers,
redirect: 'follow',
};
let response = await fetch(
`https://devaccount.{company_name}.org/oauth2/{authId}/v1/authorize?client_id={clientId}&nonce=2b440773-bcf1-472c-bf73-144483307541&redirect_uri=${redirectUri}&response_type=${responseType}&state=3466fddfdfd45555&scope=${scopes}&code_challenge=qjrzSW9gMiUgpUvqgEPE4_-8swvyCtfOVvg55o5S_es&response_mode=form_post&code_challenge_method=S256&sessionToken=${sessionToken}`,
requestOptions
);
console.log('Status: ', response.status);
console.log(response.text());
if (response.status === 200) {
let data = response.text();
}
};
However, I am getting the following error. It works fine with POSTMAN. I checked the Okta settings to ensure that localhost is in the trusted domains list.
“from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.”
The /authorize endpoint does not support CORS. You must redirect the user’s browser to this endpoint instead.
To which endpoint? It seems the message was cut off.
So how do I make an authorize call?
In the browser, via a redirect. For example, by copy-pasting this URL (from your code snippet above) into the address bar (filling out the necessary parameters of course): https://devaccount.{company_name}.org/oauth2/{authId}/v1/authorize?client_id={clientId}&nonce=2b440773-bcf1-472c-bf73-144483307541&redirect_uri=${redirectUri}&response_type=${responseType}&state=3466fddfdfd45555&scope=${scopes}&code_challenge=qjrzSW9gMiUgpUvqgEPE4_-8swvyCtfOVvg55o5S_es&response_mode=form_post&code_challenge_method=S256&sessionToken=${sessionToken}