Can't enable monitorSession

[mobwiz]

There is a feature in oidc-client-js which can check session via /connect/checksession Endpoint. When the session in OP is changed, the client will raise and session Changed event.

But this feature can't enabled in react-oidc-context. It fails to auth when this feature enabled and go in infinity loop ..

[pamapa]

I am not using this the session monitor feature. But others do i guess.

@kherock Are you using the session monitor feature with this library?

[pamapa]

Can you help finding the infinity loop? Could you provide a logging? See https://authts.github.io/oidc-client-ts/#logging.

[davidbourrel]

I have the same issue, I can't use monitorSession: true otherwise my app restart in infinity loop.

App.tsx:

AppRouter.tsx:

ProtectedApp.tsx:

import { PropsWithChildren, useEffect, useState } from 'react';
import { hasAuthParams, useAuth } from 'react-oidc-context';
import { AuthErrorMessage } from './AuthErrorMessage';
import { AuthLoader } from './AuthLoader';

const ProtectedApp = ({ children }: PropsWithChildren) => {
  const auth = useAuth();
  const [hasTriedSignin, setHasTriedSignin] = useState(false);

  /**
   * Do auto sign in.
   *
   * See {@link https://github.com/authts/react-oidc-context?tab=readme-ov-file#automatic-sign-in}
   */
  useEffect(() => {
    if (
      !hasAuthParams() &&
      !auth.isAuthenticated &&
      !auth.activeNavigator &&
      !auth.isLoading &&
      !hasTriedSignin
    ) {
      auth.signinRedirect();
      setHasTriedSignin(true);
    }
  }, [auth, hasTriedSignin]);

  return (
    <>
      {auth.error ? (
        <AuthErrorMessage
          message="Something went wrong during the authentication process."
          error={auth.error?.message}
        />
      ) : auth.isLoading ? (
        <AuthLoader />
      ) : !auth.isAuthenticated ? (
        <AuthErrorMessage message="Something went wrong during the authentication process. Unable to sign in." />
      ) : (
        children
      )}
    </>
  );
};

export default ProtectedApp;

My oidc settings:

Everything works except monitorSession :s Someone has an idea ?

Thank you so much !

[davidbourrel]

@zach-betz-hln , any idea ? :D my implementation come from your sample, everything works except monitorSession argg ^^

[zach-betz-hln]

@davidbourrel am not sure.

The monitorSession prop works as expected in the sample repo.

Can you reproduce your issue using the sample repo?

[davidbourrel]

@davidbourrel am not sure.

The monitorSession prop works as expected in the sample repo.

Can you reproduce your issue using the sample repo?

I'm gonna try ^^

[davidbourrel]

I didn't reproduce because lots of problems with docker and other with windows :s

I just disabled monitorSession and do it by myself with setInternal and localStorage ^^

[SLionB]

The issue is reproduceable with the sample repo. Setting monitorSession: true sets the app in an infinite login/logout loop.

[zach-betz-hln]

@SLionB did you change any config in the sample repo?

It works as expected for me. Here's a screen grab:

https://github.com/user-attachments/assets/424c201f-a72a-4d1e-9ae0-3f10c04d80c4

[SLionB]

Thank you for the video explanation. Indeed I tried the React Demo application without any modifications (except the Keycloak connection details) because I used an existing Keycloak instance in our infrastructure.

Well, I am sure the issue is Keycloak version specific. This specific one lacks the setting -> Logout settings > check Front channel logout which I think is crucial for this feature to work as expected.

[zach-betz-hln]

I think you're correct on that Keycloak setting being required.

Hovering over that Front channel logout tooltip in their admin menu, it says:

When true, logout requires a browser redirect to client. When false, server performs a background invocation for logout.

[SLionB]

I have an update on this issue for anyone interested. This functionality may be not supported by all browsers ( I am only using Chrome/Brave)

. Modern Browsers with Tracking Protection In the latest versions of some browsers, various cookies policies are applied to prevent tracking of the users by third parties, such as SameSite in Chrome or completely blocked third-party cookies. Those policies are likely to become more restrictive and adopted by other browsers over time. Eventually cookies in third-party contexts may become completely unsupported and blocked by the browsers. This means that implementations that use a session cookie for Single Sign-Out detection may not work. As a result, when a user logs out in another window, the application will not be logged out.

https://www.keycloak.org/docs/latest/securing_apps/#_modern_browsers