Allow passing a custom fetch implementation to circumvent CORS restrictions

[kryops]

Hi there,

we are using this library (the low-level parts) for a Cordova app. As the app is hosted under the ionic:// protocol on iOS, there are CORS issues with some identity providers when performing requests using fetch(), as they only seem to allow origins using the http: or https: as protocol (both of which are forbidden to use for Cordova apps).

Therefore, we have implemented our own version of fetch which uses cordova-plugin-advanced-http under the hood to circumvent CORS restrictions.

We don't want to replace fetch globally with the custom implementation as we only need it for OIDC requests, but swapping it out just for oidc-client-ts currently requires some monkey-patching that we will certainly regret in the future:

const oidcClient = new OidcClient({ /* ... */ });

(oidcClient.metadataService as any)._jsonService.constructor.prototype.fetchWithTimeout = fetchWithoutCors;

Would you consider adding an official way to pass a custom fetch-compatible request implementation?

Thanks for looking into it!

Related: #537

[Badisi]

To me you are taking the problem from the wrong angle. CORS was made for a reason and disabling it should never be the solution. Nor trying to fix it from a client application perspective. It is something you have to configure in a backend (or an IDP in this case).

Can you tell us a bit more about which identity provider is causing the issue and why you can’t make CORS working with it ?

[kryops]

I have to admit I'm not entirely sure, I inherited our OAuth2 code base (which we now migrated to OIDC), and it just says "we need this as some IDPs only allow http/https origins for CORS" 😳

We use different IDPs, and at least our AzureAD instance does not send any CORS headers at the moment, which is quite certainly a configuration issue anyway. I will try to continue investigating on our end, thanks for the advice!

[pamapa]

For CORS issues, you must typically configure your application (including the callback URL) on the authz server side. For Azure AD via App registration...

[imtmh]

I am getting cors issues with miniorange.

[imtmh]

I got a solution from the docs. If CORS doesn't work then use the following in the authConfig

const authConfig = {
    // add required data, then add metadata with the following fields. You can this info from your ${issuer}/.well-known/openid-configuration endpoint
    metadata: {
        issuer: "https://your-idc.com/issuer-url",
        authorization_endpoint:
          "https://your-idc.com/auth-endpoint",
        userinfo_endpoint: "https://your-idc.com/getuserinfo",
        end_session_endpoint: "https://youridc.com/logout",
        token_endpoint: "https://youridc.com/oauth/token",
      }
  }