KeycloakJS custom adapter : how to insert the token into keycloakjs instance

43 Views Asked by At

I'm trying to develop a custom adapter in my electron app that uses default browser so we could use an OTP physical key (not actually supported by electron). Source

I'm trying to do something like the existing cordova adapter (but this one is internal) : Here

I've reached to open a new external browser window, handled the login process but I can't finalyze the process and give the keycloak code (or token) to the keycloakjs instance.

Here is an extract of my actual typescript code :

async function getToken(receivedUrl: string) {
  console.debug(`receivedUrl: ${receivedUrl}`);
  // Example received url: keycloak/#state=39dfb7d9-d852-48c7-9d70-c68c8f329f94&session_state=e31f41f7-ed60-4f50-95a5-5d97c3d97d5b&iss=https%3A%2F%2Fkeycloak.company.org%2Frealms%2Fmyrealm&code=653c0b53-7885-43e2-ab2c-15fb12d01224.e31f41f7-ed60-4f50-95a5-5d97c3d97d5b.a8500fbb-cd9a-4630-a3f6-0897cb3e1a37

  const parsedURl = new URL('https://fake.url/' + receivedUrl.replace('#', '?'));
  const code = parsedURl.searchParams.get('code');

  console.debug(`Received keycloak code = ${code}`);

  const tokenUrl = keycloak.authServerUrl! + '/realms/' + localConfig.KEYCLOAK_REALM + '/protocol/openid-connect/token';
  console.debug(`Getting token from url=${tokenUrl}`);

  const response = await axios.post(
    keycloak.authServerUrl!,
    {
      code: code,
      grant_type: 'authorization_code',
      client_id: localConfig.KEYCLOAK_CLIENT_ID,
      redirect_uri: localConfig.KEYCLOAK_REDIRECT_URI,
    },
    {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    }
  );
  console.debug('response', response);
  
  ///// ####### What to do HERE ?
  // keycloak.getToken(code);
  // keycloak.setToken();
}

let promiseResolve!: (value: void) => void;
let promiseReject!: (value: void) => void;
const customKeycloakPromise = new Promise<void>((resolve, reject) => {
  promiseResolve = resolve;
  promiseReject = reject;
});

const MyCustomAdapter: KeycloakAdapter = {
  login(options?: KeycloakLoginOptions) {
    shell.openExternal(keycloak.createLoginUrl(options)); // Open a new external browser window
    ipcRenderer.on('auth-success', (_event, url: string) => { // Manage to get the oauth2 url back
      getToken(url);
      promiseResolve();
    });
    ipcRenderer.on('auth-error', () => promiseReject());
    return customKeycloakPromise;
  },
  // ...
}

Can anyone help me ?

2nd question, would it be possible to have a keycloak.createTokenUrl() method to avoid the ugly concatenation (or have keycloak.endpoints exposed) ...

Related issue : https://github.com/keycloak/keycloak/issues/10174

Regards Manuel

0

There are 0 best solutions below