[okta-react] unnecessary reloads after landing on /implicit/callback

[sleepwalky]

I'm submitting this issue for the package(s):

• [ ] jwt-verifier
• [ ] okta-angular
• [ ] oidc-middleware
• [x] okta-react
• [ ] okta-react-native
• [ ] okta-vue

I'm submitting a:

• [ ] Bug report
• [ ] Feature request
• [x] Other (Describe below)

Current behavior

Application is reloaded during redirection after landing on /implicit/callback url.

Expected behavior

Redirection via react-router and history API, so okta-react won't trigger full application reload.

In previous version 1.4.1 I was creating Auth service manually and I could pass history object in params, so redirection in Auth service was handled via history API. But now there is no such possibility.

Environment

• Package Version: 3.0.0
• Browser: Chrome
• OS:
• Node version (node -v):
• Other:

[sleepwalky]

What was the motivation for uncoupling history API from AuthService?

[swiftone]

@sleepwalky - Thanks for the report.

The motivation was that we now support multiple routers, not just react-router, so we couldn't make assumptions about the API for any given router object.

For clarity, are you using a HashRouter or BrowserRouter (so we understand the impact of different options).

[swiftone]

Internal ref: OKTA-289846

[sleepwalky]

The motivation was that we now support multiple routers, not just react-router, so we couldn't make assumptions about the API for any given router object.

Totally makes sense.

I'm using https://reacttraining.com/react-router/web/api/Router and I just pass same history object that I was passing to auth service (version 1.4.1).

Quick solution that came into my mind is extending https://github.com/okta/okta-oidc-js/tree/master/packages/okta-react#configuration-options by adding an optional prop something like 'redirectCallback' which will default to window.location.assign or whatever is used in current implementation. React-router users can pass history.push into it. Don't know about other routers.

[swiftone]

Quick solution that came into my mind is extending /packages/okta-react@master#configuration-options by adding an optional prop something like 'redirectCallback' which will default to window.location.assign or whatever

Great minds! That's the same basic idea we're considering. Any router should be able to pass a function that calls their history controller as appropriate.

[asharron]

Hey! Is there any known work around for this in the meantime? Working on a new application and the app will successfully authenticate, but I believe this is causing a troublesome redirect for me and would like to use the history API for react router to handle it.

Let me know if I can help in any way!

[license2e]

@asharron I'll submit a PR to fix this issue, but it would be nice to get this merged first: https://github.com/okta/okta-oidc-js/pull/772 (although the fix doesn't technically doesn't depend on it)

In the meantime, just create a SecureRoute component, with the following code:

import React from 'react'
import { Route } from 'react-router-dom'
import { useOktaAuth } from '@okta/okta-react'

const SecureRoute = (props) => {
  const { authService, authState } = useOktaAuth()

  if (!authState.isAuthenticated) {
    if (!authState.isPending) {
      let fromUri = authService.getFromUri() // <--- this is the fix
      // optionally, you could add extra checks to change the redirect post-auth here
      authService.login(fromUri)
    }
    return null
  }

  return <Route {...props} />
}

export default SecureRoute

[license2e]

The bug: https://github.com/okta/okta-oidc-js/blob/master/packages/okta-react/src/SecureRoute.js#L23

Current code:

const fromUri = history.createHref(history.location);

Should be:

const fromUri = authService.getFromUri();

[swiftone]

@license2e - thanks for the report. I'm pushing to raise the priority on the rendering issue, so I'll try to look at this one as well.

Have signed our CLA per https://github.com/okta/okta-oidc-js/blob/master/CONTRIBUTING.md ?