Okta React.js Client Screen is Blank after login with errors

Questions OAuth/OIDC
, ,
1

Hi, so my react.js client I got from okta shows a blank screen after I authenticate (successfully). Looking for help on how to fix this. I would really appreciate any guidance! I have no previous experience using react. Here are the steps I followed:

  1. Using Google Chrome
  2. Clear Cache and Cookies
  3. npm start react.js client using okta hosted login samples-js-react/okta-hosted-login at master · okta/samples-js-react · GitHub
  4. Turn on Google Chrome’s network inspecting tool
  5. Click Log-in, get to the sign in portal, I enter my credentials and click log-in
  6. Get a blank screen and these errors. Inspecting the HTTP headers I received I see I got my ID token and using jwt.io I verified it’s contents.
    image
    image2098×1256 626 KB
  7. I tried googling the Response to preflight request error, found this stack overflow post javascript - Response to preflight request doesn't pass access control check - No 'Access-Control-Allow-Origin' header - Stack Overflow
  8. The top stack overflow answer suggests turning off CORS, so I go here javascript - Disable same origin policy in Chrome - Stack Overflow
  9. I enter the following command in my terminal “open -a Google\ Chrome --args --disable-web-security --user-data-dir”
  10. I quit the app, close the tab, clear cache / cookies, and start everything up again and I still get the same error.
2

In the Okta Developer Console, under API -> Trusted origins, can you confirm that localhost:8080 is in the list?

image
image.png1666×124 5.78 KB

This should work without having to disable the same origin policy in chrome.

3

That was it thanks Robert!

4

This step isn’t included in the react.js quickstart guide or github readme, i think it should be added.

5

@will If you specify http://localhost:8080 as a login redirect URI when creating your OIDC app, the Trusted Origin is created for you. I agree that if you change it in your app, the Trusted Origins should be updated, but they’re not. I opened an issue for this back in May.