Google Recaptcha V3 ES Module feat Netlify and Axios

grecatpcha.js

// .env
// CAPTCHA_SITE='...'
// CAPTCHA_SECRET='...'

import axios from 'axios'


// https://github.com/dlqs/serverless-captcha/blob/master/functions/captcha.js
export const scriptUrl = `https://www.google.com/recaptcha/api.js?render=${process.env.CAPTCHA_SITE}&onload=onRecaptchaLoadCallback`

export const captchaFunctionUrl = '/.netlify/functions/captcha'

const recaptchaReady = () => new Promise( function ( resolve ) {
    window.grecaptcha.ready(resolve)
})

const recaptchaGetToken = () => new Promise( function ( resolve ) {
    recaptchaReady().then(() => {
        window.grecaptcha.execute(process.env.CAPTCHA_SITE)
            .then(token => {
                resolve(token)
            })
    })
})


export const recaptchaSubmit = async function () {

    // If the recaptcha isn't loaded yet
    if (typeof window.grecaptcha !== 'function') {
        // Load the recaptcha
        await recaptchaInit()
    }

    console.log('Asking for Recaptcha Token')

    // Get a responseToken from google
    const responseToken = await recaptchaGetToken()

    console.log('Acquired Response Token')

    console.log('Checking token with Google')

    // Check the response token is valid
    const { status } = await axios.get(captchaFunctionUrl, {
        params: {
            rt: responseToken
        }
    })

    console.log('Captcha Status', status)

    return status === 200
}

const recaptchaLoad = () => new Promise( function ( resolve ) {

    function loadRecaptchaScript () {
        // https://stackoverflow.com/questions/50583284/how-do-you-set-the-badge-position-with-recaptcha-v3/53620039#53620039
        window.onRecaptchaLoadCallback = () => {
            window.dispatchEvent((new Event('recaptchaloaded')))

            resolve()
        }

        var e = document.getElementsByTagName("script")[0],
            n = document.createElement("script");

        n.type = "text/javascript"
        n.async = !0
        n.src = scriptUrl
        e.parentNode.insertBefore(n, e)

        console.log('loadRecaptchaScript triggered')
    }


    // if (setupRecaptcha() && "complete" === document.readyState) return loadRecaptchaScript();
    if ("complete" === document.readyState) return loadRecaptchaScript()

    window.attachEvent ? window.attachEvent("onload", loadRecaptchaScript) : window.addEventListener("load", loadRecaptchaScript, !1)
})

const recaptchaInit = async function () {
    await recaptchaLoad()
    console.log('Recaptcha Loaded')

    // window.grecaptcha('init', process.env.HELPSCOUT_BEACON_ID)
}

export default recaptchaInit