pnpm add qwik-turnstileAdd this hook to your Qwik component or route.
This function returns a Turnstile component and a tokenSignal signal but also allows you to configure a callback.
import { useTurnstile } from 'qwik-turnstile';
export default component$(() => {
const { Turnstile, tokenSignal } = useTurnstile(
{
siteKey: import.meta.env.VITE_TURNSTILE_SITEKEY,
onResponse$: $((response) => {
// set the value of an input field
}),
}
);
});This function is used to verify the token and returns a promise with the response.
import { verifyTurnstile } from 'qwik-turnstile';
export const useFormAction = routeAction$(async (values, requestEvent) => {
const token = values.turnstileToken;
const secret = requestEvent.env.get("TURNSTILE_SECRET");
const verified = await verifyTurnstile(token, secret);
if (!verified) {
console.error("Turnstile Verification Error");
return {
success: false
}
}
});
This function is used to reset the Turnstile element on the browser / client.
Good when you want to allow multiple form submissions and reset the form each time.
import { resetTurnstile } from 'qwik-turnstile';
export default component$(() => {
useTask$(function resetTurnstileElement({ track }) {
const response = track(() => action.response);
if (!response.status || response.status !== "success") {
return;
}
if (isServer) {
return;
}
resetTurnstile();
});
});
Want to contribute? Yayy! 🎉
Please read and follow our Contributing Guidelines to learn what are the right steps to take before contributing your time, effort and code.
Thanks 🙏
Be kind to each other and please read our code of conduct.
Thanks goes to these wonderful people (emoji key):
 Shai Reznik 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT