Captcha in forms #2716
Replies: 2 comments 1 reply
-
|
Hi @timotius02 , |
Beta Was this translation helpful? Give feedback.
-
|
I was just asking if there were any example projects out there using captchas with Remix. I remember that their suggestion there didn't work for me. I ended loading my keys up in a loader and passing to the component via useLoaderData but that felt really bad since the rest of the page was basically static and didn't need that overhead. |
Beta Was this translation helpful? Give feedback.
-
|
I recently integrated recaptcha enterprise checkbox on one of my forms. Here is what I did. in root.tsx file under <script src={`https://www.google.com/recaptcha/enterprise.js?render=explicit`}></script>and in your form component const MyForm = () => {
const grecaptchaRef = useRef();
useEffect(() => {
(window as any)?.grecaptcha?.enterprise?.ready?.(() => {
(window as any)?.grecaptcha?.enterprise?.render?.(grecaptchaRef.current, {
sitekey: (window as any)?.ENV?.RECAPTCHA_SITE_KEY,
action: 'submit',
});
});
}, []);
return (
<Form action="post" replace>
{... other form fields}
<div ref={gcaptchaRef}/>
<button type="submit">submit</button>
</Form>
);
}and then on submitting the form, you should have I followed this to add client side environment variables. hope this helps. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Does anyone have any examples of using Captcha in Remix Forms? Was trying to work with the react-google-recaptcha component but I was having issues getting my site key to render correctly.
Beta Was this translation helpful? Give feedback.
All reactions