How to fix captcha_failed: Captcha verification process failed in Supabase

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(url, key);

// In your sign-up handler
const { data, error } = await supabase.auth.signUp({
  email: userEmail,
  password: userPassword,
  options: {
    captchaToken: captchaToken // ← Make sure this is included
  }
});

// Or for sign-in
const { data, error } = await supabase.auth.signInWithPassword({
  email: userEmail,
  password: userPassword,
  options: {
    captchaToken: captchaToken // ← Must be passed here too
  }
});

const { data, error } = await supabase.auth.signInAnonymously({
  options: {
    captchaToken: captchaToken
  }
});

import HCaptcha from '@hcaptcha/react-hcaptcha';
import { useRef, useState } from 'react';

function SignUpForm() {
  const captchaRef = useRef(null);
  const [captchaToken, setCaptchaToken] = useState<string | null>(null);

  const handleCaptchaVerify = (token: string) => {
    setCaptchaToken(token);
  };

  const handleSignUp = async () => {
    if (!captchaToken) {
      alert('Please complete the CAPTCHA');
      return;
    }

    const { data, error } = await supabase.auth.signUp({
      email: email,
      password: password,
      options: {
        captchaToken: captchaToken
      }
    });
  };

  return (
    <>
      <HCaptcha
        ref={captchaRef}
        sitekey="your-site-key"
        onVerify={handleCaptchaVerify}
      />
      <button onClick={handleSignUp}>Sign Up</button>
    </>
  );
}

import { Turnstile } from '@captcha/react';
import { useState } from 'react';

function SignUpForm() {
  const [captchaToken, setCaptchaToken] = useState<string | null>(null);

  return (
    <>
      <Turnstile
        sitekey="your-turnstile-site-key"
        onVerify={(token: string) => setCaptchaToken(token)}
      />
      <button onClick={() => handleSignUp(captchaToken)}>Sign Up</button>
    </>
  );
}

// ❌ WRONG: captchaToken declared in wrong scope
function SignUpForm() {
  let captchaToken; // Declared here

  function handleCaptchaVerify(token: string) {
    const captchaToken = token; // Redeclared in nested scope!
    // This only sets the local variable, not the outer one
  }

  function handleSubmit() {
    console.log(captchaToken); // Still undefined!
  }
}

// ✓ CORRECT: Use the same variable
function SignUpForm() {
  let captchaToken; // Declared once

  function handleCaptchaVerify(token: string) {
    captchaToken = token; // Assign to outer variable
  }

  function handleSubmit() {
    console.log(captchaToken); // Now has the token
  }
}

const [captchaToken, setCaptchaToken] = useState<string | null>(null);

const handleCaptchaVerify = (token: string) => {
  setCaptchaToken(token); // Updates state for all components
};

const captchaRef = useRef(null);

const resetCaptcha = () => {
  captchaRef.current?.resetCaptcha();
};

const handleSignUp = async () => {
  try {
    const { error } = await supabase.auth.signUp({
      email, password,
      options: { captchaToken }
    });
    if (error) {
      resetCaptcha(); // Reset for retry
      setCaptchaToken(null);
    }
  } catch (err) {
    resetCaptcha();
  }
};

ngrok http 3000

sudo nano /etc/hosts
   # Add line:
   # 127.0.0.1 yourdomain.local