feat: jwt renew via graphql + users create/authorize UI

client/client-app.js

@@ -7,10 +7,11 @@ import VueSimpleBreakpoints from 'vue-simple-breakpoints'
 import VeeValidate from 'vee-validate'
 import { ApolloClient } from 'apollo-client'
 import { createPersistedQueryLink } from 'apollo-link-persisted-queries'
-// import { BatchHttpLink } from 'apollo-link-batch-http'
-import { split } from 'apollo-link'
-import { createHttpLink } from 'apollo-link-http'
+import { BatchHttpLink } from 'apollo-link-batch-http'
+import { ApolloLink, split } from 'apollo-link'
+// import { createHttpLink } from 'apollo-link-http'
 import { WebSocketLink } from 'apollo-link-ws'
+import { ErrorLink } from 'apollo-link-error'
 import { InMemoryCache } from 'apollo-cache-inmemory'
 import { getMainDefinition } from 'apollo-utilities'
 import VueApollo from 'vue-apollo'
@@ -54,24 +55,47 @@ moment.locale(siteConfig.lang)
 const graphQLEndpoint = window.location.protocol + '//' + window.location.host + '/graphql'
 const graphQLWSEndpoint = ((window.location.protocol === 'https:') ? 'wss:' : 'ws:') + '//' + window.location.host + '/graphql-subscriptions'
 
-const graphQLLink = createPersistedQueryLink().concat(
-  createHttpLink({
+const graphQLLink = ApolloLink.from([
+  new ErrorLink(({ graphQLErrors, networkError }) => {
+    if (graphQLErrors) {
+      graphQLErrors.map(({ message, locations, path }) =>
+        console.error(
+          `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
+        )
+      )
+      store.commit('showNotification', {
+        style: 'red',
+        message: `An expected error occured.`,
+        icon: 'warning'
+      })
+    }
+    if (networkError) {
+      console.error(networkError)
+      store.commit('showNotification', {
+        style: 'red',
+        message: `Network Error: ${networkError.message}`,
+        icon: 'error'
+      })
+    }
+  }),
+  createPersistedQueryLink(),
+  new BatchHttpLink({
     includeExtensions: true,
     uri: graphQLEndpoint,
     credentials: 'include',
-    fetch: (uri, options) => {
+    fetch: async (uri, options) => {
       // Strip __typename fields from variables
       let body = JSON.parse(options.body)
-      // body = body.map(bd => {
-      //   return ({
-      //     ...bd,
-      //     variables: JSON.parse(JSON.stringify(bd.variables), (key, value) => { return key === '__typename' ? undefined : value })
-      //   })
-      // })
-      body = {
-        ...body,
-        variables: JSON.parse(JSON.stringify(body.variables), (key, value) => { return key === '__typename' ? undefined : value })
-      }
+      body = body.map(bd => {
+        return ({
+          ...bd,
+          variables: JSON.parse(JSON.stringify(bd.variables), (key, value) => { return key === '__typename' ? undefined : value })
+        })
+      })
+      // body = {
+      //   ...body,
+      //   variables: JSON.parse(JSON.stringify(body.variables), (key, value) => { return key === '__typename' ? undefined : value })
+      // }
       options.body = JSON.stringify(body)
 
       // Inject authentication token
@@ -80,10 +104,17 @@ const graphQLLink = createPersistedQueryLink().concat(
         options.headers.Authorization = `Bearer ${jwtToken}`
       }
 
-      return fetch(uri, options)
+      const resp = await fetch(uri, options)
+
+      // Handle renewed JWT
+      const newJWT = resp.headers.get('new-jwt')
+      if (newJWT) {
+        Cookies.set('jwt', newJWT, { expires: 365 })
+      }
+      return resp
     }
   })
-)
+])
 
 const graphQLWSLink = new WebSocketLink({
   uri: graphQLWSEndpoint,