Merge branch 'asmeikal-gql-subscriptions-auth'

Author: kamilmysliwiec

content/graphql/subscriptions.md

@@ -294,3 +294,49 @@ GraphQLModule.forRoot({
   }
 }),
 ```
+
+#### Authentication over WebSocket
+
+Checking that the user is authenticated should be done inside the `onConnect` callback function that you can specify in the `subscriptions` options.
+
+The `onConnect` will receive as a first argument the `connectionParams` passed to the `SubscriptionClient` (read [more](https://www.apollographql.com/docs/react/data/subscriptions/#5-authenticate-over-websocket-optional)).
+
+```typescript
+GraphQLModule.forRoot({
+  subscriptions: {
+    'subscriptions-transport-ws': {
+      onConnect: (connectionParams) => {
+        const authToken = connectionParams.authToken;
+        if (!isValid(authToken)) {
+          throw new Error('Token is not valid');
+        }
+        // extract user information from token
+        const user = parseToken(authToken);
+        // return user info to add them to the context later
+        return { user };
+      },
+    }
+  },
+  context: ({ connection }) => {
+    // connection.context will be equal to what was returned by the "onConnect" callback
+  },
+}),
+```
+
+The `authToken` in this example is only sent once by the client, when the connection is first established.
+All subscriptions made with this connection will have the same `authToken`, and thus the same user info.
+
+> warning **Note** There is a bug in `subscriptions-transport-ws` that allows connections to skip the `onConnect` phase (read [more](https://github.com/apollographql/subscriptions-transport-ws/issues/349)). You should not assume that `onConnect` was called when the user starts a subscription, and always check that the `context` is populated.
+
+If you're using the `graphql-ws` package, the signature of the `onConnect` callback will be slightly different:
+
+```typescript
+subscriptions: {
+  'graphql-ws': {
+    onConnect: (context: Context<any>) => {
+      const { connectionParams } = context;
+      // the rest will remain the same as in the example above
+    },
+  },
+},
+```

src/app/homepage/pages/microservices/custom-transport/custom-transport.component.html

@@ -197,8 +197,8 @@ <h4 appAnchor id="message-serialization"><span>Message serialization</span></h4>
 <p>If you need to add some custom logic around the serialization of responses on the client side, you can use a custom class that extends the <code>ClientProxy</code> class or one of its child classes. For modifying successful requests you can override the <code>serializeResponse</code> method, and for modifying any errors that go through this client you can override the <code>serializeError</code> method. To make use of this custom class, you can pass the class itself to the <code>ClientsModule.register()</code> method using the <code>customClass</code> property. Below is an example of a custom <code>ClientProxy</code> that serializes each error into an <code>RpcException</code>.</p>
 
 <span class="filename">
-  {{ 'error-handling.proxy' | extension: appb508b379ce892494d97bbf7fb3f5093638c8e0a8.isJsActive }}
-<app-tabs #appb508b379ce892494d97bbf7fb3f5093638c8e0a8></app-tabs>
+  {{ 'error-handling.proxy' | extension: app6d39c222a0bedd88c115e6126918ef05b8d10064.isJsActive }}
+<app-tabs #app6d39c222a0bedd88c115e6126918ef05b8d10064></app-tabs>
 </span><pre><code class="language-typescript">
 import &#123; ClientTcp, RpcException &#125; from &#39;@nestjs/microservices&#39;;
 
@@ -210,8 +210,8 @@ <h4 appAnchor id="message-serialization"><span>Message serialization</span></h4>
 </code></pre><p>and then use it in the <code>ClientsModule</code> like so:</p>
 
 <span class="filename">
-  {{ 'app.module' | extension: app9edf2a86ee25caf1a636ec7b85e62ffa504bc949.isJsActive }}
-<app-tabs #app9edf2a86ee25caf1a636ec7b85e62ffa504bc949></app-tabs>
+  {{ 'app.module' | extension: app58713f1e88f57e0ba10a9f3a0fbda5dfee0f3b97.isJsActive }}
+<app-tabs #app58713f1e88f57e0ba10a9f3a0fbda5dfee0f3b97></app-tabs>
 </span><pre><code class="language-typescript">
 @Module(&#123;
   imports: [