Custom authentication header on authEndpoint

[TkTioNG]

Problem

Planning to add custom authentication header on authEndpoint at old server.

Previously in pusher-js/react-native, it is possible to add custom header through initialization, or subcribing:

new Pusher (<pusher-key>, {
  authEndpoint: <auth-endpoint>,
  auth: {
    headers: {
      Authorization: <your-token-key>,
      // Other headers
    }
  },
})

Through the documentation and brief code reading, it seems that it is not possible to achieve this, but i may be wrong, please educate me.

Expectation

Support on custom headers on authEndpoint.

[SooranSaeed]

yeah , that is true this library not have complete feature and we must using old version instead

[Vitor-Vilela]

Any updates on this issue? pusher-js will soon no longer support react-native and my application makes use of the authEndpoint with custom headers from that lib, so without this feature on pusher-websocket-react-native I cant proceed with the migration

[johnsoncwb]

@fbenevides any update about that?

[leofolive]

@fbenevides Any updates on this issue? This feature is essential for us to continue using the pusher, otherwise we will have to look for new solutions.

[markoupshift]

This is also a huge blocker for our organization adopting Pusher throughout our platforms.

Sending custom headers and parameters is necessary for us and using pusher-js is not an option since React Native support is deprecated and soon will be dropped.

[Definence]

The old package says it is deprecated and soon will be removed from this repository We also require this feature. Any chance that this is going to be implemented in near future?

[alex-b-dev]

Are there any options to add headers with authorization? Perhaps someone has found a solution. This is really important for our project

[VitalikYaroviy]

Are there any new updates? We really need this feature. Let me know if anyone found a solution

[samcoolidge]

Same here - my implementation in expo/react-native no longer works with the latest pusher-js version due the the react-native depreciation. I'm trying to implement this repo but cannot since we require additional headers/data parameters for our auth endpoint.

[leofolive]

@fbenevides Any updates on this issue? This feature is essential for us to continue using the pusher, otherwise we will have to look for new solutions.

[akenger]

I 100% agree with this. It also appears to be lacking the newer authentication/authorization flow that the current JS client supports. For this specific header issue, I believe you could use the onAuthorizer functionality as opposed to the authEndpoint to create your own request with your own headers as opposed to relying on the request generated by the library but that isn't necessarily the right answer.

[tdammy92]

I 100% agree with this. It also appears to be lacking the newer authentication/authorization flow that the current JS client supports. For this specific header issue, I believe you could use the onAuthorizer functionality as opposed to the authEndpoint to create your own request with your own headers as opposed to relying on the request generated by the library but that isn't necessarily the right answer.

@akenger how do i use the onAuthorizer to provide header params to my endpoint please i need your help. 🙏🏽

[akenger]

@tdammy92 the onAuthorizer is an async function that can be used in place of the exiting authEndpoint. You can use any request library to generate the request to your backend and send the socketId and channelName and any necessary additional headers. Just be sure you ALWAYS return a response that has an "auth" property or it will crash the library.

You can do something like (this is just pseudo code):

const onAuthorizer = async (socketId, channelName) => {
    const header = {whatever your header is}
    const request = new Request()
   ......
   request.header = header;
   try {
     const result = await request.post()

     return {
       auth: result.auth
     }
  catch (e) {
    return {
     auth: 'an error occcured'
   }
 } 

}

One word of caution is that there are some definite gaps and issues using the custom onAuthorizer. I filed an issue here:

https://github.com/pusher/pusher-websocket-react-native/issues/51

Good luck!

[seriklav]

@akenger thx you, i try on the real project and this works

In the my case this is works with laravel back-end:

NOTE: wsConnectAuth this is simple post request to server with headers {Authorization: "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9...."}

1. need a create custom POST method what send next data to server {"socket_id": "138304.6187673", "private-changel.105"} (in the my case this is 'api/broadcasting/auth')

2. After on the response from server we recived next : { "auth": "ee82d5a0b8270e46fd90:3aa7564d78752f3dffe3dc04f1efc4cb3c65bc5ade6649c22059fc8dca432399" }

3. and return this response in the you custom onAuthorizer method

4. after, just put u custom onAuthorizer method to pusher.init(...., onAuthorizer)

and congratulations !!!)))

[tdammy92]

@akenger thx you, i try on the real project and this works

In the my case this is works with laravel back-end:

NOTE: wsConnectAuth this is simple post request to server with headers {Authorization: "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9...."}

1. need a create custom POST method what send next data to server {"socket_id": "138304.6187673", "private-changel.105"} (in the my case this is 'api/broadcasting/auth')
2. After on the response from server we recived next : { "auth": "ee82d5a0b8270e46fd90:3aa7564d78752f3dffe3dc04f1efc4cb3c65bc5ade6649c22059fc8dca432399" }
3. and return this response in the you custom onAuthorizer method
4. after, just put u custom onAuthorizer method to pusher.init(...., onAuthorizer)

and congratulations !!!)))

@seriklav Thanks man. 🙏🙏

[akenger]

@akenger thx you, i try on the real project and this works

In the my case this is works with laravel back-end:

NOTE: wsConnectAuth this is simple post request to server with headers {Authorization: "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9...."}

1. need a create custom POST method what send next data to server {"socket_id": "138304.6187673", "private-changel.105"} (in the my case this is 'api/broadcasting/auth')
2. After on the response from server we recived next : { "auth": "ee82d5a0b8270e46fd90:3aa7564d78752f3dffe3dc04f1efc4cb3c65bc5ade6649c22059fc8dca432399" }
3. and return this response in the you custom onAuthorizer method
4. after, just put u custom onAuthorizer method to pusher.init(...., onAuthorizer)

and congratulations !!!)))

@seriklav and @tdammy92 be careful of that return false in the catch. That will crash your app if it gets there. You should return { auth: 'An error occured' } or something. If the authorizer doesn't return an object with an auth key in it, it will blow up.

[seriklav]

@akenger thx you, i try on the real project and this works In the my case this is works with laravel back-end: NOTE: wsConnectAuth this is simple post request to server with headers {Authorization: "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9...."}

1. need a create custom POST method what send next data to server {"socket_id": "138304.6187673", "private-changel.105"} (in the my case this is 'api/broadcasting/auth')
2. After on the response from server we recived next : { "auth": "ee82d5a0b8270e46fd90:3aa7564d78752f3dffe3dc04f1efc4cb3c65bc5ade6649c22059fc8dca432399" }
3. and return this response in the you custom onAuthorizer method
4. after, just put u custom onAuthorizer method to pusher.init(...., onAuthorizer)

and congratulations !!!)))

@seriklav and @tdammy92 be careful of that return false in the catch. That will crash your app if it gets there. You should return { auth: 'An error occured' } or something. If the authorizer doesn't return an object with an auth key in it, it will blow up.

Thank you very much, I couldn't figure out why my app crashed!)))

[benw-pusher]

As mentioned in https://github.com/pusher/pusher-websocket-react-native/issues/40#issuecomment-1322408009, this is possible to achieve using the onAuthorizer function. There aren't any current plans to enhance the library to support custom headers on the authEndpoint request and so the above approach should be used instead.