@graphcommerce/magento-customer 4.4.2 → 4.5.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Change Log
 
+## 4.5.1
+
+### Patch Changes
+
+- [#1499](https://github.com/graphcommerce-org/graphcommerce/pull/1499) [`d205b037f`](https://github.com/graphcommerce-org/graphcommerce/commit/d205b037fee82b8c03993f2c586f477e826093bf) Thanks [@paales](https://github.com/paales)! - Unified and simplified the customer authentication error handling
+
+## 4.5.0
+
+### Minor Changes
+
+- [#1492](https://github.com/graphcommerce-org/graphcommerce/pull/1492) [`bed806ddd`](https://github.com/graphcommerce-org/graphcommerce/commit/bed806dddd7e025806a69798ef9587aa165d392f) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - Removed useExtractCustomerErrors hook and implemented error handling via HttpLink Error
+
+### Patch Changes
+
+- Updated dependencies [[`ffec8800a`](https://github.com/graphcommerce-org/graphcommerce/commit/ffec8800a50ff2fe9b9fc5feeb5a0a878b573f0e), [`bed806ddd`](https://github.com/graphcommerce-org/graphcommerce/commit/bed806dddd7e025806a69798ef9587aa165d392f)]:
+  - @graphcommerce/react-hook-form@3.2.1
+  - @graphcommerce/graphql@3.2.0
+  - @graphcommerce/ecommerce-ui@1.0.17
+  - @graphcommerce/magento-graphql@3.0.13
+  - @graphcommerce/magento-store@4.2.8
+
 ## 4.4.2
 
 ### Patch Changes

package/components/ApolloCustomerError/ApolloCustomerErrorAlert.tsx

@@ -2,20 +2,31 @@ import { ApolloErrorAlert, ApolloErrorAlertProps } from '@graphcommerce/ecommerc
 import { Trans } from '@lingui/react'
 import { Link } from '@mui/material'
 import NextLink from 'next/link'
-import { useExtractCustomerErrors } from '../../hooks/useExtractCustomerErrors'
+import { useCustomerSession } from '../../hooks/useCustomerSession'
+import { useAuthorizationErrorMasked } from './useAuthorizationErrorMasked'
 
-type MagentoErrorAlertProps = ApolloErrorAlertProps
+export type ApolloCustomerErrorAlertProps = ApolloErrorAlertProps
 
-export function ApolloCustomerErrorAlert(props: MagentoErrorAlertProps) {
-  const { error, unauthorized } = useExtractCustomerErrors(props)
+export function ApolloCustomerErrorAlert(props: ApolloCustomerErrorAlertProps) {
+  const { error, graphqlErrorAlertProps } = props
+  const [newError, unauthorized] = useAuthorizationErrorMasked(error)
+  const { token } = useCustomerSession()
 
-  const action = unauthorized && (
-    <NextLink href='/account/signin' passHref>
-      <Link underline='hover'>
-        <Trans id='Create Account' /> / <Trans id='Sign in' />
-      </Link>
-    </NextLink>
+  return (
+    <ApolloErrorAlert
+      {...props}
+      error={newError}
+      graphqlErrorAlertProps={{
+        action: unauthorized ? (
+          <NextLink href='/account/signin' passHref>
+            <Link underline='hover'>
+              {token ? <Trans id='Sign in' /> : <Trans id='Create Account' />}
+            </Link>
+          </NextLink>
+        ) : (
+          graphqlErrorAlertProps?.action
+        ),
+      }}
+    />
   )
-
-  return <ApolloErrorAlert error={error} graphqlErrorAlertProps={{ action }} />
 }

package/components/ApolloCustomerError/ApolloCustomerErrorFullPage.tsx

@@ -1,41 +1,41 @@
-import { ApolloErrorFullPage, ApolloErrorAlertProps } from '@graphcommerce/ecommerce-ui'
+import { ApolloErrorFullPage, ApolloErrorFullPageProps } from '@graphcommerce/ecommerce-ui'
 import { iconPerson, IconSvg } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
 import PageLink from 'next/link'
-import { useExtractCustomerErrors } from '../../hooks/useExtractCustomerErrors'
+import type { SetOptional } from 'type-fest'
+import { useCustomerSession } from '../../hooks/useCustomerSession'
+import { useAuthorizationErrorMasked } from './useAuthorizationErrorMasked'
 
-type ApolloCustomerErrorFullPageProps = {
-  signInHref: string
-  signUpHref: string
-} & ApolloErrorAlertProps
+export type ApolloCustomerErrorFullPageProps = {
+  /** @deprecated Not used */
+  signInHref?: string
+  /** @deprecated Not used */
+  signUpHref?: string
+} & SetOptional<ApolloErrorFullPageProps, 'icon'>
 
 export function ApolloCustomerErrorFullPage(props: ApolloCustomerErrorFullPageProps) {
-  const { signInHref, signUpHref } = props
-  const { error, unauthorized } = useExtractCustomerErrors(props)
+  const { error, icon, altButton, button, ...alertProps } = props
+  const [, unauthorized] = useAuthorizationErrorMasked()
+  const { token } = useCustomerSession()
 
   return (
     <ApolloErrorFullPage
-      error={error}
       icon={<IconSvg src={iconPerson} size='xxl' />}
+      {...props}
+      error={error}
       button={
         unauthorized ? (
-          <PageLink href={signInHref} passHref>
+          <PageLink href='/account/signin' passHref>
             <Button variant='contained' color='primary' size='large'>
-              <Trans id='Log in' />
-            </Button>
-          </PageLink>
-        ) : undefined
-      }
-      altButton={
-        unauthorized ? (
-          <PageLink href={signUpHref} passHref>
-            <Button variant='text' color='primary'>
-              <Trans id='Or create an account' />
+              {token ? <Trans id='Sign in' /> : <Trans id='Create Account' />}
             </Button>
           </PageLink>
-        ) : undefined
+        ) : (
+          button
+        )
       }
+      {...alertProps}
     />
   )
 }

package/components/ApolloCustomerError/ApolloCustomerErrorSnackbar.tsx

@@ -1,7 +1,31 @@
 import { ApolloErrorSnackbar, ApolloErrorSnackbarProps } from '@graphcommerce/ecommerce-ui'
+import { Trans } from '@lingui/react'
+import { Button, Link } from '@mui/material'
+import NextLink from 'next/link'
+import { useCustomerSession } from '../../hooks/useCustomerSession'
+import { useAuthorizationErrorMasked } from './useAuthorizationErrorMasked'
 
-type ApolloCustomerErrorSnackbarProps = ApolloErrorSnackbarProps
+export type ApolloCustomerErrorSnackbarProps = ApolloErrorSnackbarProps
 
 export function ApolloCustomerErrorSnackbar(props: ApolloCustomerErrorSnackbarProps) {
-  return <ApolloErrorSnackbar {...props} />
+  const { error, action } = props
+  const [newError, unauthorized] = useAuthorizationErrorMasked(error)
+  const { token } = useCustomerSession()
+
+  return (
+    <ApolloErrorSnackbar
+      {...props}
+      action={
+        unauthorized ? (
+          <NextLink href='/account/signin' passHref>
+            <Button variant='pill' color='secondary'>
+              {token ? <Trans id='Sign in' /> : <Trans id='Create Account' />}
+            </Button>
+          </NextLink>
+        ) : (
+          action
+        )
+      }
+    />
+  )
 }

package/components/ApolloCustomerError/index.ts

@@ -0,0 +1,3 @@
+export * from './ApolloCustomerErrorAlert'
+export * from './ApolloCustomerErrorFullPage'
+export * from './ApolloCustomerErrorSnackbar'

package/components/ApolloCustomerError/useAuthorizationErrorMasked.ts

@@ -0,0 +1,16 @@
+import { ApolloError } from '@graphcommerce/graphql'
+import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
+import { i18n } from '@lingui/core'
+import { useCustomerSession } from '../../hooks/useCustomerSession'
+
+export function useAuthorizationErrorMasked(error?: ApolloError) {
+  const { token } = useCustomerSession()
+
+  return graphqlErrorByCategory({
+    category: 'graphql-authorization',
+    error,
+    mask: token
+      ? i18n._(/* i18n */ `Please reauthenticate and try again`)
+      : i18n._(/* i18n */ `You must sign in to continue`),
+  })
+}

package/components/index.ts

@@ -4,9 +4,7 @@ export * from './AccountAddresses/AccountAddresses'
 export * from './AddressFields/AddressFields'
 export * from './AddressMultiLine/AddressMultiLine'
 export * from './AddressSingleLine/AddressSingleLine'
-export * from './ApolloCustomerError/ApolloCustomerErrorAlert'
-export * from './ApolloCustomerError/ApolloCustomerErrorFullPage'
-export * from './ApolloCustomerError/ApolloCustomerErrorSnackbar'
+export * from './ApolloCustomerError'
 export * from './ChangeNameForm/ChangeNameForm'
 export * from './ChangePasswordForm/ChangePassword.gql'
 export * from './ChangePasswordForm/ChangePasswordForm'

package/hooks/index.ts

@@ -4,6 +4,5 @@ export * from './CustomerToken.gql'
 export * from './IsEmailAvailable.gql'
 export * from './useCustomerQuery'
 export * from './useCustomerSession'
-export * from './useExtractCustomerErrors'
 export * from './useFormIsEmailAvailable'
 export * from './useGuestQuery'

package/link/createCustomerTokenLink.ts

@@ -1,17 +1,28 @@
-import { ApolloCache, NormalizedCacheObject, setContext } from '@graphcommerce/graphql'
-import { CustomerTokenDocument } from '../hooks/CustomerToken.gql'
+import {
+  ApolloCache,
+  ApolloLink,
+  ClientContext,
+  NormalizedCacheObject,
+  setContext,
+} from '@graphcommerce/graphql'
+import { CustomerTokenDocument } from '../hooks'
+import { onAuthenticationError } from './onAuthenticationError'
 
-export const createCustomerTokenLink = (cache: ApolloCache<NormalizedCacheObject>) =>
-  setContext((_, context) => {
-    if (!context.headers) context.headers = {}
-    try {
-      const query = cache.readQuery({ query: CustomerTokenDocument })
-      if (query?.customerToken?.token) {
-        context.headers.authorization = `Bearer ${query?.customerToken?.token}`
-        return context
-      }
-      return context
-    } catch (error) {
+export const addTokenHeader = setContext((_, context: ClientContext) => {
+  if (!context.headers) context.headers = {}
+  try {
+    const query = context.cache.readQuery({ query: CustomerTokenDocument })
+    if (query?.customerToken?.token) {
+      context.headers.authorization = `Bearer ${query?.customerToken?.token}`
       return context
     }
-  })
+    return context
+  } catch (error) {
+    return context
+  }
+})
+
+export const customerTokenLink = ApolloLink.from([addTokenHeader, onAuthenticationError])
+
+/** Not really required anymore, you can use customerTokenLink directly */
+export const createCustomerTokenLink = (_: ApolloCache<NormalizedCacheObject>) => customerTokenLink

package/link/onAuthenticationError.ts

@@ -0,0 +1,35 @@
+import { InMemoryCache, onError } from '@graphcommerce/graphql'
+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,
+          createdAt: new Date('2000').toUTCString(),
+          valid: false,
+        },
+      },
+      broadcast: true,
+    })
+  }
+}
+
+export const onAuthenticationError = onError(({ graphQLErrors, operation }) => {
+  const { cache } = operation.getContext()
+  if (graphQLErrors) {
+    for (const err of graphQLErrors) {
+      if (err.extensions.category === 'graphql-authorization') {
+        // Modify the operation context with a new token
+        invalidateToken(cache as InMemoryCache)
+      }
+    }
+  }
+})

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.4.2",
+  "version": "4.5.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -15,17 +15,18 @@
     "@graphcommerce/eslint-config-pwa": "^4.1.7",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
     "@graphcommerce/typescript-config-pwa": "^4.0.3",
-    "@playwright/test": "^1.21.1"
+    "@playwright/test": "^1.21.1",
+    "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "1.0.16",
-    "@graphcommerce/graphql": "3.1.3",
+    "@graphcommerce/ecommerce-ui": "1.0.17",
+    "@graphcommerce/graphql": "3.2.0",
     "@graphcommerce/graphql-mesh": "4.1.3",
     "@graphcommerce/image": "3.1.6",
-    "@graphcommerce/magento-graphql": "3.0.12",
-    "@graphcommerce/magento-store": "4.2.7",
+    "@graphcommerce/magento-graphql": "3.0.13",
+    "@graphcommerce/magento-store": "4.2.8",
     "@graphcommerce/next-ui": "4.8.3",
-    "@graphcommerce/react-hook-form": "3.2.0"
+    "@graphcommerce/react-hook-form": "3.2.1"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",

package/hooks/useExtractCustomerErrors.tsx

@@ -1,43 +0,0 @@
-import { ApolloError, useApolloClient } from '@graphcommerce/graphql'
-import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
-import { i18n } from '@lingui/core'
-import { useEffect } from 'react'
-import { CustomerTokenDocument } from './CustomerToken.gql'
-
-export type UseExtractErrors = { error?: ApolloError }
-export function useExtractCustomerErrors({ error }: UseExtractErrors) {
-  const client = useApolloClient()
-
-  const [newError, unauthorized] = graphqlErrorByCategory({
-    category: 'graphql-authorization',
-    error,
-    extract: false,
-    mask: i18n._(/* i18n */ `You must sign in to continue`),
-  })
-
-  useEffect(() => {
-    if (!unauthorized) return
-
-    const { customerToken } =
-      client.cache.readQuery({
-        query: CustomerTokenDocument,
-      }) ?? {}
-
-    if (customerToken) {
-      // Write arbitrary old token to document
-      client.cache.writeQuery({
-        query: CustomerTokenDocument,
-        data: {
-          customerToken: {
-            ...customerToken,
-            createdAt: new Date('2000').toUTCString(),
-            valid: false,
-          },
-        },
-        broadcast: true,
-      })
-    }
-  }, [client.cache, unauthorized])
-
-  return { error: newError, unauthorized }
-}