Create Google reCAPTCHA v3 token for Flutter web. Google reCAPTCHA v3 plugin for Flutter. A Google reCAPTCHA is a free service that protects your website from spam and abuse.

Pub MIT License

Web Demo


Step 1

Step 2

  • Add the script inside web/index.html - <head> tag
  • Place it before the main.dart.js script (or) flutter.js script
  <!-- Step 2 -->
  <script src="https://www.google.com/recaptcha/api.js?render=<your Recaptcha v3 site key>"></script>
  <!-- Step 2 End -->
  <script src="flutter.js" defer></script>

Step 3

  • Add g_recaptcha_v3 to pubspec.yaml
  flutter pub add g_recaptcha_v3


1. GRecaptchaV3.ready()

The ready() method should be called before execute()

import 'package:g_recaptcha_v3/g_recaptcha_v3.dart'; //--1

void main() async {
    bool ready = await GRecaptchaV3.ready("<your Recaptcha site key>"); //--2
    print("Is Recaptcha ready? $ready");
  runApp(const MyApp());

2. GRecaptchaV3.execute()

The ready() method should be called before execute()

import 'package:g_recaptcha_v3/g_recaptcha_v3.dart';

void generateToken() async {
  String? token = await GRecaptchaV3.execute('<your_action>'); //--3
  // send token to server and verify
  • String action - used to verify the string in backend. ( action docs )
  • token will be null if the,
    • web setup has any errors.
    • method called from other than web platform.

3. Show / Hide reCaptcha badge

change the reCaptcha badge visibility



You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow.`

Sample Image

alternate way

Read more about hiding in reCaptcha docs

Web Port 80 setup

(for localhost only)

If in case recaptcha script gives you error for port other than port :80, you can use the following code to setup the port.

  flutter run -d chrome --web-port 80


Q: How to hide reCaptcha until / before Flutter render its UI?

A: https://github.com/bharathraj-e/g_recaptcha_v3/issues/3