React SecureRoute render behavior

[jspurgeon]

SecureRoute in @okta/okta-react 2.0.0 is not working as a Route should using the render attribute. Using the sample application from here GitHub - okta/samples-js-react: React Auth SDK sample, if you change the line in app.jsx from

to

<SecureRoute path="/profile" render={(routeProps) => <Profile {…routeProps} />}

It will not redirect you the login page.

[farjang]

I am getting the same issue, it won’t redirect to login when use render function vs component. Will this be fix?

[sshort]

I am seeing the same issue. Are there any plans to fix this? It is preventing my project from upgrading to the current version 3.0.1

[justin-dsg]

I got around this by replacing the render={() => xxx} call with component={Xxx}.

You can simply define Xxx up above, and that way you can pass in all the props you need, and still call it using the component prop.

Example:

const Portfolio = () => (
    <PortfolioPage
      positions={state.history.positions}
      history={state.history}
    />
  );

<Router>
      <Security
        issuer={config.okta.issuer}
        clientId={config.okta.client_id}
        redirectUri={config.okta.redirect_uri}
        onAuthRequired={onAuthRequired}
        pkce={true}
      >
        <SecureRoute exact path="/portfolio" component={Portfolio} />
      </Security>
</Router>