Merge pull request #118 from ramirezcgn/inline-badge

Add custom inline-badge

Author: t49tran

README.md

@@ -41,13 +41,15 @@ Usually, your application only needs one provider. You should place it as high a
 
 Same thing applied when you use this library with framework such as Next.js or React Router and only want to include the script on a single page. Try to make sure you only have one instance of the provider on a React tree and to place it as high (on the tree) as possible.
 
-| **Props**       | **Type** | **Default** | **Required?** | **Note**                                                                                                                                                                                                                                                        |
-| --------------- | :------: | ----------: | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| reCaptchaKey    | String  |             | Yes           | Your recaptcha key, get one from [here](https://www.google.com/recaptcha/intro/v3.html)                                                                                                                                                                         |
-| scriptProps     |  Object  |             | No            | You can customize the injected `script` tag with this prop. It allows you to add `async`, `defer`, `nonce` attributes to the script tag. You can also control whether the injected script will be added to the document body or head with `appendTo` attribute. |
-| language        |  String  |             | No            | optional prop to support different languages that is supported by Google Recaptcha. https://developers.google.com/recaptcha/docs/language                                                                                                                       |
-| useRecaptchaNet | Boolean  |       false | No            | The provider also provide the prop `useRecaptchaNet` to load script from `recaptcha.net`: https://developers.google.com/recaptcha/docs/faq#can-i-use-recaptcha-globally                                                                                         |
-| useEnterprise   | Boolean  |       false | No            | [Enterprise option](#enterprise)                                                                                                                                                                                                                                |
+| **Props**            |     **Type**     | **Default** | **Required?** | **Note**                                                                                                                                                                                                                                                        |
+|----------------------|:----------------:| ----------: | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| reCaptchaKey         |      String      |             | Yes           | Your recaptcha key, get one from [here](https://www.google.com/recaptcha/intro/v3.html)                                                                                                                                                                         |
+| scriptProps          |      Object      |             | No            | You can customize the injected `script` tag with this prop. It allows you to add `async`, `defer`, `nonce` attributes to the script tag. You can also control whether the injected script will be added to the document body or head with `appendTo` attribute. |
+| language             |      String      |             | No            | optional prop to support different languages that is supported by Google Recaptcha. https://developers.google.com/recaptcha/docs/language                                                                                                                       |
+| useRecaptchaNet      |     Boolean      |       false | No            | The provider also provide the prop `useRecaptchaNet` to load script from `recaptcha.net`: https://developers.google.com/recaptcha/docs/faq#can-i-use-recaptcha-globally                                                                                         |
+| useEnterprise        |     Boolean      |       false | No            | [Enterprise option](#enterprise)                                                                                                                                                                                                                                |
+| container.element    | String HTMLElement |             | No            | Container ID where the recaptcha badge will be rendered                                                                                                                                                                                                         |
+| container.parameters |      Object      |             | No            | Configuration for the inline badge (See google recaptcha docs)                                                                                                                                                                                                  |
 
 ```javascript
 import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
@@ -64,6 +66,13 @@ ReactDom.render(
       appendTo: 'head', // optional, default to "head", can be "head" or "body",
       nonce: undefined // optional, default undefined
     }}
+    container={{ // optional to render inside custom element
+      element: "[required_id_or_htmlelement]",
+      parameters: {
+        badge: '[inline|bottomright|bottomleft]', // optional, default undefined
+        theme: 'dark', // optional, default undefined
+      }
+    }}
   >
     <YourApp />
   </GoogleReCaptchaProvider>,
@@ -75,7 +84,7 @@ There are three ways to trigger the recaptcha validation: using the `GoogleReCap
 
 #### GoogleReCaptcha
 
-`GoogleRecaptcha` is a react component that can be used in your app to trigger the validation. It provides a prop `onVerify`, which will be called once the verify is done successfully.
+`GoogleRecaptcha` is a react component that can be used in your app to trigger the validation. It provides a prop `onVerify`, which will be called once the verify is done successfully, also supports a prop `refreshReCaptcha` which supports any type of value and is used to force recaptcha to revalidate (you can use a timestamp updated after every submit), there is an example below.
 
 ```javascript
 import {
@@ -113,6 +122,36 @@ const MyComponent: FC = () => {
 };
 ```
 
+```javascript
+// Example of refreshReCaptcha option:
+
+const MyComponent: FC = () => {
+  const [token, setToken] = useState();
+  const [refreshReCaptcha, setRefreshReCaptcha] = useState(false);
+
+  const onVerify = useCallback((token) => {
+    setToken(token);
+  });
+
+  const doSomething = () => {
+    /* do something like submit a form and then refresh recaptcha */
+    setRefreshReCaptcha(r => !r);
+  }
+
+  return (
+    <div>
+      <GoogleReCaptcha
+        onVerify={onVerify}
+        refreshReCaptcha={refreshReCaptcha}
+      />
+      <button onClick={doSomething}>
+        Do Something
+      </button>
+    </div>
+  );
+};
+```
+
 #### React Hook: useGoogleReCaptcha (recommended approach)
 
 If you prefer a React Hook approach over the old good Higher Order Component, you can choose to use the custom hook `useGoogleReCaptcha` over the HOC `withGoogleReCaptcha`.

example/index.tsx

@@ -7,7 +7,7 @@ import { WithGoogleRecaptchaExample } from './with-google-recaptcha-example';
 ReactDom.render(
   <GoogleReCaptchaProvider
     useRecaptchaNet
-    reCaptchaKey={process.env.RECAPTCHA_KEY}
+    reCaptchaKey={process.env.RECAPTCHA_KEY as string}
     scriptProps={{ async: true, defer: true, appendTo: 'body' }}
   >
     <h2>Google Recaptcha Example</h2>

src/google-recaptcha-provider.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-import {
-  useMemo,
-  useState,
-  useEffect,
-  useCallback,
+import React, {
   createContext,
-  ReactNode
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
 } from 'react';
 import {
   cleanGoogleRecaptcha,
@@ -18,7 +18,7 @@ enum GoogleRecaptchaError {
 }
 
 interface IGoogleReCaptchaProviderProps {
-  reCaptchaKey?: string;
+  reCaptchaKey: string;
   language?: string;
   useRecaptchaNet?: boolean;
   useEnterprise?: boolean;
@@ -28,12 +28,25 @@ interface IGoogleReCaptchaProviderProps {
     async?: boolean;
     appendTo?: 'head' | 'body';
     id?: string;
+    onLoadCallbackName?: string;
+  };
+  container?: {
+    element: string | HTMLElement;
+    parameters: {
+      badge?: 'inline' | 'bottomleft' | 'bottomright';
+      theme?: 'dark' | 'light';
+      tabindex?: number;
+      callback?: () => void;
+      expiredCallback?: () => void;
+      errorCallback?: () => void;
+    }
   };
   children: ReactNode;
 }
 
 export interface IGoogleReCaptchaConsumerProps {
   executeRecaptcha?: (action?: string) => Promise<string>;
+  container?: string | HTMLElement;
 }
 
 const GoogleReCaptchaContext = createContext<IGoogleReCaptchaConsumerProps>({
@@ -53,13 +66,16 @@ export function GoogleReCaptchaProvider({
   useRecaptchaNet = false,
   scriptProps,
   language,
+  container,
   children
 }: IGoogleReCaptchaProviderProps) {
   const [greCaptchaInstance, setGreCaptchaInstance] = useState<null | {
     execute: Function;
   }>(null);
+  const clientId = useRef<number | string>(reCaptchaKey);
 
   const scriptPropsJson = JSON.stringify(scriptProps);
+  const parametersJson = JSON.stringify(container?.parameters);
 
   useEffect(() => {
     if (!reCaptchaKey) {
@@ -71,6 +87,22 @@ export function GoogleReCaptchaProvider({
     }
 
     const scriptId = scriptProps?.id || 'google-recaptcha-v3';
+    const onLoadCallbackName = scriptProps?.onLoadCallbackName || 'onRecaptchaLoadCallback';
+
+    ((window as unknown) as {[key: string]: () => void})[onLoadCallbackName] = () => {
+      /* eslint-disable @typescript-eslint/no-explicit-any */
+      const grecaptcha = useEnterprise
+        ? (window as any).grecaptcha.enterprise
+        : (window as any).grecaptcha;
+
+      const params = {
+        badge: 'inline',
+        size: 'invisible',
+        sitekey: reCaptchaKey,
+        ...(container?.parameters || {})
+      };
+      clientId.current = grecaptcha.render(container?.element, params);
+    };
 
     const onLoad = () => {
       if (!window || !(window as any).grecaptcha) {
@@ -95,7 +127,8 @@ export function GoogleReCaptchaProvider({
     };
 
     injectGoogleReCaptchaScript({
-      reCaptchaKey,
+      render: container?.element ? 'explicit' : reCaptchaKey,
+      onLoadCallbackName,
       useEnterprise,
       useRecaptchaNet,
       scriptProps,
@@ -105,30 +138,37 @@ export function GoogleReCaptchaProvider({
     });
 
     return () => {
-      cleanGoogleRecaptcha(scriptId);
+      cleanGoogleRecaptcha(scriptId, container?.element);
     };
-  }, [useEnterprise, useRecaptchaNet, scriptPropsJson, language, reCaptchaKey]);
+  }, [
+    useEnterprise,
+    useRecaptchaNet,
+    scriptPropsJson,
+    parametersJson,
+    language,
+    reCaptchaKey,
+    container?.element,
+  ]);
 
   const executeRecaptcha = useCallback(
-    async (action?: string) => {
+    (action?: string) => {
       if (!greCaptchaInstance || !greCaptchaInstance.execute) {
         throw new Error(
           '<GoogleReCaptchaProvider /> Google Recaptcha has not been loaded'
         );
       }
 
-      const result = await greCaptchaInstance.execute(reCaptchaKey, { action });
-
-      return result;
+      return greCaptchaInstance.execute(clientId.current, { action });
     },
-    [greCaptchaInstance]
+    [greCaptchaInstance, clientId]
   );
 
   const googleReCaptchaContextValue = useMemo(
     () => ({
-      executeRecaptcha: greCaptchaInstance ? executeRecaptcha : undefined
+      executeRecaptcha: greCaptchaInstance ? executeRecaptcha : undefined,
+      container: container?.element,
     }),
-    [executeRecaptcha, greCaptchaInstance]
+    [executeRecaptcha, greCaptchaInstance, container?.element]
   );
 
   return (

src/google-recaptcha.tsx

@@ -1,13 +1,18 @@
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useGoogleReCaptcha } from './use-google-recaptcha';
 import { logWarningMessage } from './utils';
 
 export interface IGoogleRecaptchaProps {
   onVerify: (token: string) => void | Promise<void>;
   action?: string;
+  refreshReCaptcha?: boolean | string | number | null;
 }
 
-export function GoogleReCaptcha({ action, onVerify }: IGoogleRecaptchaProps) {
+export function GoogleReCaptcha({
+  action,
+  onVerify,
+  refreshReCaptcha,
+}: IGoogleRecaptchaProps) {
   const googleRecaptchaContextValue = useGoogleReCaptcha();
 
   useEffect(() => {
@@ -30,7 +35,13 @@ export function GoogleReCaptcha({ action, onVerify }: IGoogleRecaptchaProps) {
     };
 
     handleExecuteRecaptcha();
-  }, [action, onVerify, googleRecaptchaContextValue]);
+  }, [action, onVerify, refreshReCaptcha, googleRecaptchaContextValue]);
+
+  const { container } = googleRecaptchaContextValue;
+
+  if (typeof container === 'string') {
+    return <div id={container} />;
+  }
 
   return null;
 }

src/utils.ts

@@ -1,5 +1,6 @@
-interface InjectGoogleReCaptchaScriptParams {
-  reCaptchaKey: string;
+interface IInjectGoogleReCaptchaScriptParams {
+  render: string;
+  onLoadCallbackName: string;
   useRecaptchaNet: boolean;
   useEnterprise: boolean;
   onLoad: () => void;
@@ -38,7 +39,7 @@ const generateGoogleRecaptchaSrc = ({
  */
 const cleanGstaticRecaptchaScript = () => {
   const script = document.querySelector(
-    `script[src^='https://www.gstatic.com/recaptcha/releases']`
+    'script[src^="https://www.gstatic.com/recaptcha/releases"]'
   );
 
   if (script) {
@@ -56,16 +57,63 @@ export const isScriptInjected = (scriptId: string) =>
   !!document.querySelector(`#${scriptId}`);
 
 /**
- * Function to clean google recaptcha script
+ * Function to remove default badge
  *
- * @param scriptId
+ * @returns
  */
-export const cleanGoogleRecaptcha = (scriptId: string) => {
-  // remove badge
+const removeDefaultBadge = () => {
   const nodeBadge = document.querySelector('.grecaptcha-badge');
   if (nodeBadge && nodeBadge.parentNode) {
     document.body.removeChild(nodeBadge.parentNode);
   }
+};
+
+/**
+ * Function to clear custom badge
+ *
+ * @returns
+ */
+const cleanCustomBadge = (customBadge: HTMLElement | null) => {
+  if (!customBadge) {
+    return;
+  }
+
+  while (customBadge.lastChild) {
+    customBadge.lastChild.remove();
+  }
+};
+
+/**
+ * Function to clean node of badge element
+ *
+ * @param container
+ * @returns
+ */
+export const cleanBadge = (container?: HTMLElement | string) => {
+  if (!container) {
+    removeDefaultBadge();
+
+    return;
+  }
+
+  const customBadge = typeof container === 'string' ? document.getElementById(container) : container;
+
+  cleanCustomBadge(customBadge);
+};
+
+/**
+ * Function to clean google recaptcha script
+ *
+ * @param scriptId
+ * @param container
+ */
+export const cleanGoogleRecaptcha = (scriptId: string, container?: HTMLElement | string) => {
+  // remove badge
+  cleanBadge(container);
+
+  // remove old config from window
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  (window as any).___grecaptcha_cfg = undefined;
 
   // remove script
   const script = document.querySelector(`#${scriptId}`);
@@ -83,7 +131,8 @@ export const cleanGoogleRecaptcha = (scriptId: string) => {
  * @returns
  */
 export const injectGoogleReCaptchaScript = ({
-  reCaptchaKey,
+  render,
+  onLoadCallbackName,
   language,
   onLoad,
   useRecaptchaNet,
@@ -93,9 +142,9 @@ export const injectGoogleReCaptchaScript = ({
     defer = false,
     async = false,
     id = '',
-    appendTo = undefined
+    appendTo
   } = {}
-}: InjectGoogleReCaptchaScriptParams) => {
+}: IInjectGoogleReCaptchaScriptParams) => {
   const scriptId = id || 'google-recaptcha-v3';
 
   // Script has already been injected, just call onLoad and does othing else
@@ -114,7 +163,9 @@ export const injectGoogleReCaptchaScript = ({
   });
   const js = document.createElement('script');
   js.id = scriptId;
-  js.src = `${googleRecaptchaSrc}?render=${reCaptchaKey}${
+  js.src = `${googleRecaptchaSrc}?render=${render}${
+    render === 'explicit' ? `&onload=${onLoadCallbackName}` : ''
+  }${
     language ? `&hl=${language}` : ''
   }`;