React integration example

Questions
1

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
2

@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.

3

What version of the widget are you using?

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

4

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,

5

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

6

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
7

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

8

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