Ngxs + WebSocket | How to intercept the connection and add custom HTTP header?

Question

I'm using ngxs' NgxsWebsocketPluginModule to create a websocket from within my Angular application. To authenticate the connecting client my server requires an authentication token to be present in the HTTP headers of the HTTP connection that gets upgraded to a websocket. Since the websocket example of the ngxs documentation only explain how to connect, send and receive messages via the websocket I'm looking for an example how to write an interceptor for this web socket connection in order to attach custom HTTP header.

Answer 1

Faced with the same issue but the following workaround enables to authenticate the user connection in another way (using tickets):

1. Request for a web-socket connection ticket (use Authorization header with your JWT).
2. Dispatch ConnectWebSocket action with options which includes your web-socket url and the ticket as query param.
3. Validate the ticket before accepting the connection handshake (in your server).