0

I'm having a problem when trying to apply recaptcha into my web app.

Basically, it's returning the error message: "invalid-input-response"

What could I be doing wrong?

Stack:

  • @nuxtjs/recaptcha 1.1.1
  • express-recaptcha 5.1.0
  • nuxt 2.15.8
  • node 16.15.9

Here is my configuration on front, I don't have certain about the recaptcha mode, if I should use base or enterprise. nuxt.config.js

  modules: [
    '@nuxtjs/recaptcha',
  ],

  recaptcha: {
    hideBadge: true,
    mode: 'base',
    siteKey: 'MY_SITE_KEY',
    version: 3,  
    size: 'normal',
  },

On index I don't know if has any problem here Based on docs, it's only do that On my action I'm sending the token alongside my data on that format

{
 token: 'asdadsadadasdas',
 review: {...}
}

index.vue

  async mounted() {
    try {
      await this.$recaptcha.init()
    } catch (e) {
      console.log(e);
    }
  },

  methods: {
    ...mapActions({
      getProduct: "getProduct",
      postReview: "postReview",
    }),
    async submit() {
      const postReviewToken = await this.$recaptcha.execute('postReview')
      try {
        await this.postReview({
          token: postReviewToken,
          productId: this.$route.params.productId,
          review: {
            title: this.review.title,
            content: this.review.content,
          },
        });
        this.getProduct({ productId: this.$route.params.productId });
        this.review = {
          title: "",
          content: "",
        };
      } catch (error) {}
    },
  },

Node

And on my api I just added the middleware as docs require

import { RecaptchaV3 } from 'express-recaptcha/dist'

const recaptcha = new RecaptchaV3(
  'MY_SITE_KEY',
  'MY_SECRET_KEY'
)

routes.post('/product/:id/review', recaptcha.middleware.verify, async (request: Request, response: Response) => {
  if (request.recaptcha?.error) { 
    return response.status(400).json({ message: request.recaptcha.error })
  }
  const review = await prisma.review.create({
    data: {
      productId: request.params.id,
      title: request.body.review.title,
      content: request.body.review.content,
    },
    select: {
      id: true,
      title: true,
      content: true,
    }
  })

  response.json({review});
});
Gabriel Hoffman
  • 1
  • What did you tried so far? There are quite some answers on the Web regarding this error already. This one seems quite relevant IMO: https://stackoverflow.com/a/67090802/8816585 – kissu May 30 '22 at 19:31
  • I already tried all solutions proposed on the first page of results from Google. Basically,m everytime that I try to verify a token is returning that response, even if i send no token in response. – Gabriel Hoffman May 31 '22 at 21:06
  • Did you tried to isolate the issue and try it with a simple regular JS file (for debugging purposes)? – kissu May 31 '22 at 21:07
  • I think that this isn't possible. A client is required to reCaptcha works, right? – Gabriel Hoffman May 31 '22 at 21:10

0 Answers0