How would you pass context on each operation ?

[strblr]

Hi,

I'm trying to convert an application based on Apollo server and Urql to your library. I have an issue finding a socket-ish alternative for passing an authorization header on each operation. So the way it works now is that I configured the urql client to add a token to every HTTP request:

const client = createClient({
  url,
  requestPolicy: "cache-and-network",
  fetchOptions() {
    const currentUser = readStore<CurrentUser>("currentUser");
    if (!currentUser) return {};
    return { headers: { authorization: currentUser.token } };
  },
  .......
}

Then in Apollo server's context callback, I wrote a routine to decode the token and fetch the corresponding user. This user object is then sent down the GraphQL resolve context:

  const apollo = new ApolloServer({
    typeDefs,
    resolvers,
    async context({ req }): Promise<Context> {
      const currentUser = await decodeAndFetch(req.headers.authorization);
      currentUser && markOnline(currentUser._id);
      return { ip: req.ip, currentUser };
    }
  });

I don't see how to rewrite that using Socket.io. I'm not a fan of adding an auth middleware, as the token decoding and user fetching would only happen once at the start.

Do you have any advice ?

Thank you.

[n1ru4l]

Hey there and sorry for the late reply - my GitHub notifications were messed up and I did not get any for this repository 😢 .

As I understand you already made the choice that you want to use @n1ru4l/socket-io-graphql-server as your GraphQL transportation layer.

There are multiple ways of applying authentication.

Authenticate before being permitted to even execute GraphQL operations

The isLazy option for registerSocketIOGraphQLServer can be used to not automatically permit users to execute GraphQL operations. Instead you can apply your custom authentication logic (e.g. a handshake) and then allow the connected socket to execute GraphQL operations via the graphQLServer.registerSocket(socket); API.

See the corresponding recipe in the README:

https://github.com/n1ru4l/graphql-live-query/tree/main/packages/socket-io-graphql-server#lazy-socket-authentication

Authenticate via handshake headers

From what you are writing it seems like what you want to achieve is to process some headers used for doing the WebSocket upgrade for extracting session information. That also works!

Server

registerSocketIOGraphQLServer({
  socketServer,
  /* getParameter is invoked for each operation. */
  getParameter: async ({ socket }) => {
    const authHeader = socket.handshake.headers["authorization"];

    return {
      /* The parameters used for the operation execution. */
      graphQLExecutionParameter: {
        schema,
        contextValue: {
          socket,
        },
      },
    };
  },
});

On the client you can pass that token via the Socket.io extraHeaders options:

const socket = io({ extraHeaders: { Authorization: "Bearer fooo"} });

The drawback of that option is that the authorization header is always used from the initial handshake.

Authenticate via custom extensions

What if it was possible to send some additional payload with every operation, that could be accessed within the getParameter function?

class SocketIOGraphQLApolloLink extends ApolloLink {
  private networkLayer: SocketIOGraphQLClient<FetchResult>;
  constructor(networkLayer: SocketIOGraphQLClient<FetchResult>) {
    super();
    this.networkLayer = networkLayer;
  }

  public request(operation: Operation): Observable<FetchResult> | null {
    return new Observable<FetchResult>((sink) =>
      applyAsyncIterableIteratorToSink(
        applyLiveQueryJSONPatch(
          this.networkLayer.execute({
            operationName: operation.operationName,
            operation: print(operation.query),
            variables: operation.variables,
            extensions: {
              auth: "fooooo"
            }
          })
        ),
        sink
      )
    );
  }
}

I created #747 for this. Please let me know if that would solve your issue.

[strblr]

Hi Laurin, no problem for the delay !

Thank you for the detailed response. The last solution with the newly added extensions seems to fit my needs. I'm about to give it a try (after #754 is solved haha), and will make sure to keep you updated.