support for multiple client_id

[Zerzio]

Hello,

I need to be able to support multiple client_id (and potentially multiple OP) used by multiple microfrontends loaded in the same page. I didn't found that use case to be taken into account. However in the storage the key contains the client_id. So I probably didn't understood the intention.

In order to do so I created a wrapper around UserManager. The wrapper receives the client_id to be used and set it in the config.

this.config = {
      client_id: client_id,
      ...baseConfig,
}

The iFrame should know about the client_id so I pass it as a query parameter:

redirect_uri: `${local}/callback.html?client_id=${client_id}`,
silent_redirect_uri: `${local}/callback-silent.html?client_id=${client_id}`,

In the callback pages I then do the following:

const client_id = new URLSearchParams(document.location.search).get("client_id")
const cm = new UserManagerWrapper(client_id);
cm.userManager.signinCallback().then(...

This actually works but I wonder if there would be a better approach.

Regards,

Serge

[pamapa]

support multiple client_id

The idea is to use one oidc-client-ts instance per client-id/idp...

[Zerzio]

Sure, but how to manage the callback? I don't want to have one callback page per client id. This is why I add a query string to the callback url. I wonder if there would be a better mean
Also, if two microfrontends are fetching token at exact same time in hidden iFrame. How to avoid race condition? How to have one iframe per UserManager instance?

[pamapa]

Sure, but how to manage the callback? I don't want to have one callback page per client id. This is why I add a query string to the callback url. I wonder if there would be a better mean

Sound good, without a special query string, you could search through the temporary states created by this library to find out which client-id instance is used...

oidc-client-ts/src/OidcClient.ts

Lines 149 to 156 in 2879261

	const storedStateString = await this.settings.stateStore[removeState ? "remove" : "get"](response.state);
	if (!storedStateString) {
	logger.throw(new Error("No matching state found in storage"));
	throw null; // https://github.com/microsoft/TypeScript/issues/46972
	}
	const state = SigninState.fromStorageString(storedStateString);
	return { state, response };

Also, if two microfrontends are fetching token at exact same time in hidden iFrame. How to avoid race condition? How to have one iframe per UserManager instance?

What do you mean by "two microfrontends", currently there is an issue with multiple tabs open. There is no locking implemented yet... See #430

[pamapa]

This issue (question) staled, closing it for now.