Username returns empty

Building an Ionic Angular based app and struggling with login.
Registration works just fine on a largely similar code setup but login keeps retuning a 403 error with username being empty.

code snippet below where values being set I believe. any help would be appreciated.

Created the below in an auth.service.ts file

    // Login to account service
    loginFixxrCustomer(email, username, password) {
      // Set Http headers
      let headers = new HttpHeaders({
        'Content-Type': 'application/x-www-form--urlencoded'
      });

      // Set values for credentials for user
      let credentials = <code>username=${username}&email=${email}&password=${password}</code>;

      // Create API Call
      this.apiUrl = <code>${this.siteUrl}/wp-json/jwt-auth/v1/token</code>;
      console.log('API URL: ', this.apiUrl);

      // Authenticate response
      return new Promise ((resolve) => {
        this.http.post(this.apiUrl, credentials, {headers}).subscribe((successResp) => {
          resolve(successResp);
        },
        (errorResp) => {
          resolve(errorResp);
        }
        )
      });
    }

Then run this on login.page.ts.

  // Login to account function
  wooLoginAcc () {
    this.platform.ready().then(() => {
      if(
        (this.username != '') &&
        (this.password != '') &&
        (this.CF.validateEmail(this.email))
      ) {
        console.log('Username', this.username);
        console.log('Email', this.email);
        console.log('Password', this.password);

        this.auth.loginFixxrCustomer(this.email,this.username,this.password).then((response) => {
          if(response['token']) {
            this.CF.presentToast('Login Successful.', true, 'bottom', 2000);
            console.log('Login token: ', response['token']);
            console.log('Login email: ', response['user_email']);
            this.router.navigateByUrl('/home');
          } else {
            this.CF.presentToast('Login failed.', true, 'bottom', 20000);
            console.log('Login failed.');
          }
        });
      } else {
        this.CF.presentToast('Complete the form correctly please.', true, 'bottom', 5000);
        console.log('Form not completed correctly.');
      }
    });
  }