Disable sessionLostComponent replacing current page and add onSessionLost

[p0stw3b]

sessionLostComponent replace page, but I want to stay on the page (and show message(react-toastify) about session lost)

How can I do this? Maybe need to add onSessionLost to OIDCProvider to ability call functions?

Versions

Release v5.3.1

Expected

1. Current Page: /user ...session lost
2. Current Page: /user

Actual

1. Current Page: /user ...session lost
2. Current Page - sessionLostComponent

[guillaume-chervet]

Hi @p0stw3b, I have already thougth about this feature. I think, i will use the children props of sessionlost to display the page content. So the override will have the choice to do anything they want. I am on holiday, May you wait next week for this feature?

Thank you very much for the issue. It is a very nice think to do!

[p0stw3b]

Hi @p0stw3b, I have already thougth about this feature. I think, i will use the children props of sessionlost to display the page content. So the override will have the choice to do anything they want. I am on holiday, May you wait next week for this feature?

Thank you very much for the issue. It is a very nice think to do!

Yea, sure! Thank you!

[guillaume-chervet]

I have update the documentation and the demo. https://github.com/AxaGuilDEv/react-oidc/tree/master/packages/context

The multi auth page now use it => https://black-rock-0dc6b0d03.1.azurestaticapps.net/multi-auth

You can use the children property too.

Does it help you for your use case ?

[p0stw3b]

I have update the documentation and the demo. https://github.com/AxaGuilDEv/react-oidc/tree/master/packages/context

The multi auth page now use it => https://black-rock-0dc6b0d03.1.azurestaticapps.net/multi-auth

You can use the children property too.

Does it help you for your use case ?

I tried, but in my case it's not help, because components are re-render.

Like in the example below, SampleComponent re-render after session lost (and call console.log second time)

const SampleComponent = () => {
  console.log('SampleComponent')
  
  return <div>SampleComponent</div>
}

function App() {
  const [show, setShow] = React.useState(false);
  return (
    <OidcProvider configuration={configurationIdentityServer}>
      <Router>
        <nav className="navbar navbar-expand-lg navbar-dark bg-primary">
          <a className="navbar-brand" href="/">@axa-fr/react-oidc-context</a>
          <button className="navbar-toggler" type="button" onClick={() => setShow(!show)} data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"/>
          </button>
          <div style={show ? { display: "block" } : { display: 'none' }} className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav">
              <li className="nav-item">
                <Link className="nav-link" to="/">Home</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/profile">Profile</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/profile-secure-component">Secure Profile Component</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/profile-secure-hoc">Secure Profile Hoc</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/user-fetch-secure-hoc">Secure User Fetch Hoc</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/user-fetch-secure-hook">Secure User Fetch Hook</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/multi-auth">Multi Auth</Link>
              </li>
            </ul>
          </div>
        </nav>
        <SampleComponent/>
        <div>
          <Route exact path="/" component={Home} />
          <Route exact path="/profile" component={Profile} />
          <Route exact path="/profile-secure-component" component={SecureProfile} />
          <Route exact path="/profile-secure-hoc" component={withOidcSecure(Profile)} />
          <Route exact path="/user-fetch-secure-hoc" component={FetchUserHoc} />
          <Route exact path="/user-fetch-secure-hook" component={FetchUserHook} />
          <Route path="/multi-auth" component={MultiAuthContainer} />
        </div>
      </Router>
    </OidcProvider>
  );
}

[guillaume-chervet]

Thank you again @p0stw3b for your feedback, I can reproduce it. I'am losing my children state. I know how to fix it, I have some internal refactorisation to do.

[guillaume-chervet]

Hi @p0stw3b, it seem to be impossible with react to keep the same children :( Your onSessionLost idea is the best, I will implement it as quickly as i can.

[guillaume-chervet]

I just push an 5.5.0-alpha0 version tell me if i do the job for you.

[p0stw3b]

Hi!) @guillaume-chervet

What about create simple OidcProvider without routing and add events (Oidc.eventNames) to useOidc hook?

• OidcProvider has own routing and react apps often have own routing - this duplication seems wrong
• With event names in useOidc developer can use/or not this in his own routing, call toastify or something else

[guillaume-chervet]

It is a good idea. It can be a good alternative. I have to think about this more. May aim is to implement the library in order to enforce security the more as possible. I also aim an uniformisation of the base application code at AXA France..

If routing is not at top level and configurable with mistake it can impact the security.

The react library is very small and also the vanilla library version is fully usable with react for more flexible case. I aim to clean it and document it more. I have to think more about your good idea ;)