Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Silent signin causes rerender on component wrapped with OidcSecure

See original GitHub issue

Issue and Steps to Reproduce

I have a following structure of application: App.jsx:

import React from 'react';
import { AuthenticationProvider, InMemoryWebStorage, oidcLog } from '@axa-fr/react-oidc-context';

import Routes from 'src/Routes';
import {
  Authenticating,
  CallbackComponent,
  NotAuthenticated,
  NotAuthorized,
  SessionLostComponent,
} from 'src/components/Auth';
import oidcConfiguration from 'src/oidc-configuration';

function App() {
  return (
    <AuthenticationProvider
      authenticating={Authenticating}
      callbackComponentOverride={CallbackComponent}
      configuration={oidcConfiguration}
      isEnabled
      loggerLevel={oidcLog.DEBUG}
      notAuthenticated={NotAuthenticated}
      notAuthorized={NotAuthorized}
      sessionLostComponent={SessionLostComponent}
      UserStore={InMemoryWebStorage}
    >
      <Routes />
    </AuthenticationProvider>
  );
}

export default App;

oidc-configuration.js

const oidcConfiguration = {
  acr_values: 'neededAcrValues',
  client_id: 'myClientId',
  redirect_uri: 'https://chat-app.example.com/auth',
  response_type: 'code',
  post_logout_redirect_uri: 'https://chat-app.example.com',
  scope: 'openid',
  authority: 'https://identity-provider.example.com',
  silent_redirect_uri: 'https://chat-app.example.com/silent-renew',
  automaticSilentRenew: true,
  loadUserInfo: true,
  monitorSession: true,
};

export default oidcConfiguration;

Routes.jsx

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import { OidcSecure } from '@axa-fr/react-oidc-context';

import Chat from 'src/components/Chat ';

const history = createBrowserHistory();

function Routes() {
  return (
    <OidcSecure>
      <Router history={history}>
        <Switch>
          <Route component={Chat} path="/" />
        </Switch>
      </Router>
    </OidcSecure>
  );
}

export default Routes;

And after every silent renew I get my chat component rerender which is frustrating because i loose my component state. My Chat component have its own nested routing for selected conversation inside the chat.

Versions

“@axa-fr/react-oidc-context”: “3.1.0-alpha.0”,

Screenshots

Expected

Just silent renew - no rerender should happen.

Actual

After every silent renew I get my chat component rerender which is frustrating because i loose my component state.

Additional Details

I’ve tried to protect routing like this:

withOidcSecure(Dashboard)
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import { OidcSecure } from '@axa-fr/react-oidc-context';

import Chat from 'src/components/Chat ';

const history = createBrowserHistory();

function Routes() {
  return (
    <OidcSecure>
      <Router history={history}>
        <Switch>
          <Route component={withOidcSecure(Chat)} path="/" />
        </Switch>
      </Router>
    </OidcSecure>
  );
}

export default Routes;

But it caused a rerender on every nested route change