How to instantiate okta 5 in index.tsx

Questions
1

We originally created our okta security with version 3 in index.tsx, which is not a react component. The ReactDOM.render there, wrote the Router and Security tags their around our app component defined in App.tsx. in the index.tsx file as well, we had an axios interceptor that got the access token and made a bearer token out it for other purposes.

Now with security tag’s new restoreOriginalUri property, it seems we have to use a react hook (useHistory) to populate a value for the proprty. but you can’t use a hook in a non react component like index.tsx of a create react app solution. What do we do? Following the docs and creating the bearer token in App.tsx seems to be too late and we get an error on early api access that need the bearer token. Uncaught (in promise) AuthSdkError: getUserInfo requires an access token object.

2

@jsfranko Can I ask what is the doc you followed? Is there a link?

3

I followed the section of the readme.md titled

Creating React Router Routes with function-based components

from this location

@okta/okta-react

We original set this up in index.tsx with React 3 like this. With no need for a property value that required a hook to retrieve, we could do this outside of a react functional component and it ran soon enough to allow us to get an access token and supply it as Bearer to downstream api’s. Now that I’ve moved this tag into App.tsx to get the value for the property, it doesn’t happen soon enough. That’s my theory.

ReactDOM.render(
  <Router>
    <Security authService={authService}>
      <SecureRoute path="/" exact component={App} />
      <Route path="/authorization-code/callback" component={LoginCallback} />
    </Security>
  </Router>,
  document.getElementById('root')
);
4

I’ve also found this link, and trying to following but getting myself into a loop.

useHistory() needs to be inside Router

5

The design of our app is as follows

  • Index.html has the div with id root
  • index.tsx calls ReactDOM.render()
  • The render() has (BrowserRouter as Router) with a custom React FC component (SecuritySetup) with the security code from the readme.md in it.
  • SecuritySetup has Security with one SecureRoute with path /, exact true, and component App (which I think is the source of the circular logic. And it has one Route with the auth callback.

If I put the BrowserRouter as Router tag in the SecuritySetup component around Security, I get a login form, but afterwards, I get the error in the previous reply. if it is in index.tsx as the outline describes, I get the login form, and then the endless loop.

6

embarrassing, this one was not about okta. I was calling two different instances of okta. one to set the up the interceptor, and another to call the services. My confusion stemmed from someone defining an export const called http, and use axios.create to give it its value. but then everywhere an api was called with axios, http was imported as the name axios, except for one place, which was were the security was set up. here they imported by its default name http and set up the interceptors. seeing this, I thought it should be axios instead of http, but didn’t correct the import. so two different instances. Once I fixed the import, all was well.

7

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.