Skip to content

error executing getResponse function with version 2 invisible mode #133

@JuanDa90laq

Description

@JuanDa90laq

I am implementing the base example code that is shared in the documentation, at the moment of executing the getResponse method it fails me, when looking at the error it shows the following error:

Login error: TypeError: Cannot read properties of null (reading 'execute') at eval (recaptcha.js:76:1) at new Promise (<anonymous>) at ReCaptcha.getResponse (recaptcha.js:73:1)

Apparently it is not initializing correctly and that is why it tells me that execute does not exist.

Image

<template>
  <section class="index-page">
    <h2>Sign In</h2>

    <form @submit.prevent="onSubmit">
      <input
        autocomplete="true"
        placeholder="Email"
        type="email"
        v-model="email"
      >

      <input
        autocomplete="current-password"
        placeholder="Password"
        type="password"
        v-model="password"
      >

      <recaptcha
        @error="onError"
        @success="onSuccess"
        @expired="onExpired"
      />

      <button type="submit">Sign In</button>
      <nuxt-link :to="{ name: 'about' }">About</nuxt-link>
    </form>
  </section>
</template>

<script>
export default {
  data: () => ({
    email: 'test@example.com',
    password: '123',
  }),

  methods: {
    onError (error) {
      console.log('Error happened:', error)
    },

    async onSubmit() {
      try {
        const token = await this.$recaptcha.getResponse()

        const response = await fetch('/api/check-token', {
          method: 'POST',
          body: JSON.stringify({
            token,
            email: this.email,
            password: this.password
          })
        }).then(res => res.json())

        console.log('Server Response: ', response)

        await this.$recaptcha.reset()
      } catch (error) {
        console.log('Login error:', error)
      }
    },

    onSuccess (token) {
      console.log('Succeeded:', token)
    },

    onExpired () {
      console.log('Expired')
    }
  },
}
</script>

This is the code I am using to obtain the token

and this is the configuration in nuxt.config

publicRuntimeConfig: {
    recaptcha: {
      /* reCAPTCHA options */
      hideBadge: true, // Hide badge element (v3 & v2 via size=invisible),
      size: 'invisible',
      siteKey: process.env.API_KEY_RECAPTCHA,
      version: 2
    }
  },

 

    // Modules: https://go.nuxtjs.dev/config-modules
    modules: [
     // https://nuxt.com/modules/gtm
    '@nuxtjs/gtm',
    // https://v8.i18n.nuxtjs.org/
    '@nuxtjs/i18n',
    // https://github.com/nuxt-community/dayjs-module
    '@nuxtjs/dayjs',
    // https://www.npmjs.com/package/cookie-universal-nuxt
    'cookie-universal-nuxt',
    // https://www.npmjs.com/package/@nuxtjs/recaptcha
    '@nuxtjs/recaptcha'
  ],

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions