API-Fetch with access_token example?

[ruediger-h]

Issue and Steps to Reproduce

I'm trying to get a simple example up and running. It's built on Vue.js but I think that doesn't matter here. My aim is to login (successful) and run a fetch on an API, a fetch that uses the access_token which is hold in the ServiceWorker only. To reproduce it please see quote my code below.

My interpretation:

1. After a successful login the oidc-client gets the token from Keycloak and handles it the correct way:
   "Token { "accessToken": "ACCESS_TOKEN_SECURED_BY_OIDC_SERVICE_WORKER_default_default", "expiresIn": 300, "idToken": "eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJ3ZHFMZC1tS01aRVpMcGY5SFQxclRDUjhEQmFma2..."

2. My attempt to run the fetch on the API does not work as I do not use the oidc-client the way it must be, means, to use the ServiceWorker as proxy. I.e. the token displayed in the browser shows totally correct that it does not want to show the access_token but the same time the fetch via oidc-client does not proxy & add the Bearer-token

Expected

Successful API-Response.

Actual

ServerError 500 because of this access_token being sent by oidc-client:
"ACCESS_TOKEN_SECURED_BY_OIDC_SERVICE_WORKER_default_default"

Script-Section

import {OidcClient} from '@axa-fr/oidc-client'

const configuration = {
  client_id: 'xxx',
  redirect_uri: window.location.origin + '/oidc_callback',
  silent_redirect_uri: window.location.origin + '/oidc_silent-callback',
  scope: 'openid',
  authority: 'http://keycloak.local:8081/realms/xxx',
  refresh_time_before_tokens_expiration_in_second: 40,
  service_worker_relative_url: './OidcServiceWorker.js',
  service_worker_only: true,
  // extras: {}
};

const oidc = OidcClient.getOrCreate(() => fetch)(configuration);

oidc.tryKeepExistingSessionAsync().then(() => {
  token.value = oidc.tokens;
  console.log('token.value: ', token.value)
});

function logout() {
  oidc.logoutAsync();
}
function login() {
  oidc.loginAsync('/');
}

async function fetchProjects() {
  const oidcFetch = oidc.fetchWithTokens(fetch, oidc)
  const response = await oidcFetch('https://backend.local/api/projects')
}

In the template-section there are @click-Elements calling the functions "login", "logout" and "fetchProjects". The latter one results in an server-error because the oidc-client passes the string "ACCESS_TOKEN_SECURED_BY_OIDC_SERVICE_WORKER_default_default" as bearer-token.

It would be very cool if anybody could enlighten me of how to use the oidc-client. I did not find examples in neither the react nor the "vanilla" example that showed me how to use it. And documentation in the code is a bit rare ;-)

Thank you!

[guillaume-chervet]

Hi @ruediger-h , your code seems correct.

Just comment service worker in the configuration (and delete it from chrome dev tool and it will works).

If you want to use the service worker, do not forget to configure the trusted domain.js file l'île explained in the readme https://github.com/AxaFrance/oidc-client/blob/main/packages/oidc-client/README.md

[ruediger-h]

Hello @guillaume-chervet
I provided an OidcTrustedDomains.js but it looks like the structure of OidcTrustedDomains.js in the react-demo was not okay for being used here. After I used the sample from your "Getting started" it works.
So this code for OidcTrustedDomains.js completes my example above:

const trustedDomains = {
  default: {
    oidcDomains: ['http://keycloak.local:8081'],
    accessTokenDomains: ['https://backend.local'],
  },
};

trustedDomains.config_show_access_token = {
  oidcDomains: ['http://keycloak.local:8081'],
  accessTokenDomains: ['https://backend.local'],
  showAccessToken: true,
};