Problem with basename and oidc-client

[alex-efsth]

Issue and Steps to Reproduce

The problem https://github.com/AxaFrance/oidc-client/issues/586 does not seem to be solved yet. I also noticed that the OidcKeepAliveServiceWorker.json seems to completely ignore the base name so far. For example, I set

<BrowserRouter basename="/test">
in vite.config.ts:  base: '/test/', 
in package.json: "homepage": "/test/",
in index.html  <base href="/test/"/>

so my local environment runs under http://localhost:4200/test/ but the ServiceWorker keeps looking at http://localhost:4200/OidcKeepAliveServiceWorker.json and sometimes(?) runs into an 404 Error.

However, the main problem is that the page initializes after login, but then immediately redirects to localhost:4200, where all I see is a white page.

Versions

7.60

Thank you for your help.

[guillaume-chervet]

Hi @alex-efsth , thank you for your issue.

What doe look like ypur configuration? Did you setup oidcprovider at the top level of your application?

React oidc is not link to react router it should be declare before it.

[guillaume-chervet]

Hi @alex-efsth , any news about it?

[alex-efsth]

Hi! Yes, I think, the problem is that /OidcKeepAliveServiceWorker.json is hardcoded in the library, that conflicts with the vite.config.ts base setting. Right now, I'm trying to code a workaround without setting the vite.config.ts base.

Best regards, Alex

[guillaume-chervet]

Thank you @alex-efsth i understand the problem. May I can fix it from inside the library?

[alex-efsth]

Hey :) Yes, this should be relatively easy to do, with an optional basepath parameter that the user can specify to the library. If this is set, it would have to be within the library in the beginning of /OidcKeepAliveServiceWorker.json in every call.

[svenbeck27]

@guillaume-chervet any update on this, we have the same issue

[guillaume-chervet]

hi @svenbeck27 @alex-efsth ,

Very sorry I did not take time to look at this. What does look like your service worker path in your configuration given to the provider ?

Do you think to add a property like bellow will help ?

// This configuration use hybrid mode
// ServiceWorker are used if available (more secure) else tokens are given to the client
// You need to give inside your code the "access_token" when using fetch
const configuration = {
  service_worker_relative_url: "/OidcServiceWorker.js", // just comment that line to disable service worker mode
  service_worker_only: false,
  service_worker_keep_alive_relative_url: "./test/OidcKeepAliveServiceWorker.json"
};

[david-marx]

Hi @guillaume-chervet

I can elaborate for @svenbeck27 on the issue description.

We basically have a setup where we can run our web application locally with a dockerized environment without a basename and serve our production build with a basename, let's say /test/.

Locally everything seems to be working fine. But in production we are stuck on the loading screen and we do net get past the tryKeepExistingSessionAsync_begin log.

Our configuration looks like this, basically most of it copy pasted from the docs:

const configuration: OidcConfiguration = {
  authority: window.AUTH.AUTHORITY,
  client_id: window.AUTH.CLIENT_ID,
  redirect_uri: window.location.origin + "/authentication/callback",
  silent_redirect_uri: window.location.origin + "/authentication/silent-callback",
  scope: `openid profile email offline_access ${userMetadataScope} ${projectRolesScope} ${audienceScope}`, // offline_access scope allow your client to retrieve the refresh_token
  service_worker_relative_url: import.meta.env.BASE_URL + "OidcServiceWorker.js", // just comment that line to disable service worker mode
  service_worker_only: false,
  demonstrating_proof_of_possession: false, // demonstrating proof of possession will work only if access_token is accessible from the client (This is because WebCrypto API is not available inside a Service Worker)
};

With the import.meta.env.BASE_URL we are able to access the OidcServiceWorker.js file correctly in both local and production, as it adds the /test/ base name on production.

We assume that internally in the library the file references are breaking because we do not provide the basename here. For example for the OidcKeepAliveServiceWorker file.

I hope the description is clear, if not please let me know.

Appreciate you help on that, thank you!

[alex-efsth]

hi @svenbeck27 @alex-efsth ,

Very sorry I did not take time to look at this. What does look like your service worker path in your configuration given to the provider ?

Do you think to add a property like bellow will help ?

// This configuration use hybrid mode
// ServiceWorker are used if available (more secure) else tokens are given to the client
// You need to give inside your code the "access_token" when using fetch
const configuration = {
  service_worker_relative_url: "/OidcServiceWorker.js", // just comment that line to disable service worker mode
  service_worker_only: false,
  service_worker_keep_alive_relative_url: "./test/OidcKeepAliveServiceWorker.json"
};

Hi :) This should work. However, if more relative pathnames or filenames exist in the library or might be added in the future, it would probably be better to provide a general, optional basename setting in the config.

Many thanks and best regards, Alex

[alex-efsth]

Hi, are there any news about it?

[guillaume-chervet]

Hi @alex-efsth , i am back from holiday. I will work on it tomorrow !

[guillaume-chervet]

hi @alex-efsth

version 7.9.0-alpha.1110 implement a new configuration property service_worker_keep_alive_path