Integrate reCaptcha V3 on Nuxt3 app

#webdev #javascript #vue #nuxt

“CAPTCHA” stands for “Completely Automated Public Turing test to tell Computers and Humans Apart”

ReCAPTCHA is a free CAPTCHA system provided by Google and by adding reCAPTCHA to a site, web hosts can distinguish between human and automated access, which enables them to block automated software while helping their welcome users to enter with ease.

But if you are here you know what's ReCAPTCHA and how it works... the problem here is the integration with our loved Nuxt3

Nuxt uses a plugins systems that allow us to extend our App functionalities:

Allow functions to be available on client-side and server-side
Using. your favorite Vue.js plugins in your Nuxt application
User external packages and modules.

How it works

Just creating the plugin file inside the plugins folder is enough. Nuxt does it all for you. Pretty comfortable not you?
More info here

ReCaptchaV3

We use the vue-recaptcha-v3 npm package

Install it with npm i vue-recaptcha-v3

Then create a new file on plugins folder, we named it google-recaptcha.ts with the followings:

import { VueReCaptcha } from 'vue-recaptcha-v3';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(VueReCaptcha, {
        siteKey: '<YourSiteKey>',
    });
});

We used the new defineNuxtPlugin method from nuxt3, it take only one argument (nuxtApp) and them add the VueReCaptcha module to the use method of vueApp, finally add the site key to the module options and Voila, your app have now ReCaptcha v3.

Reload your app and check that the ReCaptcha badge is shown at the bottom of your site

Customization

The vue-recaptcha-v3 plugin offers optional options to configure the behavior of some parts.

loaderOptions: {
    autoHideBadge: false,
    explicitRenderParameters: {
        badge: 'bottomleft',
    }
},

The entire code looks like the following:

import { VueReCaptcha } from 'vue-recaptcha-v3';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(VueReCaptcha, {
        siteKey: '<YourSiteKey>',
        loaderOptions: {
            autoHideBadge: false,
            explicitRenderParameters: {
                badge: 'bottomleft',
            },
        },
    });
});

The available options are described here.

Usage

Well I can see the ReCaptcha badge on my site, what's next?

Now you need to get the token and send it within your requests to be validated against your backend:

To get the reCaptcha token, on your component setup, add the method to get the reCaptcha token

// First import the useReCaptcha composable
import { useReCaptcha } from 'vue-recaptcha-v3';

export default defineComponent({
    setup() {
        // initialize a instance
        const recaptchaInstance = useReCaptcha();

        const recaptcha = async () => {
            // optional you can await for the reCaptcha load
            await recaptchaInstance?.recaptchaLoaded();

            // get the token, a custom action could be added as argument to the method
            const token = await recaptchaInstance?.executeRecaptcha('yourActionHere');

            return token;
        };

        return {
            recaptcha,
        };
    },
    ...
});

Finally you can use on your own component method

...
methods: {
    async onSubmit(): Promise<void> {
        // get the token on your method
        const token = await this.recaptcha();

        // use the token as your convenience
    }
},
...