Failing to getting Turnstile to work with NextJS App Router

What is the name of the domain?

example.com

What is the error message?

Blocked a frame with origin “https://challenges.cloudflare.com” from accessing a frame with origin “https://www.example.com”. Protocols, domains, and ports must match.

What is the issue you’re encountering

Turnstile is failing to work in a nextjs app router application. Even with the real domain on the approved/allowed domains list, it still reports this error, and pukes out a stream of unintelligible errors.

What steps have you taken to resolve the issue?

Have tried everything from installing on a clean build, running on the client, running on the server, executed with the @marsidev/react-turnstile package, and with injections. Have tried everything to solve it but it seems like an issue out of my hands…

Screenshot of the error

1 Like

I have similar issue. Did you fix it?

I am getting Next JS hydration error. But don’t know what I did wrong!