Pusher authend point URL, sends POST request but data is corrupt

[abdul-shajin]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
function createPusherInstance(token) {
if (pusherKey) {
return new Pusher(pusherKey, {
scheme: "HTTPS",
port: 443,
encrypted: true,
authEndpoint: '/api/v1/mobile/chats/auth',
auth: {
headers: {
'Content-Type': 'application/json',
'Authorization': xxxxx
}
}
});
}
}

This is how I create pusher instance and while the pusher sends request to auth-api, parameters are not correct and rails server is raising 'ActionDispatch::ParamsParser::ParseError' because the parameters coming with the POST request is not in post data format, but as query parameters

Rails bug report:

An ActionDispatch::ParamsParser::ParseError occurred in api_chats#auth:

822: unexpected token at 'socket_id=218464.904349&channel_name=presence-bbf0bed3-95b8-440f-bba7-0d9a332dfe33'
lib/rack/url_resolver.rb:29:in `call'

---

Request:

• URL : https://xxxx.com/api/v1/mobile/chats/auth
• HTTP Method: POST
• IP address : xxx.xxx.xxx.xxx
• Parameters : {"controller"=>"api/v1/mobile/api_chats", "action"=>"auth"}
• Timestamp : 2017-07-11 20:16:56 +0530
• Server : name
• Rails root : /rails/root/app_directory
• Process: 10561

---

Session:

Am I missing something or is it a bug from Pusher side?

[hph]

@CodeSavvy The problem appears to be on your side - you're passing in headers saying that the body is in JSON but your auth endpoint gets it as urlencoded form data and from what I can tell, that's why your backend throws (since by the header it expects JSON, but there is none). Your backend can (almost certainly) parse an urlencoded body so I'd try removing the custom header you're passing in and see if that does the trick. I'm closing this now because it doesn't appear to be an issue on our side, but don't hesitate to let us know again if you think there's an actual bug here.

[fabioaanthony]

@hph the problem appears to be in how the pusher-js library is setting Content-Type headers. It doesn't allow application/json solo. Is this by design or bug?

Got Content-Type: application/x-www-form-urlencoded, application/json.
Expected Content-Type: application/json.

My Pusher config:

...
        authEndpoint: '/auth/pushers',
        auth: {
            headers: {
                'Authorization': token,
                'Content-Type': 'application/json',
                'Accept': 'application/agent.v1+json'
            }
        }

Notice how application/x-www-form-urlencoded is prepended? Additionally it's not sending the request as JSON, but urlencoded.

The issue appears here:

pusher-js/src/runtimes/worker/auth/fetch_auth.ts

Lines 7 to 11 in 185efd2

	headers.set("Content-Type", "application/x-www-form-urlencoded");
	for (var headerName in this.authOptions.headers) {
	headers.set(headerName, this.authOptions.headers[headerName]);
	}

And your params are encoded without regard for Content-Type headers. See composeQuery

export default class PusherAuthorizer implements Authorizer 

  ...

  composeQuery(socketId : string) : string {
    var query = 'socket_id=' + encodeURIComponent(socketId) +
      '&channel_name=' + encodeURIComponent(this.channel.name);

    for(var i in this.authOptions.params) {
      query += "&" + encodeURIComponent(i) + "=" + encodeURIComponent(this.authOptions.params[i]);
    }

    return query;
  }

Further investigation leads me to be believe you didn't actually intend this behavior because you do have the construct for custom AJAX calls.

In case anyone comes across this, here's a solution:

        authorizer: (channel, options) => {
            return {
              authorize: (socketId, callback) => {
                return axios.post('/auth/pushers', {socket_id: socketId, channel_name: channel.name}).then((data) => {

                     ...do some stuff?
                     
                    callback(false, data);
                })
              }
            }
        }

[neomrc]

Any updates here?

[hassanelhoseny]

i issues . i cant send header to my authEnd point header do not send

const initializePusher = async () => {
try {
await pusher.init({
apiKey: "89a7fe3d2c1fb636b087",
cluster: "eu",
authEndpoint: ${ApiURL}/api/v1/chat/auth,
auth: {
headers: {
authorization: "XXXX",
},
},
});

await pusher.connect();
// console.log("Pusher connected successfully");

} catch (e) {
console.log(Error: ${e});
}
};

i cant send header to this end point