Setting & using a third-party captcha component in React: accessing a component’s method
Captcha has become very important in today’s reality, considering the huge amount of robots trying to get information as a very lucrative resource. It may be said that using a captcha is not a solution 100% secure; but it is one of the things that are recommended to face this phenomenon. It is the sum-up of security techniques what makes a website secure.
In this article I am going to exemplify how to use a third-party captcha component of React and how to use their methods. Specifically, a method for refreshing a captcha.
Full code can be found here.
Why using a server-side third-party captcha
Using a server-side third-party captcha may have many advantages, but there are two important for me; first, it is possible to choose a very solid solution even for free. Secondly, the security guaranteed by a riddle generated and verified outside of client.
When a captcha is created for running in client (inside the browser), the solution, most of the time, is also in the code of the page loaded by client, and in theory any robot could read it. Considering this, having a captcha formulated and solved outside the client is a very robust solution.
In this case, I propose to use hCaptcha. It is free and easy to use. For using this resource, it is necessary a site key; for this, just refer to its documentation. Regarding installation and use as a React component, it enough to run the following command.
npm install @hcaptcha/react-hcaptcha --saveCreating the parent component
Usually captcha is placed inside a form or as a second step that needs to succeed in order to submit data. In this case, parent component will be the component in charge of render the captcha, receive the success of the captcha challenge and refresh it. In this example, parent will call a method of the captcha component to refresh it.
Parent component will include two children, the captcha and the button to refresh the captcha. As it was pointed out, the captcha will be the third-party component HCaptcha.
For accomplishing the main purpose of example, parent must define two methods; the first is for handling the response of HCaptcha once it verifies the right resolution of challenge. If challenge is successfully resolved, an alert will be shown.
The second method that parent must define in this example is the handle that will refresh the captcha, which will be called when button is clicked. React component HCaptcha makes public a method for refreshing the captcha (resetCaptcha, as shown below), accessing methods of React components requires extra coding and it will be explained bellow. But until now, imagine that in “this.hcaptcha” is already stored the reference to HCaptcha component, considering that, you access the instance by accessing the property “current”, then you can call on that instance the method resetCaptcha made public by component.
In order to get the reference to the instance of a component in React, parent needs to declare a variable for storing that reference, with that purpose in constructor must be initialized an attribute (hcaptcha) using React.createRef().
Then, the HCaptcha instance is assigned to the attribute initialized in constructor by sending such attribute as a ref property (ref = {this.hcaptcha}) to the HCaptcha. When component is mounted you can access the component methods through this.hcaptcha as explained before in method refreshCaptcha.
As it is shown in previous render method, HCaptcha also receives as properties the site key and the method for handling de success of challenge resolution. If client has success solving the challenge, handleVerification will be called.
Final considerations
In this example, I explained how to use a third-party captcha and use a method of a component. Despite React team recommends this must be done in very specific situations, in cases like this, it may me a must. Accessing the reference of a component is not trivial and specific solutions of React must be used.
