title: Get Keycloak access_token using client credentials using axios throws 400 error in NextJS app
body: <p>I am trying to get the <code>access_token</code> from keycloak using axios using client credentials. However, I am getting a 400 error when I use axios post request to get the access_token.</p>
  <p>I havet tested my client credentials using postman and it does return the access__token however, when using in a NextJS app I get a 400 error:</p>
  <p>currently inside my <code>_app.tsx</code> file I have the following method:</p>
  <pre><code>const getToken = () =&gt; {
    let token: string = undefined;
    const realm = process.env.NEXT_PUBLIC_KEYCLOAK_REALM;
    const keycloakClientSecret = process.env.NEXT_PUBLIC_KEYCLOAK_BEARER_CLIENT_SECRET;
    const kcTokenEndpoint = `http://localhost:8080/auth/realms/${realm}/protocol/openid-connect/token`;
  
    axios({
      method: 'POST',
      url: kcTokenEndpoint,
      data: {
        client_id: 'keycloak-token-bearer', // create client in keycloak with same name
        client_secret: keycloakClientSecret,
        grant_type: 'client_credentials',
      },
      headers: {
        'Content-type': 'application/x-www-form-urlencoded',
      },
      withCredentials: true,
    })
      .then(response =&gt; {
        token = (response as any)?.access_token;
      })
      .catch(error =&gt; {
        token = undefined;
      });
  
    return token;
  };
  </code></pre>
  <p>Which I see returns a <code>400 (Bad Request) error</code>
  When I check the response I see the following:</p>
  <pre><code>error   &quot;invalid_request&quot;
  error_description   &quot;Missing form parameter: grant_type&quot;
  </code></pre>