Not able to use openid-client for browser extension

[manoj30075]

Hi,

We are trying to create Jypyterlab extension, in the process, we have a mechanism to implement sign in/out flow in our vs code extension using openid-client and replicating the same for Jupyterlab extension. Since Jupyterlab extension runs in a browser, we faced some issues related to node modules, we fixed those by adding polyfills in webpack configuration. But still we are not able to resolve issues related to openid-client.

Issues

• Issuer.discover is not able to verify the URL, it throws error
  TypeError: only valid absolute URLs can be requested at Issuer.request ( request.js:71:1 ) at Issuer.discover ( issuer.js:143:1 ) at activate ( index.ts:28:33 ) at jlab_core.7f4f9f24c6…f497f974f:2:1401543

• Not able to use BaseClient as well.

What could be the issue here? Is using openid-client in the browser environment not recommended in the first place? Or is there something that I'm doing wrong.

let authEndpoint = 'accounts.google.com'; let authClientId = ''; const DEFAULT_AUTH_ENVIRONMENT = 'staging'; const authEnvironment = process.env.__LSEG_AUTH_ENVIRONMENT || DEFAULT_AUTH_ENVIRONMENT; if (authEnvironment === DEFAULT_AUTH_ENVIRONMENT) { authEndpoint = 'accounts.google.com'; authClientId = '*********'; } const issuer = await Issuer.discover(https://${authEndpoint}`);
// issuer.metadata is the root
if (!issuer.metadata.token_endpoint) {
throw new Error('Token Endpoint does not exist');
}
new issuer.Client({
// eslint-disable-next-line camelcase, @typescript-eslint/naming-convention
client_id: authClientId,
// eslint-disable-next-line camelcase, @typescript-eslint/naming-convention
token_endpoint_auth_method: 'none'
});

const getScopes = () => {
  const openId = 'openid';
  const profile = 'profile';
  const email = 'email';
  const trapi = 'trapi';
  return [openId, profile, email, trapi];
};


const codeVerifier = generators.codeVerifier();
const codeChallenge = generators.codeChallenge(codeVerifier);


const params = {
  redirectUrl: 'http://localhost:3000',
  scope: getScopes().join(' '),
  response_type: 'code',
  response_mode: 'query',
  code_challenge_method: 'S256',
  code_challenge: codeChallenge,
  state: uuid()
};
const baseClient = new BaseClient({
  client_id: authClientId,
  token_endpoint_auth_method: 'none'
});
console.log("baseClient: ", baseClient.authorizationUrl(params));`

I've modified the code to post here, but I'm try to do this basically.

[panva]

https://github.com/panva/node-openid-client#how-do-i-use-it-outside-of-nodejs

It is only built for Node.js. Other javascript runtimes are not supported. I recommend panva/oauth4webapi, or a derivate thereof, if you're looking for a similarly compliant and certified client software that's not dependent on the Node.js runtime builtins.

[panva]

https://github.com/panva/openid-client/releases/tag/v6.0.0