authState getting null when changing the route.

[ksankumar]

trafficstars

Describe the bug

After upgrading the react-router-dom v6 to react-router v7, getting authState null when we update the URL.

   "@okta/okta-auth-js": "^7.9.0",
    "@okta/okta-react": "^6.9.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router": "^7.0.2",

Reproduction Steps?

const { oktaAuth, authState } = useOktaAuth()
  const location: any = useLocation()
  const authStateExists: boolean = !!authState

  useEffect(() => {
    if (!authStateExists) {
      return
    }
    if (!authState?.isAuthenticated) {
      void oktaAuth.signInWithRedirect({
        originalUri: location.pathname,
      })
    }
  }, [location, oktaAuth, authStateExists, authState?.isAuthenticated])
  console.log(authState, authState?.isAuthenticated)
  if (!authState || !authState?.isAuthenticated) {
    return <Loader />
  }

SDK Versions

System: OS: Windows 10 10.0.19045 CPU: (20) x64 13th Gen Intel(R) Core(TM) i7-13800H Memory: 42.44 GB / 63.64 GB Binaries: Node: 20.11.1 - C:\Program Files\nodejs\node.EXE Yarn: 4.5.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD Watchman: 20240310.093207.0 - C:\ProgramData\chocolatey\bin\watchman.EXE Browsers: Chrome: ETM.ico Edge: Chromium (127.0.2651.74) Internet Explorer: 11.0.19041.4355 npmPackages: @okta/okta-auth-js: ^7.9.0 => 7.9.0 @okta/okta-react: ^6.9.0 => 6.9.0 react: ^19.0.0 => 19.0.0 react-dom: ^19.0.0 => 19.0.0 react-router: ^7.0.2 => 7.0.2

Additional Information

No response

[jaredperreault-okta]

@ksankumar Can you explain:

authState null when we update the URL.

What do you mean by "update the URL"?

[ksankumar]

@jaredperreault-okta Yes. I'm getting null (authState), when I ever I change the queryParams with the help of setSearchParams

import { useSearchParams } from 'react-router-dom'

const [searchParams, setSearchParams] = useSearchParams()

const setQueryParam = useCallback(
  (params: ParamsType): void => {
    setSearchParams((existingParams) => {
      const updatedParams = new URLSearchParams(existingParams)
      Object.entries(params).forEach(([key, value]) => {
        if (value) {
          updatedParams.set(key, value)
        } else {
          updatedParams.delete(key) // Optionally remove the param if the value is empty
        }
      })
      return updatedParams
    })
  },
  [setSearchParams], // Only setSearchParams is needed here
)

setQueryParam({empId: 'E123'})

Happening only with react-router: ^7.0.2

[jaredperreault-okta]

useOktaAuth is a React Context, and the authState value defaults to null. Is it possible your component is being mounted outside of your <Security /> component? (Security is the Context Provider)

[Bernardo-ive]

having the same issue, did you find a solution ?