Implementing a custom ember-simple-auth Authenticator

Firstly, I am not a seasoned JS Developer, so please excuse obvious mistakes that I could have made.

I am trying to implement a custom Authenticator for authenticating a user with Keycloak using the OAuth2 Password Grant which requires the client_id be passed as part of the request body.

import OAuth2PasswordGrant from 'ember-simple-auth/authenticators/oauth2-password-grant';
export default OAuth2PasswordGrant.extend({

  serverTokenEndpoint: 'http://localhost:8080/something/token',

  makeRequest(url, data, headers = {}) {
    data.client_id = 'my-app';
    return this._super(url, data, headers);
  }

});

I have a controller that uses this Authenticator by calling this action:

actions: {
    authenticate() {
      let {username, password} = this.getProperties('username', 'password');
      this.get('session').authenticate('authenticator:oauth2', username, password).then(() => {
        // Do something
      }).catch((response) => {
        // Show error
      });
    }
  }

This causes firefox to hang and gives me an unresponsive script message.

If i remove the return from the makeRequest() method, I can see from the browser debugger that the call to Keycloak actually returns correctly with the object that contains my token etc. However ember inspector shows some errors related to unresolved promises. But I guess thats because I'm no longer returning the promise.

What am I doing wrong here?

How can I fix the unresponsive script issue?

Is there another way for me to achieve my goal?