• Installation
• Usage
  • Examples
  • 🦜 useTurnstile() hook
  • ✅ verifyTurnstile()
  • 🔁 resetTurnstile()
• Contributing
• Code Of Conduct
• Contributors
• Related Links
• License

Installation

pnpm add qwik-turnstile

Usage

🦜 useTurnstile() hook

Add 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,
            onTokenResponse$: $((response) => {
                // set the value of an input field
            }),
        }
    );

});

✅ verifyTurnstile()

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);
    
    // you can also call `verifyTurnstile(token, secret, {debug: true})`
    // if `debug` is set to `true` it will log the response from turnstile to the console

    if (!verified) {
      console.error("Turnstile Verification Error");
      return {
        success: false
      }
    }

});
  

🔁 resetTurnstile()

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();

  });

});
  

Contributing

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 🙏

Code Of Conduct

Be kind to each other and please read our code of conduct.

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Related Links

• Qwik Docs
• Cloudflare Turnstile Docs
• Qwik UI
• Qwik Discord

License

MIT