React integration example

reactjs

#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?


#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