xhofe / solid-turnstile

🔐 A very simple Solid library for Cloudflare Turnstile.

solid-turnstile

🔐 A very simple Solid library for Cloudflare Turnstile. Inspired by react-turnstile

Installation

pnpm add solid-turnstile

Demo

https://xhofe.github.io/solid-turnstile/

Usage

import Turnstile from "solid-turnstile";

function TurnstileWidget() {
  return (
    <Turnstile
      sitekey="1x00000000000000000000AA"
      onVerify={(token) => alert(token)}
    />
  );
}

Documentation

Turnstile takes the following arguments:

name	type	description
sitekey	string	sitekey of your website (REQUIRED)
action	string	-
cData	string	-
theme	string	one of "light", "dark", "auto"
tabIndex	number	-
responseField	boolean	controls generation of <input /> element *
responseFieldName	string	changes the name of <input /> element *

Add others props to <div /> element.

And the following callbacks:

name	arguments	description
onVerify	token	called when challenge is passed (REQUIRED)
onLoad	-	called when the widget is loaded
onError	error	called when an error occurs
onExpire	-	called when the challenge expires **

* responseField and responseFieldName are experimental and not yet documented.

** onExpire is called when the Turnstile challenge expires without creating a token.

For more details on what each argument does, see the Cloudflare Documentation.

solid-turnstile's Issues

u.template is not a function

Hi,

I get his error:

u.template is not a function
File:
    /.../node_modules/solid-turnstile/dist/solid-turnstile.cjs:1:72
Code:
    > 1 | "use strict";const u=require("solid-js/web"),c=require("solid-js"),m=u.template("<div></div>",2),f=globalThis??window;let o=typeof f.turnstile<"u"?"ready":"unloaded",p;{const s="cf__reactTurnstileOnLoad",n="https://challenges.cloudflare.com/turnstile/v0/api.js";let e;const l=new Promise((r,t)=>{e={resolve:r,reject:t},o==="ready"&&r(void 0)});f[s]=()=>{e.resolve(),o="ready"},p=()=>{if(o==="unloaded"){o="loading";const r=`${n}?onload=${s}&render=explicit`,t=document.createElement("script");t.src=r,t.async=!0,t.addEventListener("error",()=>{e.reject("Failed to load Turnstile.")}),document.head.appendChild(t)}return l}}function y(s){let n;const[e,l]=c.splitProps(s,["sitekey","action","cData","theme","tabIndex","responseField","responseFieldName","onVerify","onError","onLoad","onExpire"]);return c.createEffect(r=>{if(r?.(),Object.keys(e).forEach(a=>{e[a]}),!n)return;let t=!1,i="";return(async()=>{if(o!=="ready")try{await p()}catch(d){e.onError?.(d);return}if(t||!n)return;const a={sitekey:e.sitekey,action:e.action,cData:e.cData,theme:e.theme,tabindex:e.tabIndex,callback:d=>e.onVerify(d),"error-callback":()=>e.onError?.(),"expired-callback":()=>e.onExpire?.(),"response-field":e.responseField,"response-field-name":e.responseFieldName};i=window.turnstile.render(n,a),e.onLoad?.(i)})(),()=>{t=!0,i&&window.turnstile.remove(i)}}),(()=>{const r=m.cloneNode(!0),t=n;return typeof t=="function"?t(r):n=r,u.spread(r,l,!1,!1),r})()}module.exports=y;

Any ideas how to fix this?