#hcaptcha error

12 messages · Page 1 of 1 (latest)

tulip dune
#

Since adding some things to supabase.ts, register.ts and signin.ts, it's failing to register or log in.

verbal runeBOT
#

Hi @tulip dune. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

I'd be happy to help, but I don't have enough context to diagnose your specific issue. You mentioned changes to supabase.ts, register.ts, and signin.ts, but no files were attached to your query, and the knowledge sources don't contain information about hCaptcha integration with Supabase in Astro.

That said, here are the baseline working implementations from the Astro docs for those files, which you can compare against your current code:

src/lib/supabase.ts

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

export const supabase = createClient(
  import.meta.env.SUPABASE_URL,
  import.meta.env.SUPABASE_ANON_KEY,
);

[Supabase & Astro]

src/pages/api/auth/register.ts

import type { APIRoute } from "astro";
import { supabase } from "../../../lib/supabase";

export const POST: APIRoute = async ({ request, redirect }) => {
  const formData = await request.formData();
  const email = formData.get("email")?.toString();
  const password = formData.get("password")?.toString();

  if (!email || !password) {
    return new Response("Email and password are required", { status: 400 });
  }

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

  if (error) {
    return new Response(error.message, { status: 500 });
  }

  return redirect("/signin");
};

[auth endpoints]

To help you further, could you share:

  1. The exact error message you're seeing (browser console or server logs)?
  2. Your modified versions of those files?
#

The hCaptcha integration itself is not covered in the Astro documentation knowledge sources I have access to, so I can't speak to that specific configuration.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@tulip dune Kapa.ai is still learning and improving, please let me know how I did by reacting below.

tulip dune
#

@verbal rune this is my supabase.ts file
const supabaseUrl = import.meta.env.PUBLIC_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

export function createServerClient() {
return createClient(supabaseUrl, supabaseAnonKey, {
auth: {
flowType: "pkce",
autoRefreshToken: false,
detectSessionInUrl: false,
persistSession: false,
},
});
}

verbal runeBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Thanks for sharing your supabase.ts. Looking at it compared to the Astro docs, a few things stand out:

  1. Environment variable naming: You're using PUBLIC_SUPABASE_URL and PUBLIC_SUPABASE_ANON_KEY, but the Astro Supabase guide uses SUPABASE_URL and SUPABASE_ANON_KEY (without the PUBLIC_ prefix). [Supabase & Astro]

    Using PUBLIC_ prefixed variables is fine for client-side access, but make sure your .env file matches exactly what you're referencing in code.

  2. The createServerClient with flowType: "pkce": The docs show this pattern specifically for OAuth authentication, not for standard email/password sign-in/sign-up. [adding OAuth] If you're using createServerClient() in your register.ts or signin.ts for basic email/password auth, that may be causing unexpected behavior — the standard client should be sufficient for those.

The baseline supabase.ts from the docs is simply:

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

export const supabase = createClient(
  import.meta.env.SUPABASE_URL,
  import.meta.env.SUPABASE_ANON_KEY,
);

[Supabase & Astro]

To narrow down your issue, could you share:

  • Are register.ts and signin.ts using supabase or createServerClient()?
  • What is the exact error message you're seeing?

The knowledge sources don't cover hCaptcha integration with Supabase, so I can't speak to that part specifically.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@tulip dune Kapa.ai is still learning and improving, please let me know how I did by reacting below.

tulip dune
#

@verbal rune this is my second register.ts file
import type { APIRoute } from "astro";
import { createServerClient } from "../../../lib/supabase";

export const POST: APIRoute = async ({ request }) => {
try {
const supabase = createServerClient();
const formData = await request.formData();

const email = formData.get("email")?.toString();
const password = formData.get("password")?.toString();
const name = formData.get("name")?.toString();
const token = formData.get("h-captcha-response")?.toString();

if (!email || !password || !token) {
  return new Response("All fields and captcha are required", { status: 400 });
}

const { data, error } = await supabase.auth.signUp({
  e-mail,
  password,
  options: {
    captchaToken: token,
    data: { display_name: name || "" },
    emailRedirectTo: `${new URL(request.url).origin}/api/auth/callback`,
  },
});

if (error) {
  return new Response(error.message, { status: error.status || 500 });
}

if (data.user && data.user.identities?.length === 0) {
  return new Response("This email is already registered.", { status: 409 });

}

return new Response(JSON.stringify({ message: "Registration successful. Check your email." }), { status: 200 });

} catch (err) {

console.error("Error in Register:", err);

return new Response("Internal server error", { status: 500 });

}
};

verbal runeBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Looking at your register.ts, I can spot a likely syntax error that would cause a failure:

Typo in the signUp call:

const { data, error } = await supabase.auth.signUp({
  e-mail,  // ❌ This is invalid JavaScript/TypeScript
  password,
  ...
});

e-mail is not valid syntax — JavaScript interprets the - as a minus operator. It should be:

const { data, error } = await supabase.auth.signUp({
  email,  // ✅
  password,
  ...
});

This alone would cause a runtime error and prevent registration from working.

Beyond that, a couple of other notes based on what the Astro docs show:

  1. Using createServerClient() for email/password registration — as mentioned previously, the pkce flow type in your createServerClient is intended for OAuth flows [adding OAuth], not standard email/password sign-up. The docs use the plain supabase client for register.ts [auth endpoints]:
import { supabase } from "../../../lib/supabase";
  1. hCaptcha (captchaToken) — this is not covered in the Astro documentation knowledge sources I have access to, so I can't confirm whether that part of your implementation is correct.

Fix the e-mail typo first — that's almost certainly causing a hard failure — and consider switching to the plain supabase client for registration.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: