turnstile - captcha verification process failed
Hi, I'm getting this error when trying to sign in in my SvelteKit + Supabase app
I have configured turnstile in the supabase dashboard already
Sign-in failure:
Object { type: "failure", status: 400, data: {…} }
data: Object { error: "captcha verification process failed" }
status: 400
type: "failure"
Sign-in failure:
Object { type: "failure", status: 400, data: {…} }
data: Object { error: "captcha verification process failed" }
status: 400
type: "failure"
1 Reply
/signin/+page.svelte
/signin/+page.server.ts
<script lang="ts">
import type { SubmitFunction } from "@sveltejs/kit";
import { enhance } from "$app/forms";
import { Input } from "$lib/components/ui/input";
import { Button } from "$lib/components/ui/button";
import { LoaderCircle } from "lucide-svelte";
import { PUBLIC_TURNSTILE_SITE_KEY } from "$env/static/public";
let email = "";
let password = "";
let error: string = "";
let isLoading = false;
const handleEnhance: SubmitFunction = () => {
isLoading = true;
error = "";
return async ({ result, update }) => {
if (result.type === "failure") {
error = result.data?.error || "An unknown error occurred";
console.error("Sign-in failure:", result);
} else if (result.type === "redirect") {
return;
} else if (result.type === "success") {
console.log("Sign-in success:", result);
}
await update();
isLoading = false;
};
};
</script>
<svelte:head>
<title>Sign in</title>
<link rel="icon" href="/favicon.png" />
<script
src="https://challenges.cloudflare.com/turnstile/v0/api.js"
async
defer
></script>
</svelte:head>
//...
<form method="POST" class="mt-8 space-y-6" use:enhance={handleEnhance}>
//input fields here
{#if error}
<p class="text-red-500">{error}</p>
{/if}
<div
class="cf-turnstile"
data-sitekey={PUBLIC_TURNSTILE_SITE_KEY}
data-callback="javascriptCallback"
></div>
<Button type="submit" class="w-full bg-teal-400" disabled={isLoading}>
{#if isLoading}
<LoaderCircle class="animate-spin mr-2 h-4 w-4" />
Signing in...
{:else}
Sign in
{/if}
</Button>
</form>
//...
<script lang="ts">
import type { SubmitFunction } from "@sveltejs/kit";
import { enhance } from "$app/forms";
import { Input } from "$lib/components/ui/input";
import { Button } from "$lib/components/ui/button";
import { LoaderCircle } from "lucide-svelte";
import { PUBLIC_TURNSTILE_SITE_KEY } from "$env/static/public";
let email = "";
let password = "";
let error: string = "";
let isLoading = false;
const handleEnhance: SubmitFunction = () => {
isLoading = true;
error = "";
return async ({ result, update }) => {
if (result.type === "failure") {
error = result.data?.error || "An unknown error occurred";
console.error("Sign-in failure:", result);
} else if (result.type === "redirect") {
return;
} else if (result.type === "success") {
console.log("Sign-in success:", result);
}
await update();
isLoading = false;
};
};
</script>
<svelte:head>
<title>Sign in</title>
<link rel="icon" href="/favicon.png" />
<script
src="https://challenges.cloudflare.com/turnstile/v0/api.js"
async
defer
></script>
</svelte:head>
//...
<form method="POST" class="mt-8 space-y-6" use:enhance={handleEnhance}>
//input fields here
{#if error}
<p class="text-red-500">{error}</p>
{/if}
<div
class="cf-turnstile"
data-sitekey={PUBLIC_TURNSTILE_SITE_KEY}
data-callback="javascriptCallback"
></div>
<Button type="submit" class="w-full bg-teal-400" disabled={isLoading}>
{#if isLoading}
<LoaderCircle class="animate-spin mr-2 h-4 w-4" />
Signing in...
{:else}
Sign in
{/if}
</Button>
</form>
//...
import type { Actions, PageServerLoad } from "./$types";
import { fail, redirect } from "@sveltejs/kit";
export const load: PageServerLoad = async ({ locals }) => {
const session = await locals.getSession();
if (session) {
throw redirect(302, `/user/${session.user.user_metadata.username}`);
}
return {
session: null,
};
};
export const actions: Actions = {
default: async ({ request, locals }) => {
const formData = await request.formData();
const email = formData.get("email");
const password = formData.get("password");
if (typeof email !== "string" || typeof password !== "string") {
return fail(400, { error: "Invalid form data" });
}
const { data, error: signinError } =
await locals.supabase.auth.signInWithPassword({
email,
password,
});
if (signinError) {
console.error("Signin error:", signinError);
return fail(400, { error: signinError.message });
}
if (!data.user) {
return fail(400, { error: "No user returned after signin" });
}
// Fetch user data from the users table
const { data: userData, error: userError } = await locals.supabase
.from("users")
.select("username")
.eq("id", data.user.id)
.single();
if (userError) {
console.error("Error fetching user data:", userError);
return fail(500, {
error: "Error fetching user data. Please try again.",
});
}
throw redirect(302, `/user/${userData.username}`);
},
};
import type { Actions, PageServerLoad } from "./$types";
import { fail, redirect } from "@sveltejs/kit";
export const load: PageServerLoad = async ({ locals }) => {
const session = await locals.getSession();
if (session) {
throw redirect(302, `/user/${session.user.user_metadata.username}`);
}
return {
session: null,
};
};
export const actions: Actions = {
default: async ({ request, locals }) => {
const formData = await request.formData();
const email = formData.get("email");
const password = formData.get("password");
if (typeof email !== "string" || typeof password !== "string") {
return fail(400, { error: "Invalid form data" });
}
const { data, error: signinError } =
await locals.supabase.auth.signInWithPassword({
email,
password,
});
if (signinError) {
console.error("Signin error:", signinError);
return fail(400, { error: signinError.message });
}
if (!data.user) {
return fail(400, { error: "No user returned after signin" });
}
// Fetch user data from the users table
const { data: userData, error: userError } = await locals.supabase
.from("users")
.select("username")
.eq("id", data.user.id)
.single();
if (userError) {
console.error("Error fetching user data:", userError);
return fail(500, {
error: "Error fetching user data. Please try again.",
});
}
throw redirect(302, `/user/${userData.username}`);
},
};