@graphcommerce/googlerecaptcha 2.0.5 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 2.1.0
+
+### Minor Changes
+
+- [#1344](https://github.com/graphcommerce-org/graphcommerce/pull/1344) [`5ab19683c`](https://github.com/graphcommerce-org/graphcommerce/commit/5ab19683ca4e1ff78c21dbe09b73aeea43ef3b64) Thanks [@paales](https://github.com/paales)! - Added Google reCAPTCHA conditional loading to make it fully compatible, but load the reCAPTCHA only on pages with forms.
+
 ## 2.0.5
 
 ### Patch Changes

package/README.md

@@ -1,14 +1,28 @@
 # @graphcommerce/googlerecaptcha
 
-This package makes it easy to add Google Recaptcha v3 to GraphCommerce
+This package makes it easy to add Google Recaptcha v3 to GraphCommerce. It
+allows you to load the Recatcha script conditionally on the page so it isn't
+initialized on all pages.
 
-### Usage
+### Installation
 
 1. Add `NEXT_PUBLIC_GOOGLE_RECAPTCHA_V3_SITE_KEY` to your .env file.
    [example](../../examples/magento-graphcms/.env.example)
-2. Add `<GoogleRecaptchaV3Script/>` to your `pages/_app.tsx` file
+2. Add `<GoogleRecaptchaProvider/>` to your `pages/_app.tsx` file
    [example](../../examples/magento-graphcms/pages/_app.tsx)
 3. Add `recaptchaLink` to your Apollo Client.
-   [example](../../examples/magento-graphcms/lib/createApolloClient.ts)
+   [example](../../examples/magento-graphcms/lib/graphql/GraphQLProvider.tsx)
 4. Add `X-Recaptcha` header to your `.meshrc.yml`.
    [example](../../examples/magento-graphcms/.meshrc.yml)
+
+### Usage
+
+If you have a form that uses GoogleRecaptcha add `useGoogleRecaptcha()` in the
+root of your component.
+
+### Troubleshooting
+
+`ReCaptcha validation failed, please try again`  
+: Magento is configured correctly and this is an error coming from Google
+directly. You have misconfigured something on the Google side. Make sure the
+domains are set up correctly, etc.

package/components/GoogleRecaptchaProvider.tsx

@@ -0,0 +1,20 @@
+import React, { useMemo, useState } from 'react'
+import { RecaptchaContext, recaptchaContext } from '../context/recaptchaContext'
+import { GoogleRecaptchaV3Script } from './GoogleRecaptchaV3Script'
+
+export function GoogleRecaptchaProvider(props: { children: React.ReactNode; siteKey?: string }) {
+  const { children, siteKey = process.env.NEXT_PUBLIC_GOOGLE_RECAPTCHA_V3_SITE_KEY } = props
+  const [enabled, setEnabled] = useState(false)
+
+  const context: RecaptchaContext = useMemo(
+    () => ({ enabled, siteKey, enable: () => setEnabled(true) }),
+    [enabled, siteKey],
+  )
+
+  return (
+    <recaptchaContext.Provider value={context}>
+      <GoogleRecaptchaV3Script />
+      {children}
+    </recaptchaContext.Provider>
+  )
+}

package/components/GoogleRecaptchaV3Script.tsx

@@ -1,23 +1,26 @@
+import { GlobalStyles } from '@mui/material'
 import Script from 'next/script'
-import React from 'react'
+import { useContext } from 'react'
+import { recaptchaContext } from '../context/recaptchaContext'
 
 export function GoogleRecaptchaV3Script() {
-  const siteKey = process.env.NEXT_PUBLIC_GOOGLE_RECAPTCHA_V3_SITE_KEY
+  const { siteKey, enabled } = useContext(recaptchaContext)
 
-  if (process.env.NODE_ENV !== 'production' && !siteKey)
+  if (process.env.NODE_ENV !== 'production' && !siteKey && enabled)
     console.warn(
       '[@graphcommerce/googletagmanager]: NEXT_PUBLIC_GOOGLE_RECAPTCHA_V3_SITE_KEY not found',
     )
 
-  if (!siteKey) return null
+  if (!siteKey || !enabled) return null
 
   return (
     <>
       <Script
+        key='google-recaptcha-v3'
         strategy='lazyOnload'
         src={`https://www.google.com/recaptcha/api.js?render=${siteKey}`}
       />
-      <style>{`.grecaptcha-badge': { visibility: 'hidden' }`}</style>
+      <GlobalStyles styles={{ '.grecaptcha-badge': { visibility: 'hidden' } }} />
     </>
   )
 }

package/context/recaptchaContext.tsx

@@ -0,0 +1,9 @@
+import { createContext } from 'react'
+
+export type RecaptchaContext = {
+  enabled: boolean
+  enable?: () => void
+  siteKey?: string
+}
+
+export const recaptchaContext = createContext<RecaptchaContext>({ enabled: false })

package/hooks/useGoogleRecaptcha.tsx

@@ -0,0 +1,4 @@
+import { useContext } from 'react'
+import { recaptchaContext } from '../context/recaptchaContext'
+
+export const useGoogleRecaptcha = () => useContext(recaptchaContext).enable?.()

package/index.ts

@@ -1,2 +1,4 @@
 export * from './components/GoogleRecaptchaV3Script'
+export * from './components/GoogleRecaptchaProvider'
 export * from './link/recaptchaLink'
+export * from './hooks/useGoogleRecaptcha'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/googlerecaptcha",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {