sveltekit-hcaptcha

hCaptcha component for Svelte

Inspired by https://github.com/rodneylab/sveltekit-hcaptcha-form - Thank you, it really helped a lot!

About

A simple component to use hCaptcha in your Svelte powered app. Tested with SvelteKit but I see no reason why it shouldn't work with plain Svelte with some minor modifications mainly around the use of $app/env.

If you were able to get this working with plain Svelte, please let me know!

Usage

Client Side

Hcaptcha.svelte

<script>
    import { onMount, onDestroy } from 'svelte'
    import { browser } from '$app/env'

    let hcaptcha
    let hcaptchaWidgetID


    export let token = null
    // forces 1-way binding
    let captchaToken
    $: token = captchaToken

    export let isValid = false
    // forces 1-way binding
    let captchaValid
    $: isValid = captchaValid

    onMount(() => {
        setTimeout(function () {
            if (browser) {
                hcaptcha = window.hcaptcha
                if (hcaptcha.render) {
                    hcaptchaWidgetID = hcaptcha.render('hcaptcha', {
                        sitekey: import.meta.env.VITE_CAPTCHA_KEY,
                        size: 'normal',
                        callback: onValidCaptcha,
                        'error-callback': onErrorCaptcha,
                        theme: 'dark'
                    })
                }
            }
        }, 500)
    })
    onDestroy(() => {
        if (browser) {
            hcaptcha = null
        }
    })


    function onValidCaptcha(e) {
        //console.log('verified event', e)
        captchaToken = e
        captchaValid = true
    }

    function onErrorCaptcha(e) {
        //console.log('error event', {error: e.error})
        captchaToken = null
        captchaValid = false
        hcaptcha.reset(hcaptchaWidgetID)
    }
</script>


<svelte:head>
    <script src='https://js.hcaptcha.com/1/api.js?render=explicit' async defer></script>
</svelte:head>

<div id='hcaptcha' class='h-captcha border-0'/>

Import the component into your page:

import Hcaptcha from './Hcaptcha.svelte'

Set local variables that will be bound to the component:

let captchaValid = false // use this to check frontend validity
let captchaToken  // generated token will be stored here - send this to hCaptcha's validator via POST in your onSubmit method for your form

Add the component to your markup:

<Hcaptcha bind:token={captchaToken} bind:isValid={captchaValid} />

Backend example

export async function post({request}) {
    const data = await request.json()
    const postData = data.formData


    try {
        const captchaToken = postData.captchaToken

        // validate captcha

        const captchaData = {'secret': process.env.CAPTCHA_SECRET, 'response': captchaToken}
        const searchParams = new URLSearchParams(captchaData)
        const submit = await fetch(process.env.CAPTCHA_VERIFY_URL, {
            method: 'POST',
            body: searchParams
        })
        const captchaResults = await submit.json()
        if (!captchaResults.success) {
            throw new Error("Robot check failed. Please try again.")
        }
        
        // do stuff with submitted form data
        
        return {
            body: {status: "success"}
        }
    } catch (e) {
        console.error("error: ", e)
        console.error(e.message)
        if (e.response) {
            console.error(e.response.body)
        }
        return {
            status: 400,
            body: {status: "error", msg: e.message}
        }
    }

}