Awesome

Adonis ReCAPTCHA v2

Verifier for Google ReCAPTCHA v2. Not working with ReCAPTCHA Enterprise or v3

Installation

Make sure to install it using npm or yarn.

# npm
npm i adonis-recaptcha2
node ace configure adonis-recaptcha2

# yarn
yarn add adonis-recaptcha2
node ace configure adonis-recaptcha2

How to use

Step 1: Get secret and site keys

You need to receive your siteKey and secretKey for your domain from Google reCAPTCHA v3 Admin Console

Step 2: Initialization

Make sure to register the provider inside .adonisrc.json file.

{
  "providers": [
    "...other packages",
    "adonis-recaptcha2"
  ] 
}

Add variables to .env file of project.

...
RECAPTCHA_SITE_KEY=YOUR_KEY
RECAPTCHA_SECRET_KEY=YOUR_KEY

Add fields to env.ts file of project.

import Env from '@ioc:Adonis/Core/Env'

export default Env.rules({
  // ...
  RECAPTCHA_SITE_KEY: Env.schema.string(),
  RECAPTCHA_SECRET_KEY: Env.schema.string(),
})

Set options in config/recaptcha.ts.

import Env from '@ioc:Adonis/Core/Env'
import { RecaptchaConfig } from '@ioc:Adonis/Addons/Recaptcha2'

const recaptchaConfig: RecaptchaConfig = {
  // ...
  siteKey: Env.get('RECAPTCHA_SITE_KEY'),
  // ...
  secretKey: Env.get('RECAPTCHA_SECRET_KEY'),
}
export default recaptchaConfig

Step 3: Add named middleware to `start/kernel.ts`

Server.middleware.registerNamed({
  recaptcha: () => import('App/Middleware/Recaptcha')
})

Step 4: Add middleware for `start/routes.ts`

Example:

Route.post('login', 'AuthController.login').middleware('recaptcha')

This middleware will check g-recaptcha-response field in body request

{
  "login": "admin",
  "password": "admin",
  "g-recaptcha-response": "osjoiadjaoisdjasijda..."
}

Field g-recaptcha-response it is Google reCAPTCHA v2 response

Use in Views

Note: Required View (@adonisjs/view)

Step 1: Enable `views` in `config/recaptcha.ts`

const recaptchaConfig: RecaptchaConfig = {
  // ... 
  views: true
}

Step 2: Use `recaptcha()` function in templates

...
<head>
  ...
  {{ recaptcha('script') }}
</head>
<body>
  <section>
    ...
    <form action="/login">
      ...
      {{ recaptcha('form') }}
    </form>
  </section>
</body>
</html>