React integration example

Hello,
I have made integration with OKTA on this example: https://developer.okta.com/code/react/okta_react_sign-in_widget.html

I set SecureRoute for home page inside “App” component:
“SecureRoute path=’/’ exact={true} component={Home}”

As result:
“Warning: setState(…): Cannot update during an existing state transition (such as within render or another component’s constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.”"

Further investigations led me to “onAuthRequired” method:
onAuthRequired({ history }) {
(“history.push(’/login’)”);
}

which causes setState inside"render".

What is the correct solution to redirect unauthorized users to my custom “/login” page?

3 Likes

@Dziamianchyk I am seeing this same issue as well. I’ve noticed that the sign on widget doesn’t load at times and requires the user to reload the page for it to render properly.

What version of the widget are you using?

Is this something that is reproducible every time or is intermittent.

Using the latest SDK/widget. Essentially copy/pasted from the documentation.

Steps to reproduce

  1. create-react-app new-app
  2. Install latest Okta libraries
  3. Follow Okta React documentation
  4. Click any route for a secured resource (in my code below, this is /app/route) - WORKS (but throws console error message)
  5. Click any unsecured resource (like / in my example below)
  6. Click any secured resource (/app/route) - FAILS to render and throws same console message as above

Here is my app.js file, which you can use to reproduce the issue.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Security, ImplicitCallback, SecureRoute } from '@okta/okta-react';
import Home from './pages/Home';
import Login from './pages/Login';
import AppHome from './app/Home';
import config from './config';

function customAuthHandler({ history }) {
  // Redirect to the /login page that has a CustomLoginComponent
  history.push('/login');
}

const App = () => (
  <Router>
    <Security
      issuer={config.oidc.issuer}
      client_id={config.oidc.clientId}
      redirect_uri={config.oidc.redirectUri}
      onAuthRequired={customAuthHandler}
    >

      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/callback" component={ImplicitCallback} />
        <Route path="/login" component={Login} />
        <SecureRoute path="/app/home" component={AppHome} />
      </Switch>
    </Security>
  </Router>
);
export default App;

The issue triggered by the customAuthHandler function. history.push('/login') is what is throwing the error (visible in console) and will cause the login widget to not reliably render without refreshing the page.

Thanks,

I have the same warning when i use history.push('/login');

I created an issue and pull request for the error:

Issue: https://github.com/okta/okta-oidc-js/issues/138

PR: https://github.com/okta/okta-oidc-js/pull/139

1 Like

It seems that issue is there again. I’m using latest React and React Router.

This is happening to me as well. Seems like the recommended way is not following react-router-dom best practices?

react-router-dom@5.1.2
@okta/okta-react@3.0.2
@okta/okta-signin-widget@4.3.2