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

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 https://github.com/okta/samples-js-react/tree/master/okta-hosted-login
  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.
  7. I tried googling the Response to preflight request error, found this stack overflow post https://stackoverflow.com/questions/35588699/response-to-preflight-request-doesnt-pass-access-control-check
  8. The top stack overflow answer suggests turning off CORS, so I go here https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome
  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.

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

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

1 Like

That was it thanks Robert!

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

@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.