Nuxt•5w ago

Nuxt turnstile module server side verification in cloudflare pages

Hello, I'm having some trouble with turnstile module. I have this working well in local development, but when I transfer the code to cloudlfare pages the "verifyTurnstileToken" does not seem to work. The ENV is clearly ok, cause I get from the front end the token and it is verified in both environments. So the there's something different going on in the server side on cloudflare pages.

import protectedRouteAnon from '~/server/protectedRouteAnon'
import { serverSupabaseServiceRole } from '#supabase/server'

export default defineEventHandler(async (event) => {
    await protectedRouteAnon(event);
    const body = await readBody(event)
    const client = serverSupabaseServiceRole(event)
    const runtimeConfig = useRuntimeConfig(event)
    const base_url = runtimeConfig.public.API_HOSTNAME
    const { token } = await readBody(event)

    if (!token) {
        throw createError({
          statusCode: 422,
          statusMessage: 'Token not provided.',
        })
      }

    const tokenResult = await verifyTurnstileToken(token)


    console.log('TOKEN: ' + token) // This logs in both environments
    console.log('TOKEN RESULT: ' + tokenResult.success) // This logs in local but not in cloudlfare pages
 

    if (tokenResult.success){
        try {
            const { data, error } = await client.auth.signInWithOtp({
                email: body?.email,
                options: {
                    emailRedirectTo: base_url+'new-company/confirm',
                    data: {
                        name: body?.name,
                        role: 'logintemp',
                    }
                    }
            })
                if (error) throw error
                else{
                    return tokenResult.success
                }
            }
            catch (error) {
                return { error: error }
            } 
    }
    else{
        return false
    }

})

import protectedRouteAnon from '~/server/protectedRouteAnon'
import { serverSupabaseServiceRole } from '#supabase/server'

export default defineEventHandler(async (event) => {
    await protectedRouteAnon(event);
    const body = await readBody(event)
    const client = serverSupabaseServiceRole(event)
    const runtimeConfig = useRuntimeConfig(event)
    const base_url = runtimeConfig.public.API_HOSTNAME
    const { token } = await readBody(event)

    if (!token) {
        throw createError({
          statusCode: 422,
          statusMessage: 'Token not provided.',
        })
      }

    const tokenResult = await verifyTurnstileToken(token)


    console.log('TOKEN: ' + token) // This logs in both environments
    console.log('TOKEN RESULT: ' + tokenResult.success) // This logs in local but not in cloudlfare pages
 

    if (tokenResult.success){
        try {
            const { data, error } = await client.auth.signInWithOtp({
                email: body?.email,
                options: {
                    emailRedirectTo: base_url+'new-company/confirm',
                    data: {
                        name: body?.name,
                        role: 'logintemp',
                    }
                    }
            })
                if (error) throw error
                else{
                    return tokenResult.success
                }
            }
            catch (error) {
                return { error: error }
            } 
    }
    else{
        return false
    }

})

Any ideas would be greatly appreciated!

3 Replies

kapa.ai•5w ago

Hi @Menttis. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in your question and the available knowledge sources, it seems that you're encountering an issue with the Nuxt Turnstile module's server-side verification when deploying to Cloudflare Pages. While I don't have specific information about the Turnstile module in the provided knowledge sources, I can offer some general insights and suggestions based on Nuxt deployment to Cloudflare Pages. 1. Environment Variables: Ensure that your environment variables are correctly set in Cloudflare Pages. As mentioned in the Nitro documentation (https://nitro.unjs.io/deploy/providers/cloudflare#environment-variables), you should access environment variables within the event lifecycle, not in global contexts. Make sure your TURNSTILE_SECRET_KEY (or whatever environment variable you're using for Turnstile) is properly set in Cloudflare Pages. 2. Cloudflare Pages Preset: When deploying to Cloudflare Pages, you need to use the correct preset. As mentioned in the Nitro documentation (https://nitro.unjs.io/deploy/providers/cloudflare#cloudflare-pages), you should use the cloudflare_pages preset. You can set this in your nuxt.config.ts file:

   export default defineNuxtConfig({
     nitro: {
       preset: 'cloudflare_pages'
     }
   })

   export default defineNuxtConfig({
     nitro: {
       preset: 'cloudflare_pages'
     }
   })

3. Server-side Execution: The verifyTurnstileToken function might not be executing properly in the Cloudflare Pages environment. This could be due to differences in how server-side code is handled in Cloudflare Pages compared to your local environment. You might need to adjust your server-side code to work within Cloudflare's constraints. 4. Debugging: To better understand what's happening, you could add more detailed logging. For example, log the entire tokenResult object instead of just tokenResult.success. This might give you more insight into what's happening with the verification process. 5. Cloudflare Workers: If you're using Cloudflare Workers alongside Pages, make sure your Worker script is correctly set up to handle the Turnstile verification. The Nitro documentation (https://nitro.unjs.io/deploy/providers/cloudflare#wrangler) mentions using Wrangler for local preview and deployment, which might be relevant if you're using Workers. 6. Check for Errors: Look for any error messages in your Cloudflare Pages logs. There might be specific error information that could help identify the issue. If these suggestions don't resolve your issue, you might need to reach out to the Nuxt community or Cloudflare support for more specific assistance. The problem could be related to how Cloudflare Pages handles server-side execution of certain functions, which might require adjustments to your code or configuration. Remember to always test your changes in a staging environment before deploying to production. If you suspect this might be a bug in Nuxt or the Turnstile module, consider reporting it (https://nuxt.com/docs/community/reporting-bugs) to the Nuxt team after thoroughly investigating and isolating the issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

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

MenttisOP•5w ago

Ok got it, in case some body else is wondering.. In cloudflare pages the ENV does not pass it self, it needs to be set in nuxt.config.js. Logged first the entire turnstile object and found the error: "missing-input-secret" I had in nuxt.config.js:

  turnstile: {
    siteKey: process.env.NUXT_PUBLIC_TURNSTILE_SITE_KEY,
    addValidateEndpoint: true
  },

  turnstile: {
    siteKey: process.env.NUXT_PUBLIC_TURNSTILE_SITE_KEY,
    addValidateEndpoint: true
  },

So just added the secretKey also and it worked:

  turnstile: {
    siteKey: process.env.NUXT_PUBLIC_TURNSTILE_SITE_KEY,
    siteKey: process.env.NUXT_PUBLIC_TURNSTILE_SITE_KEY,
    addValidateEndpoint: true
  },

  turnstile: {
    siteKey: process.env.NUXT_PUBLIC_TURNSTILE_SITE_KEY,
    siteKey: process.env.NUXT_PUBLIC_TURNSTILE_SITE_KEY,
    addValidateEndpoint: true
  },

Gaming

Programming

Nuxt turnstile module server side verification in cloudflare pages