@graphcommerce/magento-customer 6.2.0-canary.29 → 6.2.0-canary.30

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 6.2.0-canary.30
+
+### Patch Changes
+
+- [#1942](https://github.com/graphcommerce-org/graphcommerce/pull/1942) [`21b0d0c48`](https://github.com/graphcommerce-org/graphcommerce/commit/21b0d0c48603343c09f287978bf051140e9be912) - Customer's session is now revalidated when a previous session is detected on pageload, making sure the customer is still logged in. ([@paales](https://github.com/paales))
+
 ## 6.2.0-canary.29
 
 ## 6.2.0-canary.28

package/components/CustomerFab/CustomerFab.tsx

@@ -8,6 +8,7 @@ import { i18n } from '@lingui/core'
 import { Fab, FabProps as FabPropsType, NoSsr, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { useCustomerSession, UseCustomerSessionReturn } from '../../hooks'
+import { useCustomerValidateToken } from '../../hooks/useCustomerValidateToken'
 
 type CustomerFabContentProps = {
   icon?: React.ReactNode
@@ -53,6 +54,8 @@ export type CustomerFabProps = Omit<CustomerFabContentProps, 'session'>
 export function CustomerFab(props: CustomerFabProps) {
   const session = useCustomerSession()
 
+  useCustomerValidateToken()
+
   return (
     <NoSsr fallback={<CustomerFabContent {...props} />}>
       <CustomerFabContent session={session} {...props} />

package/hooks/UseCustomerValidateToken.graphql

@@ -0,0 +1,5 @@
+query UseCustomerValidateToken {
+  customer {
+    email
+  }
+}

package/hooks/useCustomerValidateToken.ts

@@ -0,0 +1,23 @@
+import { useApolloClient } from '@graphcommerce/graphql'
+import { ErrorCategory } from '@graphcommerce/magento-graphql'
+import { useRouter } from 'next/router'
+import { UseCustomerValidateTokenDocument } from './UseCustomerValidateToken.gql'
+import { useCustomerQuery } from './useCustomerQuery'
+
+/** Validates the current customer token. This hook is supposed to be called only once. */
+export function useCustomerValidateToken() {
+  const client = useApolloClient()
+  const router = useRouter()
+
+  useCustomerQuery(UseCustomerValidateTokenDocument, {
+    initialFetchPolicy: 'network-only',
+    onError: async ({ graphQLErrors }) => {
+      const category: ErrorCategory = 'graphql-authorization'
+      // If there is no authorization error, do nothing.
+      if (!graphQLErrors.some((e) => e.extensions?.category === category)) return
+
+      await client.clearStore()
+      router.reload()
+    },
+  })
+}

package/link/createCustomerTokenLink.ts

@@ -1,7 +1,5 @@
-import { NormalizedCacheObject } from '@graphcommerce/graphql'
-import { ApolloLink, ApolloCache, setContext } from '@graphcommerce/graphql/apollo'
+import { setContext } from '@graphcommerce/graphql/apollo'
 import { CustomerTokenDocument } from '../hooks'
-import { onAuthorizationError } from './onAuthenticationError'
 
 export const addTokenHeader = setContext((_, context) => {
   if (!context.headers) context.headers = {}
@@ -17,7 +15,4 @@ export const addTokenHeader = setContext((_, context) => {
   }
 })
 
-export const customerTokenLink = ApolloLink.from([addTokenHeader, onAuthorizationError])
-
-/** Not really required anymore, you can use customerTokenLink directly */
-export const createCustomerTokenLink = (_: ApolloCache<NormalizedCacheObject>) => customerTokenLink
+export const customerTokenLink = addTokenHeader

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.2.0-canary.29",
+  "version": "6.2.0-canary.30",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,20 +12,20 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.29",
-    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.29",
-    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.29"
+    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.30",
+    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.30",
+    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.30"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "6.2.0-canary.29",
-    "@graphcommerce/framer-utils": "6.2.0-canary.29",
-    "@graphcommerce/graphql": "6.2.0-canary.29",
-    "@graphcommerce/graphql-mesh": "6.2.0-canary.29",
-    "@graphcommerce/image": "6.2.0-canary.29",
-    "@graphcommerce/magento-graphql": "6.2.0-canary.29",
-    "@graphcommerce/magento-store": "6.2.0-canary.29",
-    "@graphcommerce/next-ui": "6.2.0-canary.29",
-    "@graphcommerce/react-hook-form": "6.2.0-canary.29"
+    "@graphcommerce/ecommerce-ui": "6.2.0-canary.30",
+    "@graphcommerce/framer-utils": "6.2.0-canary.30",
+    "@graphcommerce/graphql": "6.2.0-canary.30",
+    "@graphcommerce/graphql-mesh": "6.2.0-canary.30",
+    "@graphcommerce/image": "6.2.0-canary.30",
+    "@graphcommerce/magento-graphql": "6.2.0-canary.30",
+    "@graphcommerce/magento-store": "6.2.0-canary.30",
+    "@graphcommerce/next-ui": "6.2.0-canary.30",
+    "@graphcommerce/react-hook-form": "6.2.0-canary.30"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",

package/link/onAuthenticationError.ts

@@ -1,39 +0,0 @@
-import { InMemoryCache } from '@graphcommerce/graphql'
-import { onError } from '@graphcommerce/graphql/apollo'
-import { CustomerTokenDocument } from '../hooks/CustomerToken.gql'
-
-function invalidateToken(cache: InMemoryCache) {
-  const res = cache.readQuery({
-    query: CustomerTokenDocument,
-  })
-
-  if (res?.customerToken?.valid) {
-    // Write arbitrary old token to document
-    cache.writeQuery({
-      query: CustomerTokenDocument,
-      data: {
-        customerToken: {
-          ...res.customerToken,
-          token: null,
-          createdAt: new Date('2000').toUTCString(),
-          valid: false,
-        },
-      },
-      broadcast: true,
-    })
-  }
-}
-
-export const onAuthorizationError = onError(({ graphQLErrors, operation }) => {
-  const { cache } = operation.getContext()
-  if (graphQLErrors) {
-    for (const err of graphQLErrors) {
-      const isCustomerError = err.path?.join('.').toLowerCase().includes('customer')
-      if (err.extensions?.category === 'graphql-authorization' && isCustomerError) {
-        // Modify the operation context with a new token
-        invalidateToken(cache as InMemoryCache)
-        break
-      }
-    }
-  }
-})