Okta-react app SSO not working

[jim.fang]

Hi developers,

I am stuck in an integration issue.

1. create a client in okta prod environment for my app.
2. use okta samples-js-react to do the testing. The web application is hosted in S3. Access via AWS CloudFront.

In the application, i configured clientId, Issuer, RedirectURI correctly and i can see the success login record in okta prod.
However, i got pending status and null properties in authState and userInfo. I can see some token in cookies.

Does anyone give me some hints what is wrong there and how can i do try for next step? Thanks.

[phi1ipp]

You need to check your network tab to see the traffic and the outcome of authn/authorize requests

[jim.fang]

Thanks @phi1ipp.
I checked the network traffics. It looks fine. request/response 200. It went to okta hosted address, then redirect back.

only thing i cannot understand is that why authState from okta-SDK, still show pending and isAuthenticated: false.

[gpadma]

Hi @jim.fang,

Could you share the network request/responses, do you see any errors/failures in Okta System logs or in the console ?

Do you have any custom code or is it just samples-js-react ? Could you confirm the okta-react version ?

[jim.fang]

@gpadma Thanks very much.
I tried this on okta-prod env. i cannot reach the server side log. But i will try nonprod sandbox later.

Only samples-js-react.
“@okta/okta-react”: “^3.0.7”,
“@okta/okta-auth-js”: “^3.2.5”

I will share the network traffic. console capture and cookies.
I tried to decode cookies value okta-oauth-state, but got unreadable display.
Would you please tell me how to decode it?

[dragos]

Hi @jim.fang

Can you please confirm that the URL “https://ecco.uat.nsw.gov.au/implicit/callback” is added in Okta under Admin >> Applications >> your OIDC application >> General tab >> Login Redirect URIs? Based on our logs, the OIDC application errors out due to the callback URL not being whitelisted.

[jim.fang]

@dragos Thanks very much.
I am asking administrator of okta to confirm this. Very helpful.

[jim.fang]

@dragos The administrator in okta prod has checked this. Is there any way to work around? Thanks
She told me:

this URL https://ecco.uat.nsw.gov.au/implicit/callback cannot be whitelisted
the base URL is already whitelisted in Okta : https://ecco.uat.nsw.gov.au/

[dragos]

Hi @jim.fang

Can you please confirm with the Okta administrator if the URL is added correctly as “https://ecco.uat.nsw.gov.au/implicit/callback” for the specific OIDC application under Admin >> Applications >> oidc application >> General >> Login Redirect URIs?

The URL must be added exactly as above in Okta so that Okta can redirect the user to the callback endpoint with the authorization code or JWTs. The base URL whitelisting in Trusted Origins is not enough to perform the flow successfully.

[jim.fang]

Thanks @dragos. I got the not whitelisted error is because the URL miss icare.
It is fixed. Have a new try now.

[jim.fang]

Hi @dragos

I met new problem in the sandbox.
Configuration looks fine.

But 401 error. Any comments? Thanks.

|error|“invalid_client”|
|error_description|“Client authentication failed. Either the client or the client credentials are invalid.”|

[dragos]

Hi @jim.fang

The error occurs because the OIDC application in Okta is of type “web” which, by default, has a client secret. This issue can be resolved by creating a new OIDC application in Okta of type “Single Page Application (SPA)” and then linking it with the React app. This new OIDC application will not have a client secret, thus allowing the Okta SDK to perform the flow successfully.

I have provided this steps to the Okta administrator that opened a support ticket with us in regards to this issue and she will send you shortly a new client ID to use in the application.

[jim.fang]

Hi @dragos,

Thanks very much. With the help of you and Okta administrator, sample-js-react works fine.
Appreciate your 5-Star support.

Regards,
Jim