withOktaAuth not work after login

React SPA. What should i do to make withOktaAuth to get authState? Thanks.

For functional components (home, login) use useOktaAuth hooks, it works fine. authState can be gotten.
However legacy class components (summary) use withOktaAuth HOC. it doesn’t work.

TypeError: props.authState is undefined.

In code,

<Security
      issuer={`${process.env.REACT_APP_OKTA_ISSUER}`}
      client_id={process.env.REACT_APP_OKTA_CLIENT_ID}
      redirect_uri={process.env.REACT_APP_OKTA_REDIRECT_URI}
    >
      <Route path="/" exact component={App} />
      <Route path="/login" exact component={Home} />
      <Route path="/implicit/callback" component={LoginCallback} />
      <SecureRoute path="/profile" component={Profile} />
      <Route path="/change" component={Summary} />
    </Security>

=============================
summary.js

const SubmitButton = (props) => {
        ...
        return (
            <div>
                <Button
                        onClick= { async () => {
                              const { accessToken } = props.authState;
                              ...
                        }}
                >
                    Submit
            </Button>
            </div>
        );
    }
};

class Summary extends React.Component {
    constructor(props) {
        super(props);
    }
    
    render() {
                  <div>
                        <Headers header={"Submit Changes"} />

                        <SubmitButton ... />
                  </div>
   }
}

export default withOktaAuth(Summary);

What version of the Okta React SDK are you using? Our migration guide might help if you’re upgrading to a new major version.

Thanks @mraible

"@okta/okta-auth-js": "^3.2.5",
"@okta/okta-react": "^3.0.7",
"@okta/okta-signin-widget": "^3.9.0",

In the react spa, all new components use hooks, but legacy component is class, use HOC. All of them in route. Not sure why the class components cannot get authState.

I update to new version 4.x

    "@okta/okta-auth-js": "^4.2.0",
    "@okta/okta-react": "^4.0.0",
    "@okta/okta-signin-widget": "^5.0.0",

Problem solved.

        const accessToken = this.props.oktaAuth.getAccessToken();

props works only in class level. If any button/function want to use the method, need to pass in accessToken.

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