Error 400 Cognito /oauth2/token endpoint from client-side javascript

Question

I am using AWS Cognito-hosted UI for my signup and login. There is no app client secret defined.

I am trying to make an API call from the browser javascript code to the /oauth2/token endpoint in order to exchange autohorization_token with an ID token.

The problem is, when I make the call through Postman, Insomnia it works fine. However, when I make the same call through javascript from the browser it fails with the 400 response type and I can't get much about the reason.

This is the Insomnia call which is a success;

However, when I make the same call via javascript it fails. I have used both fetch and XMLHttpRequest and the same result.

const XHR = new XMLHttpRequest();
    
let urlEncodedData = "",
    urlEncodedDataPairs = [],
    name;

urlEncodedDataPairs.push( encodeURIComponent( 'grant_type' ) + '=' + encodeURIComponent( 'authorization_code' ) );
urlEncodedDataPairs.push( encodeURIComponent( 'code' ) + '=' + encodeURIComponent( code ) );
urlEncodedDataPairs.push( encodeURIComponent( 'client_id' ) + '=' + encodeURIComponent( 'xxxxx' ) );
urlEncodedDataPairs.push( encodeURIComponent( 'redirect_url' ) + '=' + encodeURIComponent( 'https://www.xxx.me/xxx' ) );
    
XHR.addEventListener( 'load', function(event) {
   alert( 'Yeah! Data sent and response loaded.' );
} );
    
// Define what happens in case of error
XHR.addEventListener( 'error', function(event) {
    alert( 'Oops! Something went wrong.' );
});
    
// Set up our request
XHR.open( 'POST', 'https://xxx.auth.us-west-2.amazoncognito.com/oauth2/token' );
    
// Add the required HTTP header for form data POST requests
XHR.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
    
// Finally, send our data.
XHR.send( urlEncodedData );

This is the response I am getting:

I have tried the same request with fetch and the result is the same.

   let tokenRequest = new Request(tokenURL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                'Origin' : 'https://www.xxx.me'
            },
            body: new URLSearchParams({
                'grant_type': 'authorization_code',
                'code': code,
                'client_id': 'xxx',
                'redirect_url': 'https://www.xxx.me/xxx'
            }).toString()

        });

        let response = await fetch(tokenRequest);
        let data = await response.json();

One thing I have realized when I check the browser developer tool for other POST calls made to auth endpoints with content type=application/x-www-form-urlencoded, it shows query params added to URL like shown below, however, for my call, params are not encoded as part of URL. I am not sure if the problem might be related to this.

Any idea how I can make this call with client-side javascript?

I think you may check the exact format for Javascript using Fetch or jQuery from Postman - code Snippet for the working case and use that as a template to build your code afresh. — Srinath Menon, Oct 19 '21 at 06:38

Gary Archer · Accepted Answer · 2021-10-20T12:30:40.060

4

Looks like the browser is using redirect_url which is wrong, and Postman is using redirect_uri which is correct. Also you should use PKCE to make the message more secure - see steps 4 and 8 of my blog post to understand how this looks.

Note also that in OAuth it is common to not return error details, or return to the app, if an unrecognised Client ID or Redirect URI are supplied. If these are both correct you should instead receive the standard OAuth error and error_description fields in a response payload.

edited Oct 20 '21 at 12:30

answered Oct 19 '21 at 18:58

Gary Archer

22,534
2
12
24

redirect URLs are the same. you are right, the response does not tell much. – levye Oct 20 '21 at 17:44
1

The URLs are the same value but the name of the `redirect_url` field is wrong in the browser code - it should end with an `i` and not with an `l`. – Gary Archer Oct 20 '21 at 18:07
Great catch! Thanks, I have changed it but still the same result. – levye Oct 20 '21 at 22:13
Actually checking the URL to URI and adding this line solved the problem. ```urlEncodedData = urlEncodedDataPairs.join( '&' ).replace( /%20/g, '+' );``` – levye Oct 20 '21 at 23:18

Error 400 Cognito /oauth2/token endpoint from client-side javascript

1 Answers1

Linked