DEV Community: Kevin Coto🚀💡

Using Cloudflare Turnstile with SvelteKit: A Simple Guide

Kevin Coto🚀💡 — Sun, 30 Mar 2025 15:29:59 +0000

This post explains how to integrate Cloudflare Turnstile with a SvelteKit form using use:enhance, ensuring multiple submissions work correctly.

🔹 Step 1: Validate Turnstile Tokens on the Server

To prevent spam, we must verify Turnstile tokens on the backend before accepting form submissions.

Backend (`+page.server.ts` or `+server.ts`)

import { SECRET_TURNSTILE_KEY } from '$env/static/private';

async function validateToken(token: string): Promise<boolean> {
    const response = await fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({
            secret: SECRET_TURNSTILE_KEY,
            response: token
        })
    });
    const data = await response.json();
    return data.success;
}

export const actions = {
    default: async ({ request }) => {
        const formData = await request.formData();
        const token = formData.get('cf-turnstile-response')?.toString() || '';

        if (!token || !(await validateToken(token))) {
            return { success: false, message: 'Invalid CAPTCHA' };
        }

        return { success: true, message: 'Form submitted successfully' };
    }
};

What This Does:

Extracts the Turnstile response token from formData.
Sends it to Cloudflare for verification.
Rejects the request if the token is invalid.

🔹 Step 2: Integrate Turnstile in the Svelte Frontend

Frontend (`+page.svelte`)

<script lang="ts">
    import { Turnstile } from 'svelte-turnstile';
    import { enhance } from '$app/forms';

    let showCaptcha = $state(true)

;
    let { form } = $props();

    $effect(() => {
        if (form) {
            // Hide and re-show the CAPTCHA to allow multiple submissions
            showCaptcha = false;
            setTimeout(() => (showCaptcha = true), 0);
            form = null;
        }
    });

</script>

<form method="POST" use:enhance>
    {#if showCaptcha}
        <Turnstile siteKey={import.meta.env.VITE_TURNSTILE_SITEKEY}  />
    {/if}
    <button type="submit">Submit</button>
</form>

🔹 Why `$effect(() => { showCaptcha = false; setTimeout(() => (showCaptcha = true), 0); })`?

Problem:

When using use:enhance, SvelteKit does not reload the page after form submission. However, Cloudflare Turnstile only allows a token to be used once. If you try submitting the form again without refreshing, Turnstile will reject the request.

Solution:

After a successful submission, showCaptcha = false hides the Turnstile component.
setTimeout(() => (showCaptcha = true), 0); forces a re-render, generating a new token.
This allows multiple form submissions without a full page refresh.

🎯 Summary

✅ Server-side token validation prevents spam.

✅ Frontend integration with svelte-turnstile ensures security.

✅ showCaptcha reset trick allows multiple submissions when using use:enhance.

Now your SvelteKit form is secure, user-friendly, and supports multiple submissions seamlessly! 🚀

Check out the full source code on GitHub

For more look into thekoto.dev/blog

Yeah Leetcode without Google or LLM Part 1 (35. Search Insert Position)

Kevin Coto🚀💡 — Fri, 14 Mar 2025 19:50:34 +0000

The problem is here

My Solution:

/**
 * @param {number[]} nums
 * @param {number} target
 * @return {number}
 */
var searchInsert = function(nums, target) {
    for(let i = 0; i < nums.length; i++){
        if(nums[i]==target) return i
        if (nums[i] < target && 
        (i + 1 === nums.length || target < nums[i + 1])) {
return i + 1;
}

    }
return 0
};

My path of thinking:

Place a guard in case the first element is equal to the target.
Check if the nums[i] is less than target return i(works for few cases
Check also if the the following index in the array is bigger than target so we can place target in the middle
In some cases there's not following index, check with i+1===nums.length if we are going out of bound
In default case where target is the lowest just return 0

Conclusion:

It's slow, really slow. We should be doing Binary Search something that I've used in the past yes but it doesn't come natural.

Takeaway: Study and apply Binary Search
For more look into thekoto.dev/blog

Destructuring in function parameters

Kevin Coto🚀💡 — Wed, 28 Aug 2024 03:04:44 +0000

Let's say I have a project in three.js and I need some geometries, I will hardcode an array of objects that will contain their x,y, and z, values as well as their width, height, and depth values but this array could be coming from the server or third-party APIs =>

const geometriesRaw = [
    {
      color: 0x44aa88,
      x: 0,
      y: 1,
      z: 0,
      width: 1,
      height: 1,
      depth: 1
    },
    {
      color: 0x8844aa,
      x: -2,
      y: 1,
      z: 0,
      width: 1.5,
      height: 1.5,
      depth: 1.5
    }

  ];

Then I will render them using the Array. map function =>

  const cubes = geometriesRaw.map((cube)=>{
    <mesh position={[cube.x, cube.y, cube.z]}>
        <boxGeometry args={[cube.width, cube.height, cube.depth]} /> 
        <meshPhongMaterial color={cube.color} /> 
      </mesh>
  })

In just a glance we can realize the verbosity of this code, repeating the argument cube every time.
Another red flag is the no clarity on what properties we're using from the array, for example, z is 0 in both cases and it will probably be zero in the vast majority of cases.
For our regular use case, we shouldn't expose this property to our function, this could also happen frequently with the depth property.

For that reason, the best option will be destructuring the properties coming from the array of objects as follows =>

 const cubes = geometriesRaw.map(({x,y, width, color})=>{
    <mesh position={[x, y, 0]}>
        <boxGeometry args={[width, 1, 1]} /> 
        <meshPhongMaterial color={color} /> 
      </mesh>
  })

Now we're just using x,y, width, color. This way we're implying that z, height, and depth are default properties inside our function and we don't need them from the data coming from our server or third-party

This way we're hiding properties for future devs that will interact with our cubes' constant, just showing them the ones we need from an external source and the ones we are setting as the default for better practice we can even write
const z = 0
...
inside our function to make it even clearer

For more look into thekoto.dev/blog

From software developer to waiter in Dubai

Kevin Coto🚀💡 — Wed, 28 Aug 2024 02:31:10 +0000

My Journey in Dubai

I've recently moved to Dubai, the city of luxury we all know well, but I didn't come here as a wealthy guy; I'm broke.

Background

I'm a software engineer from the Caribbean island of Cuba, a communist country with 64 years of dictatorship. As you can imagine, the average salary for engineers there ranges from $500 to $1000 per month. Some don't even earn $100; the majority, while a few can make more than $2000. I was earning $1000 to $1200 before coming here.

My savings were limited, which is a challenge in a city as expensive as Dubai. But for me, life didn't give me any other option. It was either to risk it or continue being unhappy with no bright future.

Residency Challenges

Residency in Dubai is a complicated topic. With good luck, it might be easy to get, but in reality, it's more complex. Scams, companies playing with your legal status, and the fact that being here without legal status is something you'd want to avoid make it a tough journey.

For that reason, I accepted the first job opportunity that came my way: a role as a waiter in a fine-dining Italian restaurant that was about to open in a month and a half. It seemed like the perfect opportunity to make a living in a field far from software engineering, disconnect for a while, and get more than a month of training before starting.

For the first time, I felt relief. I had a job, a contract, a legal status in process, and a decent salary to make a living.

Tears and Joy

Now it was time to prove that I could grind in another field. The first days were so easy, and I felt comfortable. There were just theory training sessions about the food menu—a piece of cake, I'd say. But then the days began escalating in difficulty: role plays, serving tables, guidelines, rules, clearing tables, handling dishes.

I did well, focusing on being marked as a good waiter. After a few role-plays with feedback, I hit a wall. I did one awful role-play the worst service you could ever imagine. Every step was wrong, from my attitude to my posture everything.

I got burned out. I was so frustrated, I just sat there, staring into space, feeling my energy and motivation being sucked out of me.

After that, training continued, and there were exams. Luckily, I passed them all. I was marked as one of the most hard-working team members. I was happy my efforts were bringing results.

We've been doing some shifts in another restaurant from the same company to learn and make us feel more prepared for the big opening.

There have been ups and downs, discussions, and tears, but in the end, I feel a personal improvement since I began.

My story in Dubai is just beginning. I'll keep posting my experiences here. Thanks to anyone who took the time to read this.

See you soon ;)

For more look into thekoto.dev/blog

A Vue Shorthand for Slots

Kevin Coto🚀💡 — Mon, 20 Jun 2022 22:25:54 +0000

Named Slots has a shorthand that isn't necessarily shorter but maybe cleaner.

This is the regular way:

<Todo> <template :description> <Item/> </template> </Todo>

This is the cleaner way:

<Todo> <template #description> <Item/> </template> </Todo>

Follow me on Twitter to get more pieces of advice about Vue.js

For more look into thekoto.dev/blog

Simple guide of Flexbox in Real Life🔥Part #2

Kevin Coto🚀💡 — Fri, 18 Jun 2021 03:04:17 +0000

If you have come until here you are prepared for working with Flexbox in real projects, but first read all this article.

An interesting property: wrap

First, we let's talk about the wrap, wrap is so useful property to defined If our items it adjusting in one line or allow the items to wrap as needed with this property.

It has 3 properties:

nowrap (default): all flex items will be on one line
wrap: flex items will wrap onto multiple lines, from top to bottom.
wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

A combination between `wrap` and `flex-direction`: `flow`

If you needed use flex-direction and wrap in the same element, so flow is your solution to save your time and create more clarity and professional code

This is an example of how use this property:

.div { flex-flow: column wrap; }

I know that you are waiting for more property but I'm sorry it does not have more so important properties, If you want to read more about all flexbox properties clicking this URL, sorry it's a monetizable URL with them I pay my tomatoes

Simple guide of Flexbox in Real Life🔥

Kevin Coto🚀💡 — Mon, 17 May 2021 23:15:40 +0000

Flexbox is an interesting way to make layout At least better -as I see- compared to float's and other techniques.

So, in this article I'll explain how to use flexbox in real life🔥

The first action

The first step is writing display:flex in the father container, then you should write some other lines of code using properties like flex-direction and others that I tell you about next.

Flex-Direction is so basic but it's important

This properti sets the direction in which our child elements are shown. We have these:

row: this value order our child elements in rows from left to right
row-reverse: this value order our child elements in rows from right to left
column: this value order our child elements in rows from up to down
column-reverse: this value order our child elements in rows from down to top

Small mention to the `order` property😼

So, this property is useful to order our child item through numbers ID but I've never used this property, ordering your elements correctly in the HTML is's enough.

The `grow` property, this is really important

Besides being important, this property it's so useful in the Real Life(☞ﾟヮﾟ)☞

With this property we can establish the size of our child items so easy, assigning numerical values and the elements can shrink or grow according to the highest or lowest value, lowest to shrink, highest to grow.

A taste of the flexibility of flexbox🤖

Early PD:In this article I write about the most used properties used in Real Life if I forget any, let me know in the comments.

The King of Flexbox:`justify-content`🤴🏽

So, let's talk about important things, this property is the King and father of the other properties, it's so important and attractive that for me it's the best property in Flexbox.

I'm going to explain to yoy how this property works, thorugh two images:

PD: Sorry, this article is just part #1, in two days I'm going to publish the second part of Flexbox in Real Life🔥📚

DEV Community: Kevin Coto🚀💡

Using Cloudflare Turnstile with SvelteKit: A Simple Guide

🔹 Step 1: Validate Turnstile Tokens on the Server

Backend (+page.server.ts or +server.ts)

What This Does:

🔹 Step 2: Integrate Turnstile in the Svelte Frontend

Frontend (+page.svelte)

🔹 Why $effect(() => { showCaptcha = false; setTimeout(() => (showCaptcha = true), 0); })?

Problem:

Solution:

🎯 Summary

Yeah Leetcode without Google or LLM Part 1 (35. Search Insert Position)

My Solution:

Conclusion:

Destructuring in function parameters

From software developer to waiter in Dubai

My Journey in Dubai

Background

Residency Challenges

Tears and Joy

A Vue Shorthand for Slots

Simple guide of Flexbox in Real Life🔥Part #2

An interesting property: wrap

A combination between wrap and flex-direction: flow

Simple guide of Flexbox in Real Life🔥

The first action

Flex-Direction is so basic but it's important

Small mention to the order property😼

The grow property, this is really important

The King of Flexbox:justify-content🤴🏽

Backend (`+page.server.ts` or `+server.ts`)

Frontend (`+page.svelte`)

🔹 Why `$effect(() => { showCaptcha = false; setTimeout(() => (showCaptcha = true), 0); })`?

A combination between `wrap` and `flex-direction`: `flow`

Small mention to the `order` property😼

The `grow` property, this is really important

The King of Flexbox:`justify-content`🤴🏽