Preserving authentication in new tabs

[nk922]

How can I make sure that authentication state is preserved when I open a link in a new tab? I am using Keycloak integration. when I am opening a link that's in a ProtectedRoute in a new tab it's telling that I am not authenticated. Whereas if I simply click on that link in the same browser tab it works as expected. I get the same behavior when I type the URL in the browser's address bar directly as well.

[jbouder]

Essentially when you open a new tab or navigate to a URL directly, you are causing the app to reinitialize, which currently resets the auth state. Clicking on a link however, which is using the react router, does not reset the app and maintains current auth.

That said, it looks like there might be another config or 2 needed to get automatic sign in to work when the app reinitializes. Please try the steps here: https://github.com/authts/react-oidc-context?tab=readme-ov-file#automatic-sign-in

Let me know if that works.

[nk922]

I only added the below to the config in keycloak.ts file.

userStore: new WebStorageStateStore({ store: window.localStorage }),

Did not add the useEffect below that in that file.

[jbouder]

Might be worth a shot, while I get a few things up on my end for testing.

[nk922]

sounds good... what can I house in the useEffect in keycloak.ts? Right now, this is all I have in that file:

import { WebStorageStateStore } from 'oidc-client';
import { getSignInRedirectUrl } from './auth';

const keycloak = {
authority: process.env.SSO_AUTHORITY ? process.env.SSO_AUTHORITY : '',
client_id: process.env.SSO_CLIENT_ID ? process.env.SSO_CLIENT_ID : '',
redirect_uri: getSignInRedirectUrl(),
userStore: new WebStorageStateStore({ store: window.localStorage }),
//userStore: new WebStorageStateStore({ store: window.sessionStorage }),
};

export default keycloak;

[jbouder]

Ok, pretty sure I got everything working as expected here: MetroStar/comet-starter#255.

A couple of key points:

• the keycloak config was definitely needed
• we need to check if keycloak auth state is loading to prevent being redirected to the sign in page
• updated the redirect uri to the dashboard, that can be updated to whatever you need

[nk922]

thanks, it appears to be working for my use case. I'll do some additional testing and share if I find anything odd to report.

Thanks a lot!

[jbouder]

Definitely let me know how testing goes. I'm going to test this a bit more on my end and if all is well, will plan to merge the updates.

[nk922]

thanks. Also, would it be possible to not persist the authentication between browser window close and re-opening?

Being able to persist auth state between tabs is awesome but behavior of login persisting even after user closing the browser could be problematic. It may be ok for some of the apps but for apps with sensitive data they may want the login to not persist after closing the browser.

[jbouder]

That i'm not sure about. Since the library is using browser storage for persisting auth, you only have 2 options, local storage and session storage. I believe session storage would not persist across browser windows, but it also does not persist across tabs, which is something you want.

I would suggest reviewing the react-oidc-context repo for further information: https://github.com/authts/react-oidc-context