How to set header content-type as application/json in angular-oauth2-odic?

Question

I am setting Content-Type header as application/json from fetchTokenUsingPasswordFlow method but it's going as application/x-www-form-urlencoded. Is there any way to set header content-type as application/json?

As per the source code, the Content-Type header has been hardcoded as application/x-www-form-urlencoded.

I am using spring boot rest services for backend and its not allowing application/x-www-form-urlencoded as the Content-Type. Please find the sample Angular 6 code for your reference below:

import { Component, OnInit, Input } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Usermodel } from '../models/usermodel';
import { OAuthService } from 'angular-oauth2-oidc';
import { HttpHeaders } from '@angular/common/http';

@component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  @input() message: any;
  @input() apiUrl: any;
  @input() params: any;
  currentUser: Usermodel;
  model: any = {};
  loading = false;
  returnUrl: string;
  headers: HttpHeaders;

  constructor(private router: Router,
    private route: ActivatedRoute,
    private oauthService: OAuthService,
  ) {
    oauthService.tokenEndpoint = "http://localhost:7890/api/login";
    oauthService.requireHttps = false;
    this.oauthService.setStorage(localStorage);
    this.headers = new HttpHeaders().set('Content-Type', 'application/json');
    console.log('oauthtoken', this.oauthService.getAccessToken());
  }

  ngOnInit() {
    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
  }

  public login() {
    this.loading = true;
    this.apiUrl = 'login'
    console.log("Headers::->" + this.headers)
    this.oauthService.fetchTokenUsingPasswordFlow(this.model.userName, this.model.password, this.headers).then((resp) => {
      console.log('resp', resp);
    });
  }
}

score 0 · Accepted Answer · edited Oct 07 '21 at 13:35

I saw a similar issue on the angular-oauth2-oidc repo a while ago, I'll repeat my reply here as an answer so it's easy for people to find.

The library hardcodes application/x-www-form-urlencoded, and I think probably rightfully so: RFC 6749 seems to prescribe this:

4.3.2. Access Token Request

The client makes a request to the token endpoint by adding the following parameters using the "application/x-www-form-urlencoded" format...

I'm a little surprised that your spring boot packages don't support changing the possible content types for the Resource Owner Password flow's token request endpoint, you could try to double check?

Alternatively, you could file an issue with the appropriate spring-boot package?

The only final other option I see (other than not using the library, which for that flow is quite possible) at this point is to fork the library and change the internals yourself for your custom build.

How to set header content-type as application/json in angular-oauth2-odic?

1 Answers1