Does JWT middleware verify websocket connections?

[oSethoum]

Hi, am using gqlgen with Echo and the JWT middleware, for graphql client am using urql, am getting a websocket error not connecting when I use JWT middleware.

the routes:

func Init(e *echo.Echo) {
	e.POST("/login", auth.Login)
	e.POST("/signup", auth.SignUp)

	r := e.Group("/")

	r.Use(auth.Protected())
	r.Any("subscriptions", handlers.GraphqlWsHandler(db.DB))
	r.GET("", handlers.PlaygroundHandler())
	r.Any("query", handlers.GraphqlHandler(db.DB))
	r.GET("ws", handlers.PlaygroundWsHandler())
}

the protected handler

func Protected() echo.MiddlewareFunc {
	config := middleware.JWTConfig{
		Claims:     &Claims{},
		SigningKey: []byte("secret"),
	}

	return middleware.JWTWithConfig(config)
}

how am connecting to on the frontend using urql

const wsClient = useMemo(
    () =>
      createWSClient({
        url: "ws://localhost:3001/subscriptions",
        connectionParams: async () => {
          return { token: "Bearer " + token };
        },
      }),
    []
  );

  const client = useMemo(
    () =>
      createClient({
        url: url + "/query",
        fetchOptions: {
          headers: {
            "Content-Type": "application/json",
            Authorization: "Bearer " + token,
          },
        },
        exchanges: [
          ...defaultExchanges,
          subscriptionExchange({
            forwardSubscription: (operation) => ({
              subscribe: (sink) => ({
                unsubscribe: wsClient.subscribe(operation, sink),
              }),
            }),
          }),
        ],
      }),
    [token]
  );

[aldas]

Websocket in browsers do not allow adding custom headers (ala JWT). See https://stackoverflow.com/a/4361358/2514290

Search for "Websocket + token auth" Basically you create one-time token before connecting to the websocket and when connecting to the websocket provide that token in url (as query param for example).

[oSethoum]

Thank you, that's how I did it, the query param works just fine.

[AndriyKalashnykov]

@oSethoum could you please share you urql client implementation?

[oSethoum]

@AndriyKalashnykov Sure, you will find it in this repo
https://github.com/oSethoum/frontend

[AndriyKalashnykov]

@oSethoum Thanks!!!

[AndriyKalashnykov]

@oSethoum btw, which version on Node do you use for that client? also npm/yarn?

[oSethoum]

@AndriyKalashnykov for now am using node version 16.17.1 ( windows ) and pnpm as a package manager.

[AndriyKalashnykov]

@oSethoum got it thanks. is is complete client? tried to run pnpm run build got some errors. Also which server repo you running it aginst?

[AndriyKalashnykov]

@oSethoum if that's not too much trouble to make another repo to consume todo backend, that would be ideal.

[oSethoum]

@AndriyKalashnykov I will upload it later today, my timezone is GMT+1.

[oSethoum]

@AndriyKalashnykov Sorry for late reply, this example should be ready by now it includes frontend folder to consume the API.
https://github.com/oSethoum/echo-gql-todo

[AndriyKalashnykov]

@oSethoum Thanks, really appreciate it! Not everybody goes an extra mile to help, it means a lot. What is your email?

[oSethoum]

@AndriyKalashnykov am not sure what you need my email for but here it is:
os.sethoum@gmail.com