Google Recaptcha V3 integration for React
React library for integrating Google ReCaptcha V3 to your App.
npm install react-google-recaptcha-v3
To use
react-google-recaptcha-v3, you need to create a recaptcha key for your domain, you can get one from here.
When you enable to use the enterprise version, you must create new keys. These keys will replace any Site Keys you created in reCAPTCHA. Check the migration guide.
To work properly, you must select the Integration type to be
Scoringsince is equivalent to the reCAPTCHA v3.
The complete documentation to the enterprise version you can see here.
react-google-recaptcha-v3provides a
GoogleReCaptchaProviderprovider component that should be used to wrap around your components.
GoogleReCaptchaProvider's responsibility is to load the necessary reCaptcha script and provide access to reCaptcha to the rest of your application.
You can customize the injected
scripttag with the
scriptPropsprop. This prop allows you to add
async,
defer,
nonceattributes to the script tag. You can also control whether the injected script will be added to the document body or head with
appendToattribute. Example can be found belows. The
scriptPropsand its attributes are all optional.
It also provides an optional prop
languageto support different languages that is supported by Google Recaptcha. https://developers.google.com/recaptcha/docs/language
The provider also provide the prop
useRecaptchaNetto load script from
recaptcha.net: https://developers.google.com/recaptcha/docs/faq#can-i-use-recaptcha-globally
import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';ReactDom.render( , document.getElementById('app') );
There are three ways to trigger the recaptcha validation: using the
GoogleReCaptchacomponent, wrapping your component with the HOC
withGoogleReCaptcha, or using the custom hook
useGoogleReCaptcha.
GoogleRecaptchais 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.
import { GoogleReCaptchaProvider, GoogleReCaptcha } from 'react-google-recaptcha-v3';ReactDom.render( , document.getElementById('app') );
// IMPORTANT NOTES: TheGoogleReCaptcha
component is a wrapper arounduseGoogleRecaptcha
hook and useuseEffect
to run the verification. // It's important that you understand how React hooks work to use it properly. // Avoid using inline function for theonVerify
props as it can possibly cause the verify function to run continously. // To avoid that problem, you can use a memoized function provided byReact.useCallback
or a class method // The code below is an example that inline function can result in an infinite loop and the verify function runs continously:const MyComponent: FC = () => { const [token, setToken] = useState();
return (
{ setToken(token); }} />); };
GoogleRecaptchais a HOC (higher order component) that can be used to integrate reCaptcha validation with your component and trigger the validation programmatically. It inject the wrapped component with
googleReCaptchaPropsobject.
The object contains the
executeRecaptchafunction that can be called to validate the user action.
import { GoogleReCaptchaProvider, withGoogleReCaptcha } from 'react-google-recaptcha-v3';class ReCaptchaComponent extends React.Component { async componentDidMount() { const token = await this.props.googleReCaptchaProps.executeRecaptcha('homepage'); }
render() { ... } }
const YourReCaptchaComponent = withGoogleReCaptcha(ReCaptchaComponent);
ReactDom.render( , document.getElementById('app') );
If you prefer a React Hook approach over the old good Higher Order Component, you can choose to use the custom hook
useGoogleReCaptchaover the HOC
withGoogleReCaptcha.
It's very simple to use the hook:
import { GoogleReCaptchaProvider, useGoogleReCaptcha } from 'react-google-recaptcha-v3';const YourReCaptchaComponent = () => { const { executeRecaptcha } = useGoogleReCaptcha(); const token = executeRecaptcha("login_page");
return (...) }
ReactDom.render( , document.getElementById('app') );
An example of how to use these two hooks can found inside the
examplefolder. You will need to provide an .env file if you want to run it on your own machine.
RECAPTCHA_KEY=[YOUR_RECAPTCHA_KEY]