5.x to 6.x, running as a service, reload fails

[ahmednkhan24]

I'm submitting a:

• Bug report
• Feature request
• Other (Describe below)

Current behavior

When a user is logged in, and a SPA is running Okta as a service, a page refresh won't render content to the DOM.

Expected behavior

When a user is logged in, and a SPA is running Okta as a service, a page refresh should render content to the DOM.

Minimal reproduction of the problem with instructions

• Clone this minimal demo repo
• Update the values in src/config.js file to an Okta tenant you have access to.
• Run a yarn && yarn start to install dependencies and start the app
• Log into the app, and click the "Refresh entire application to test persistence" button (the app should load)
• Uncomment line 12 in src/App.js and line 25 in src/components/Home.js (oktaAuth.start() and oktaAuth.stop())
• Log into the app, and click the "Refresh entire application to test persistence" button (the app does not load)

Extra information about the use case/user story you are trying to implement

If a user is already logged into the app and chooses to refresh the page for whatever reason, the user should continue to be logged in and should continue to see the content of the app on the screen.

Environment

• Package version:

  •  {
       "@okta/okta-auth-js": "^5.5.0",
       "@okta/okta-react": "^6.2.0",
       "@okta/okta-signin-widget": "^5.2.2"
     }

• React version:

  •  {
       "react": "^16.13.0",
       "react-dom": "^16.13.0",
       "react-router": "^5.2.0",
       "react-router-dom": "^5.2.0",
       "react-scripts": "4.0.3"
     }

• Browser: Google Chrome
• OS: MacOS 11.5.2
• Node version (node -v): v14.16.0

Configuration

Okta SPA Setup:

[denysoblohin-okta]

Thanks for submitting this issue.
With okta-react you don't need to start service because it does it for you.

okta-react/src/Security.tsx

Line 75 in 9a2e9a6

oktaAuth.start();

The source of your issue is as follows:

• You call oktaAuth.start() in the beginning
• The actual state is read from storage and is passed to handlers subscribed with oktaAuth.authStateManager.subscribe (okta-react's <Security/> component does this only in useEffect, so it misses state update this at this point)
• useEffect is called for <Security/> which starts oktaAuth service and now subscribes to oktaAuth.authStateManager

Looks like the fix would be to call oktaAuth.authStateManager.getAuthState()) in useEffect of <Security/>

[denysoblohin-okta]

Internal ref: OKTA-435836