Possibility to add authorization headers to the GraphQLTestSubscription about graphql-spring-boot

[maxkramer]

Hi @vikforfda, @BlasiusSecundus, I did indeed manage to get a working solution. I can't remember the exact resource I used for it, but the links you shared are very close. I'm not very happy with the solution in the sense that I would've hoped the library would've supported this case specifically as it's something supported by Apollo out of the box with the connection params. I know there's no "best practice" or even recommended practice for handling auth tokens with subscriptions, but it needs to start from somewhere! Hope this code is helpful!

@Component
internal class GraphQLSubscriptionAuthenticationListener(
    private val authenticationProvider: AuthenticationProvider,
) : ApolloSubscriptionConnectionListener {
    override fun onConnect(session: SubscriptionSession, message: OperationMessage) {
        val authToken = (message.payload as Map<*, *>)[AUTH_TOKEN_PAYLOAD_KEY] as? String
        if (authToken != null) {
            val authentication = authenticationProvider.authenticate(BearerTokenAuthenticationToken(authToken))
            SecurityContextHolder.getContext().authentication = authentication
            session.userProperties[AUTHENTICATION_USER_PROPERTY_KEY] = authentication
        }
    }

    override fun onStart(session: SubscriptionSession, message: OperationMessage) {
        val authentication = session.userProperties[AUTHENTICATION_USER_PROPERTY_KEY] as? Authentication
        SecurityContextHolder.getContext().authentication = authentication
    }

    companion object {
        private const val AUTH_TOKEN_PAYLOAD_KEY = "authToken"
        private const val AUTHENTICATION_USER_PROPERTY_KEY = "AUTHENTICATION"
    }
}

Frontend client creation:

const underlyingSubscriptionClient = new SubscriptionClient(getUrl(Path.GraphqlSubscriptions), {
  // https://www.npmjs.com/package/subscriptions-transport-ws
  connectionParams: async () => ({
    authToken: jwtToken,
  }),
  lazy: true,
})

Where possible, it would still be great to get some more customisability in the WebSocketClientConfigurator where can have the ability for a more flexibility implementation.

[maxkramer]

@BlasiusSecundus might you have a recommendation here?

[vikforfda]

Hi @maxkramer were you able to figure out how to send oAuth access tokens to Spring Boot based GraphQL dynamically / programmatically? We are trying to do the same thing where we are launching GraphQL from a web page. We want the web page to pass the oAuth JWT access tokens so that GraphQL can enforce authorization when user executes queries using the information in the token.

[BlasiusSecundus]

Hi @maxkramer, sorry for not responding earlier. AFAIK there is no standard way to handle authentication via GraphQL subscriptions.

One possibility is to put the auth token in the connection_init (via providing a payload for the GraphQLTestSubscription.init method) or the start message payload. Then handling it on the other side by providing an implementation of ApolloSubscriptionConnectionListener.

Then verifying the token and putting necessary things into Spring Security context. See also graphql-java-kickstart/graphql-java-servlet#134

[BlasiusSecundus]

See also a similar approach of the Apollo Server JS implementation: https://www.apollographql.com/docs/apollo-server/data/subscriptions/#onconnect-and-ondisconnect

[vikforfda]

@maxkramer @BlasiusSecundus Thanks for sharing your solutions. I have one clarifying question for @maxkramer (I am new to Playground). I see in your code you are referring to ApolloSubscriptionConnectionListener. In your case did you use the Apollo Server version of GraphQL since we want to use the Open source version of GraphQL

[skesani]

@maxkramer @BlasiusSecundus Will this work with the embedded /playground? please see my question here.

#928

[maxkramer]

@skesani we're just discussing the webhooks here, but re the headers, I haven't personally played around with setting them automatically via yaml as our access tokens aren't long living. Somebody I worked with in the past created a bookmark that ran some js that fetched a new token and injected it automatically into the http headers section. But according to the docs, I believe it should be this in the application.yaml:

graphql:
    playground:
        headers:
            Authorization: Bearer ey.someToken

There's also a graphql.playground.settings.editor.reuse-headers that perhaps is related?

@vikforfda we're using the graphql kickstart spring boot starter, I'm not sure which one that's using as we haven't had a need to look into anything further.

[BlasiusSecundus]

In your case did you use the Apollo Server version of GraphQL since we want to use the Open source version of GraphQL

@vikforfda ApolloSubscriptionConnectionListener is actually part of this library: https://github.com/graphql-java-kickstart/graphql-java-servlet/blob/master/graphql-java-kickstart/src/main/java/graphql/kickstart/execution/subscriptions/apollo/ApolloSubscriptionConnectionListener.java

[BlasiusSecundus]

@skesani Yes, it will work. The variables set in the "HTTP headers" tab will be sent to the server as the payload of the connection_init message.

[skesani]

@skesani Yes, it will work. The variables set in the "HTTP headers" tab will be sent to the server as the payload of the connection_init message.

@BlasiusSecundus could you provide any sample to set the token programmatically?

I am thinking to do like this.

`
import graphql.kickstart.playground.GraphQLPlaygroundConfigurer;
import org.springframework.stereotype.Component;

@component
public class CustomGraphQLPlaygroundConfigurer implements GraphQLPlaygroundConfigurer {

@Override
public void configure(GraphQLPlaygroundConfigBuilder builder) {
    // Add JavaScript file to the GraphQL Playground page
    builder.addPlugin(getCustomPlugin());
}

private String getCustomPlugin() {
    // Get token from some source (e.g. database, config file, etc.)
    String token = "my-token";

    // Create JavaScript code that sets the token value in the GraphQL request headers
    return "window.addEventListener('load', function (event) {\n" +
            "  GraphQLPlayground.init(document.getElementById('root'), {\n" +
            "    settings: {\n" +
            "      'request.credentials': 'same-origin',\n" +
            "      'X-AUTH-TOKEN': '" + token + "'\n" +
            "    }\n" +
            "  });\n" +
            "});";
}

}

`

[BlasiusSecundus]

@skesani Variables from configuration are already passed to Playground in PlaygroundController. That would be the natural place to extend its functionality so that it can take headers from sources other than configuration properties. (E.g. some configurator bean as you proposed).

[BlasiusSecundus]

Returning to the original question / bug report, I think this issue should be closed:

• I don't see any bug or necessary improvement as far as GraphQLTestSubscription is concerned. It is possible to send the authorization token to the server as part of the payload of the connection_init message, which is sort of the preferred way. Playground automatically does this (sending the "HTTP Headers" as payload of connection_init) out of the box.
• There are two related, but functionally independent improvement suggested in this discussion:
  • built-in support for authenticated subscriptions (currently, the necessary credentials processing, Spring Security integration etc. has to be done by the user of the library)
  • more flexibility when configuring default headers for developer utilities (Playground and others) - currently, it is only possible using configuration properties, which may not be suitable for some more advanced scenarios (e.g. obtaining access token from an authentication server when opening Playground)

These two should be handled as separate issues (flagged as enhancement).

[skesani]

@skesani Variables from configuration are already passed to Playground in PlaygroundController. That would be the natural place to extend its functionality so that it can take headers from sources other than configuration properties. (E.g. some configurator bean as you proposed).

@BlasiusSecundus I created this repo and added MyConfig and MyPlaygroundController extends PlaygroundController however, I am unable to override the headers, could you please take a look?
https://github.com/skesani/graphql-playground