Okta Signin-Widget Doesn't Render Until Forced Browser Reload

Hi,

I’ve followed the react/okta-sign-in widget guide here (verbatim): https://developer.okta.com/code/react/okta_react_sign-in_widget/ and notice that when I click the app’s Login button, it shows a blank page. However, if I then force reload my browser, the sign-in widget renders as expected. When placing console.log() in various places, I notice the widget’s constructor doesn’t get called until I force reload the browser. There aren’t any js console errors.
I’ve tried rolling back the version of signin-widget to 4.0.0, 3.0.0 and 2.9.0, but with no luck.

In case this has to do with my app’s URI settings, here is that info:
image

To add further color:
I notice that this.props.authState.isPending seems to remain true unless a forced browser refresh occurs (line 30) within src/Login.js. Therefore, line 31 in that file (i.e. the rendering of the signin-widget) is prevented from executing.

Is there a workaround for this issue?

Thanks!

This is a bug. I’m working on fixing it now. Thanks for reporting it!

1 Like

This guide should be fixed now. The fix is to change login() to the following in Home.js:

async login() {
  this.props.history.push('/login');
}

Agreed and thank you! FYI (for anyone reading this solution) I noticed there is a typo in your route: should read /login and not /. You have it correct in the amended tutorial: https://developer.okta.com/code/react/okta_react_sign-in_widget/ :slight_smile:

Thanks for catching that - I fixed it in my answer above.