Authorization with subscriptions/apollo angular

Client SDKs
1

Hey,

I have some issues with authorization for a subscription using an apollo-angular client.

Whatever I do the header is not included in the request header to the server.

Here are some things I have tried:

  1. using GraphQLWsLink
const wsLink = new GraphQLWsLink(createClient({
    url: `ws://localhost:8080/dynamicdb/v1/subscriptions`,
    lazy: true,
    connectionParams: async () => {
        return {
            authToken: `Bearer ${token}`,
            auth_token: `Bearer ${token}`,
            authorization: `Bearer ${token}`,
            headers: { Authorization: `Bearer ${token}` },
        };
    },
}));
  1. using WebSocketLink
const webSocketLink = new WebSocketLink({
    uri: `ws://localhost:8080/dynamicdb/v1/subscriptions`,
    options: {
        lazy: true,
        connectionParams: async () => {
            return {
                authorization: `Bearer ${token}`,
                headers: { Authorization: `Bearer ${token}` },
            };
        },
    },
});
  1. using Middleware
const middlewareLink = new ApolloLink((operation, forward) => {
    operation.setContext({
        headers: {
            Authorization: "Bearer " + token,
        },
    });
    return forward(operation);
});
  1. adding it to the named client
apollo.createNamed("dyndb-ws", {
    link: webSocketLink,
    cache: new InMemoryCache(),
    headers: {
        Authorization: "Bearer " + token,
        authToken: `Bearer ${token}`,
        auth_token: `Bearer ${token}`,
    },
    defaultOptions: {
        watchQuery: {
            fetchPolicy: "no-cache",
        },
        query: {
            fetchPolicy: "no-cache",
        },
    },
});

NONE of this I working. The 1st is from the official documentation and the others are from Stackoverflow. I tried every spelling I could come up with, but Chrome is sending this header, any only this header…

GET ws://localhost:8080/dynamicdb/v1/subscriptions HTTP/1.1
Host: localhost:8080
Connection: Upgrade
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36
Upgrade: websocket
Origin: http://localhost:4200
Sec-WebSocket-Version: 13
Accept-Encoding: gzip, deflate, br
Accept-Language: de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7
Sec-WebSocket-Key: qLqmk/K/u5rbom/1zPWq5Q==
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Protocol: graphql-ws

I am using the most recent versions of every graphql library.

Any ideas? I see the bearer token is sent with the first message on the socket, but if we use this way anyone could establish a websocket connection with the server. The socket could not be used, but it still would be open until some timeout…

I hope you can help me.

Kindest regards
Draco

1 Like