Using ReCAPTCHA v2 invisible with nextjs
Answered
Anay-208 posted this in #help-forum
Anay-208OP
To start off I loaded this script:
Now, I couldn't understand what do I have to do to show the recaptcha popup.
<Script src={`https://www.google.com/recaptcha/api.js?render=${process.env.NEXT_PUBLIC_RECAPTCHA_SITEKEY}`} async defer />Now, I couldn't understand what do I have to do to show the recaptcha popup.
Answered by joulev
If you use typescript then add some typing by extending window:
declare global {
interface Window {
grecaptcha: {
ready: (cb: () => void) => void;
execute: (siteKey: string, props: { action: string }) => Promise<string>;
};
}
}
declare global {
interface Window {
grecaptcha: {
ready: (cb: () => void) => void;
execute: (siteKey: string, props: { action: string }) => Promise<string>;
};
}
}
9 Replies
Anay-208OP
I tried looking through the docs, but there were solutions for pure html/css only
there is this function, but its a js function and I'm not sure if it can be executed from
"use client" component@Anay-208 there is this function, but its a js function and I'm not sure if it can be executed from `"use client"` component
Yeah, run that function during a form submit event
Anay-208OP
Umm where do I import it from?
onSubmit={() => {
window.grecaptcha.ready(() => …)
}}
window.grecaptcha.ready(() => …)
}}
If you use typescript then add some typing by extending window:
declare global {
interface Window {
grecaptcha: {
ready: (cb: () => void) => void;
execute: (siteKey: string, props: { action: string }) => Promise<string>;
};
}
}
declare global {
interface Window {
grecaptcha: {
ready: (cb: () => void) => void;
execute: (siteKey: string, props: { action: string }) => Promise<string>;
};
}
}
Answer
Anay-208OP
All I have done:
- Load the script with
- add ts types
- execute the function to show recaptcha popup
- Load the script with
render param- add ts types
- execute the function to show recaptcha popup
Anay-208OP
ahh got it