Add bodySerializer and Accept header to @openverse/api-client to correctly authenticate with the API

[obulat]

Description

The @openverse/api-client package sends the requests for token to the Openverse Django API with the correct parameters but does not serialize the body to the required x-www-form-urlencoded format. This causes the requests to be sent with an empty body.

Solution

Add bodySerializer¹ that creates new URLSearchParams from the body object, and stringifies it:

body: {
...
},
bodySerializer(body) {
    return new URLSearchParams(body).toString()
},
headers: {
   "Accept": "x-www-form-encoded"
}
...

openverse/packages/js/api-client/src/auth.ts

Lines 132 to 138 in ba0d5e3

	this.client
	.POST("/v1/auth_tokens/token/", {
	body: {
	grant_type: "client_credentials",
	client_id: this.credentials.clientId,
	client_secret: this.credentials.clientSecret,
	},

Tests update

The matching of the request in tests should also be updated to ensure we always get the correct encoding.

Update this line:

openverse/packages/js/api-client/tests/client.test.ts

Line 29 in ba0d5e3

.post("/v1/auth_tokens/token/", /test-secret/)

With this code:

  .post('/v1/auth_tokens/token/', (body) => {
    cconst params = new URLSearchParams(body);

    // Check if the required parameter matches
    return params.get('clientId') === 'test' && params.get("clientSecret") === "test-secret" 
  })

Additional context

I opened an issue in the openapi-fetch repository to encode the body automatically when the relevant header is passed: Automatically encode the body when "Accept": "application/x-www-form-encoded" header is passed

This issue was identified when I was trying to use @openverse/api-client in the "Proxy frontend API requests" project planning.

Footnotes

1. Documentation on bodySerializer in openapi-fetch ↩