Integrate ReCaptcha v3 / v2 with SvelteKit Superforms

[itaibaruch]

Hi team,

Thank you for a great package.

I have tried to integrate ReCaptcha with your package, but I don't know what is the best way to implement it. can you provide example on the site or in the repo.

Thanks.

[dookanooka]

I've been trying to do this as well. The problem i'm having is getting the token on the client and sending it to an action on the server.

I tried using onSubmit with an async..await to get the ReCaptcha token on the client, add it to formData and submit but that didn't work.

I went outside use:enhance with a function call via on:submit|preventDefault={onFormSubmit} but it gets executed too late for the server action to get the token to query Google.

I need the server action to hold off until the client side function call has completed. I thought simple enough, but proving tricky with Superforms in the mix.

[dookanooka]

Had this working quite shortly after my last post as below, getting into the swing of Superforms, it's a very nice package :)

I say yes to 'browser error' from Google, not a good idea but hey, it's generally just a guide.

I added localhost to the approved domains on the Google side for development.

+page.svelte

	const { form, errors, enhance } = superForm(data.form, {
		onSubmit(cancel) {
			onFormSubmit(cancel)
		},
	})

	/** @param {{ currentTarget: EventTarget & HTMLFormElement}} event */
	const onFormSubmit = async ({ cancel }) => {
		const formStatus = await superValidate($form, zod(lostPasswordSchema))

		if (!formStatus.valid) {
			cancel()
			return fail(400, {
				formStatus,
			})
		} else {
			try {
				state = State.requesting
				await window.grecaptcha.ready(async function () {
					const token = await window.grecaptcha
						.execute(PUBLIC_RECAPTCHA_SITE_KEY, {
							action: 'submit',
						})
						.then(async function (t) {
							$form.recaptchaToken = t
							const response = await fetch('/api/lostPassword', {
								method: 'POST',
								body: JSON.stringify($form),
								headers: {
									'content-type': 'application/json',
								},
							})
							/** @type {import('@sveltejs/kit').ActionResult} */
							const result = deserialize(await response.text())
							if (result.type == 'success') {
								// Do stuff if its good
							} else {
								toastStore.trigger(errEmail)
							}
							return result
						})
				})
			} catch (error) {
				console.log(`ERROR: ${error}`)
				toastStore.trigger(errEmail)
			}
		}
	}

<form method="POST" class="mt-8 space-y-8" use:enhance>

/api/lostpassword/+server.ts

import { actionResult } from 'sveltekit-superforms';
import { SECRET_RECAPTCHA_KEY } from '$env/static/private';

/**
 * This function is used to verify the reCAPTCHA token received from the client.
 * It sends a POST request to Google's reCAPTCHA API and checks the response.
 * 
 * @async
 * @param {Object} event - The event object containing the client's request.
 * @param {Object} event.request - The client's request.
 * @param {Function} event.getClientAddress - Function to get the client's IP address.
 * 
 * @returns {Promise<Object>} Returns an object with the result of the operation. 
 * If the reCAPTCHA token is successfully verified, it returns an object with a success message. 
 * If the verification fails, it returns an object with an error message.
 * 
 * @throws {Error} If the hostname is 'localhost' and the environment is not development, 
 * an error is thrown indicating that the operation is not permitted.
 */
export async function POST(event) {
    const clientIp = event.getClientAddress();
    const data = await event.request.json()
    const isDev = process.env.NODE_ENV === 'development';

    /* Google verify recaptcha */
    const postData = new URLSearchParams();
    postData.append('secret', SECRET_RECAPTCHA_KEY);
    postData.append('response', data.recaptchaToken);
    postData.append('remoteip', clientIp);
    // Make the request
    const response = await fetch('https://www.google.com/recaptcha/api/siteverify', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: postData
    });
    const captchaData = await response.json();
    if (captchaData.hostname === 'localhost' && !isDev) {
        return actionResult('failure', { error: 'Operation not permitted for localhost in production' });
    }
    else if (captchaData.success && captchaData.score > 0.6 && captchaData.action === 'submit') {
        return actionResult('success', { text: `Good score returned from Google` });
    } else if (captchaData["error-codes"][0] == "browser-error") {
        return actionResult('success', { text: `Google returned browser-error` });
    } else {
        return actionResult('failure', { error: `Failed to verify the token` });
    }
}

[itaibaruch]

I solve it the following way:

$lib/helpers/recaptcha.ts

import { PUBLIC_GOOGLE_RECAPTCHA_SITE_KEY } from '$env/static/public';

export async function validateReCaptchaServer(
	token: string,
	fetch: typeof window.fetch,
	secret: string
) {
	const res = await fetch('https://www.google.com/recaptcha/api/siteverify', {
		method: 'POST',
		headers: {
			'content-type': 'application/x-www-form-urlencoded',
		},
		body: `secret=${secret}&response=${token}`,
	});
	const json = await res.json();

	return json;
}

export async function createReCaptchaClient(
	formToken: string | undefined,
	grecaptcha: ReCaptchaV2.ReCaptcha
) {
	return new Promise((resolve) => {
		if (formToken) {
			resolve(formToken);
		} else {
			return grecaptcha.ready(function () {
				grecaptcha.execute(PUBLIC_GOOGLE_RECAPTCHA_SITE_KEY, { action: 'submit' }).then(function (
					token: string
				) {
					resolve(token);
				});
			});
		}
	});
}

+page.svelte

<script lang="ts">
        import { createReCaptchaClient } from '$lib/helpers/recaptcha';
	const { form, errors, constraints, enhance, message } = superForm(data.contactForm, {
		// Reset the form upon a successful result
		resetForm: true,
		onSubmit: async ({ formData }) => {
			const token = await createReCaptchaClient($form.token, window.grecaptcha);
			formData.append('token', String(token));
		},
	});
</script>

<svelte:head>
	<script
		src="https://www.google.com/recaptcha/api.js?render={PUBLIC_GOOGLE_RECAPTCHA_SITE_KEY}"
		async
		defer
	></script>
</svelte:head>

<form method="POST" action="?/contact" use:enhance>
.....form

+page.server.ts

import { validateReCaptchaServer } from '$src/lib/helpers/recaptcha';

export const actions: Actions = {
	contact: async (event) => {
		const { request, fetch } = event;
		const form = await superValidate(request, contactSchema);

		if (!form.valid) {
			return fail(400, { form });
		}

		// reCAPTCHA
		const gToken = form.data.token;
		if (!gToken) {
			return message(form, 'Invalid reCAPTCHA', { status: 400 });
		}
		const res = await validateReCaptchaServer(gToken, fetch, GOOGLE_RECAPTCHA_SECRET_KEY);
		if (!res.success) {
			return message(form, 'Failed ReCaptcha', { status: 400 });
		}
....

Hope it helps