OKTA SSO OpenidConnect

Questions OAuth/OIDC
1

I’m implementing the OKTA for a react application, I configured all as per the documentation in React and OKTA but I’m getting the below error. What am I missing?

×

Unhandled Rejection (AuthApiError): Api validation failed: authRequest

(anonymous function)

  85 |         if (err.errorCode === 'E0000011') {  
86 |             storage.delete(STATE_TOKEN_KEY_NAME); 
 87 |         }> 
88 |         throw err;  
89 |     });  
90 | }  
91 | function get(sdk, url, options) {

On Network tab I see
errorSummary: “The ‘username’ and ‘password’ attributes are required in this context.”
but this shouldn’t be the case right? It should redirects to OKTA login and must be authenticated

2

Are you using a sample app provided by Okta or have implemented this in your own app? Did you follow a guide? Would you be able to share your config code here so we might better understand what’s going on?

3

Hi @namala4921 did you find any solution,

I m also getting errors on the console as below:

Access to fetch at 'https://####.oktapreview.com/oauth2/default/v1/revoke' from origin 'https://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.

fetchRequest.ts:50 POST https://####.oktapreview.com/oauth2/default/v1/revoke net::ERR_FAILED
t.a @ fetchRequest.ts:50
a @ http.ts:44
post @ http.ts:109
(anonymous) @ revokeToken.ts:42
Promise.then (async)
F @ revokeToken.ts:20
value @ PromiseQueue.ts:44
(anonymous) @ PromiseQueue.ts:26
value @ PromiseQueue.ts:25
(anonymous) @ browser.ts:269
u @ runtime.js:45
(anonymous) @ runtime.js:274
e. @ runtime.js:97
(anonymous) @ browser.ts:22
ne @ browser.ts:18
value @ browser.ts:269
(anonymous) @ browser.ts:328
u @ runtime.js:45
(anonymous) @ runtime.js:274
e. @ runtime.js:97
a @ browser.ts:19
Promise.then (async)
u @ browser.ts:17
a @ browser.ts:19
Promise.then (async)
u @ browser.ts:17
a @ browser.ts:19
Promise.then (async)
u @ browser.ts:17
(anonymous) @ browser.ts:22
ne @ browser.ts:18
value @ browser.ts:299
onClick @ UserMenu.js:92
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
executeDispatch @ react-dom.development.js:8243
processDispatchQueueItemsInOrder @ react-dom.development.js:8275
processDispatchQueue @ react-dom.development.js:8288
dispatchEventsForPlugins @ react-dom.development.js:8299
(anonymous) @ react-dom.development.js:8508
batchedEventUpdates$1 @ react-dom.development.js:22396
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22413
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
construct.js:15 Uncaught (in promise) AuthApiError
at https://localhost:3000/static/js/1.chunk.js:93056:172

4

Hi @namala4921 did you find any solution?

I m also getting this console error:
/oauth2/default/v1/revoke’ from origin ‘https://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

5

Have you added “https://localhost:3000” as a Trusted Origin for CORS requests?

1 Like
6

Thank you @andrea it worked.