Skip to content

qwikifiers/qwik-turnstile

Repository files navigation

Qwik Turnstile

Cloudflare Turnstile

Effortless human verification for Qwik apps with Cloudflare Turnstile integration

qwik-turnstile npm MIT All Contributors

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):

Shai Reznik
Shai Reznik

πŸ’» ⚠️ πŸš‡ πŸ“– 🚧 πŸ‘€ πŸ€”

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


Related Links

License

MIT