Verify if reCaptcha v3 in Nuxt is working properly - vue.js

Question

I'm installing #nuxtjs/recaptcha on my nuxt project, which is google reCaptcha V3. It looks like it's working great it's always returning success result from the servers like below.
{success: true, challenge_ts: '2022-05-05T11:37:06Z', hostname: 'localhost', score: 0.9}
But I'm not sure this work properly because the challenge does not appear. Recaptcha as I know it, should have a challenge that must be met. But why doesn't the challenge appear here?
Maybe it needs to be triggered with some event handler? But in the documentation example I didn't saw any things related about it or maybe I just do not realize it.
May be im missing something important, so I need your help to figure it out.
My template code
<template>
<div class="container">
<h1 align="center">SEND EMAIL TO US!</h1>
<div class="layout">
<form #submit.prevent="onSubmit">
<div class="basic-info">
<div class="name">
<label for="">Name :</label>
<b-form-input v-model="data.name" placeholder="Name"></b-form-input>
<div v-if="validation.name" class="mt-2">
<b-alert show variant="danger">{{ validation.name[0] }}</b-alert>
</div>
</div>
<div class="email">
<label for="">Email :</label>
<b-form-input
v-model="data.email"
placeholder="Email"
></b-form-input>
<div v-if="validation.email" class="mt-2">
<b-alert show variant="danger">{{ validation.email[0] }}</b-alert>
</div>
</div>
<div class="messege">
<label for="">Messege :</label>
<b-form-textarea
id="textarea"
v-model="data.messege"
placeholder="Enter Messege..."
rows="8"
max-rows="8"
></b-form-textarea>
<div v-if="validation.messege" class="mt-2">
<b-alert show variant="danger">
{{ validation.messege[0] }}
</b-alert>
</div>
</div>
<hr />
<b-button type="submit" variant="outline-primary">
SEND EMAIL
</b-button>
<hr />
<b-alert v-model="alert" show :variant="variant">
{{ result_messege }}
</b-alert>
</div>
</form>
</div>
</div>
</template>
my script code
<script>
export default {
async mounted() {
try {
await this.$recaptcha.init()
} catch (e) {
console.log(e)
}
},
methods: {
async onSubmit() {
try {
this.loading = true
// Start the verification process
const response = await this.verifyCaptcha()
console.log(response)
// Display error message if verification was not successful
if (!response.success) {
this.$recaptcha.reset()
this.loading = false
this.errorStatus = true
this.notificationMessage =
'There was an error with your reCaptcha verification. Please try again.'
return
}
// If verification was successful, send the message
await this.sendMail()
this.errorStatus = false
this.notificationMessage =
'Thank you for reaching out. We will get back to you as soon as possible'
this.loading = false
this.$recaptcha.reset()
} catch (error) {
this.loading = false
console.log(error)
}
},
async verifyCaptcha() {
try {
const token = await this.$recaptcha.execute()
console.log(token)
const response = await this.$axios.$post(
`/captcha-api/siteverify?secret=${process.env.SECRET_KEY}&response=${token}`
)
return response
} catch (error) {
this.loading = false
return error
}
},
},
}
</script>

Answer 1

This is totally normal, this is the whole concept of the v3 as you can see in this video: https://youtu.be/tbvxFW4UJdU
More details are also here: https://developers.google.com/recaptcha/docs/v3
And here: https://www.google.com/recaptcha/about/
So far, the feature is exactly this: do not require any interaction from the user but rather use some mouse trackers/AI to know if it's potentially malicious or not.