DEV Community: vatana7

Implementing Recaptcha V3 on Flutter | Flutter Recaptcha V3

vatana7 — Thu, 18 Sep 2025 16:12:29 +0000

Implementing Google reCAPTCHA v3 in Flutter (Mobile)

I spent hours debugging and researching, only to find the solution was much simpler than I thought. To save you the headache, here’s a step-by-step guide on how to integrate Google reCAPTCHA v3 into a Flutter mobile application.

Prerequisites

A site key from your backend (ask your backend dev or generate one yourself in the reCAPTCHA admin console).
Clarify with your backend whether you’re using Enterprise or Standard (v2/v3) reCAPTCHA.

Choosing the Right Package

Enterprise reCAPTCHA → use recaptcha_enterprise_flutter.
Standard v2/v3 reCAPTCHA → use flutter_gcaptcha_v3.

This tutorial focuses on Standard v3.

Why You Need a Hosted HTML

Unlike browsers, Flutter apps don’t have a domain. If you try to run reCAPTCHA directly inside a WebView, the domain becomes about:blank, which Google doesn’t accept.

The trick:

Host a simple HTML file that loads reCAPTCHA and generates a token.
Load that HTML inside Flutter’s WebView.
Pass the generated token back into Flutter.

👉 You can self-host this HTML template or use the demo page at https://emerald-eran-52.tiiny.site.
I recommend self-hosting so you’re not dependent on a third-party site.

⚠️ Don’t forget to whitelist your hosted domain in the Google reCAPTCHA admin console, otherwise tokens will always be invalid.

Step 1: Initialize Your Site Key

Place this in your app initialization (e.g. main.dart):

RecaptchaHandler.instance.setupSiteKey(
  dataSiteKey: AppConstants.dataSiteKey,
);

Step 2: Add the Hidden WebView

In your widget tree, include a hidden ReCaptchaWebView that points to your hosted HTML:

SizedBox(
  width: 1,
  height: 1,
  child: Opacity(
    opacity: 0.01, // don’t set 0 (may cull rendering)
    child: IgnorePointer(
      ignoring: true,
      child: ReCaptchaWebView(
        width: 1,
        height: 1,
        url: selfHostedRecaptchaHtml, // e.g. https://yourdomain.com/recaptcha.html
        onTokenReceived: _onTokenReceived,
      ),
    ),
  ),
);

Handle tokens like this:

void _onTokenReceived(String token) {
  // Do something with the token (e.g. send to backend)
  print("Got reCAPTCHA token: $token");
}

Step 3: Trigger reCAPTCHA Execution

Whenever you need a fresh token (e.g. on registration, OTP, etc.), call:

RecaptchaHandler.executeV3(action: 'register');

This triggers grecaptcha.execute() inside your hosted HTML, which passes the token back to Flutter via the WebView → _onTokenReceived.

Wrap-Up

And that’s it — your Flutter app can now generate Google reCAPTCHA v3 tokens!

✅ Key takeaways:

Know if your backend is Enterprise or Standard.
Always whitelist your HTML domain in Google’s console.
Self-host the HTML for reliability.

With this setup, you’ll have a secure and smooth reCAPTCHA v3 flow running natively in your Flutter mobile app.

Fixing Aapt2Exception: RES_TABLE_TYPE_TYPE entry offsets overlap actual entry data on Android 35

vatana7 — Mon, 08 Sep 2025 07:22:31 +0000

I spent 5 hours scratching my head over this error:

Caused by: com.android.builder.internal.aapt.v2.Aapt2Exception: Android resource linking failed  
aapt2 E LoadedArsc.cpp:94] RES_TABLE_TYPE_TYPE entry offsets overlap actual entry data.  
aapt2 E ApkAssets.cpp:149] Failed to load resources table in APK '/Users/xxx/Library/Android/sdk/platforms/android-35/android.jar'.  
error: failed to load include path /Users/xxx/Library/Android/sdk/platforms/android-35/android.jar.

Even “vibe coding” couldn’t save me 😅, so I dug through StackOverflow and finally found a fix. Sharing it here to save you the pain.

Why this happens

Android SDK 35 ships a different android.jar. Older Gradle/AGP versions can’t parse it properly with the bundled aapt2, so resource linking fails.

The Fix

Open your gradle.properties in the Flutter project root.

Add the following line (replace /Users/xxx with your SDK path):

android.aapt2FromMavenOverride=/Users/xxx/Library/Android/sdk/build-tools/35.0.0/aapt2

Clean and rebuild:

Then you simply run the application on your app and try to rebuild again

🎉 That’s it! After adding this, my Flutter app built successfully again on Android 35.

If you hit this error, give it a try. And if you discover another workaround, share it below so others can benefit!

The Unexpected Struggle of Implementing Custom CAPTCHA on Linux

vatana7 — Thu, 06 Feb 2025 04:51:40 +0000

Last week, my boss assigned me a seemingly simple task: implement custom CAPTCHA validation for our internal Sales Portal login page. He specifically requested that we avoid Google’s ReCAPTCHA due to regional policies (or whatever reason he had). The requirements were straightforward:

Display a 300px × 76px CAPTCHA image with random text and distortion.

Choosing the Right CAPTCHA Solution

I immediately jumped into research mode, looking for a solution. After some time, I stumbled upon CaptchaGen, a handy NuGet package that could generate distorted text images with minimal effort. It seemed like the perfect fit!

I quickly implemented it, ran some tests locally, and deployed it to our SIT (System Integration Testing) environment. Everything seemed fine—until I actually tried to use it.

The First Unexpected Issue: 401 Unauthorized

The first thing I noticed after deployment was that calling the CAPTCHA generation endpoint returned a 401 Unauthorized error.

Confused, I double-checked my controller—there was no [Authorize] attribute anywhere. So why was it rejecting unauthenticated requests?

After digging through the Jenkins logs, I found the real culprit:

The Hidden Dependency on `System.Drawing`

Turns out, CaptchaGen relies on System.Drawing, a package that is not supported on Linux—which was a problem because our AKS (Azure Kubernetes Service) environment runs on Linux containers.

Microsoft officially recommends avoiding System.Drawing in non-Windows environments starting from .NET 6 because it depends on GDI+, which is Windows-specific.

Switching to a Linux-Friendly Alternative

With that in mind, I had to look for an alternative. After some research, I found ImageSharp by SixLabors—a powerful image processing library that works across different platforms without relying on System.Drawing.

I refactored my implementation using ImageSharp, deployed it, and… hit another frustrating issue.

The Second Issue: Missing Arial Font on Linux

This time, the error said:

CreateFont() cannot find Arial font on the system.

My first reaction? Huh? Why wouldn’t Arial exist?

In my mind, Arial is a universal font—it should be available everywhere, right? Well, turns out, Linux doesn’t come with Arial pre-installed.

Here’s the problematic code:

ctx.DrawText(code, SystemFonts.CreateFont("Arial", fontSize), Color.Gray, new PointF(80, 20));

Since Linux lacks Arial by default, SystemFonts.CreateFont("Arial", fontSize) simply failed to find the font, causing the error.

I tried manually installing Arial on AKS, but no luck. After hours of troubleshooting and frustration, I almost gave up—until I stumbled upon the missing piece of the puzzle.

The Solution: Embedding the Font in the Project

The problem was that I was using SystemFonts instead of loading a custom font file. The solution? Embed the Arial font inside the project** and load it manually.

Following this official documentation, I fixed my code by explicitly loading the font from a file:

var fontCollection = new FontCollection();
var fontFamily = fontCollection.Add("path/to/arial.ttf");
var font = fontFamily.CreateFont(fontSize);
ctx.DrawText(code, font, Color.Gray, new PointF(80, 20));

With this approach, the CAPTCHA finally worked flawlessly. 🎉

Lessons Learned

This seemingly simple task turned into an unexpected debugging marathon. But I walked away with a few valuable lessons:

Read the documentation carefully.* I wasted time due to my rookie mistake of overlooking compatibility issues.
Linux-based environments handle fonts differently. Never assume a font exists—always package the required font with your app if you need it.
Avoid System.Drawing in non-Windows environments. Libraries like ImageSharp are much safer and more portable.

At the end of the day, I got CAPTCHA working—but not without a battle. Hopefully, this post saves someone else the same headache. 😉

A timezone problem on react-native-paper-date (1day-off)

vatana7 — Mon, 15 Jul 2024 15:09:17 +0000

Today problem is that I encountered an issue while using react-native-paper-dates and the weekdays appear on the Calendar Modal was not correct. It was off by 1 day, for example today is 15th July 2024 and the 15th was supposed to appear on Monday column but instead it was on the Sunday column instead.

Eventually I figure out that the problem had something to do with Intl.DateTimeFormat because I’ve tried running the below code on 2 environment; mine and a Javascript runtime on Mozilla.dev (I know it’s so silly but I tried lol).

console.log(Intl.DateTimeFormat().resolvedOptions().timeZone);
//"UTC" on my local development env
//"Asia/Phnom_Penh" on Mozilla.dev

Now I got my clue, so I whine to my co-worker and he mentioned that Javascript’s Intl isn’t stable for our app. So he sent me this formatjs link here that mentioned Javascript’s Engine does not expose default timezone so there’s no way to get default timezone from it; and our React native app is using Hermes Engine, which I assume it doesn’t expose anything about timezone to Javascript’s Intl so that’s why it always default to “UTC” when I try to run console.log(Intl.DateTimeFormat().resolvedOptions().timeZone) .

Now that I got my answer; I simply try the code below and the issue is resolved. By having a proper timezone, the weekdays are now correct on every column on the Calendar Modal.

import '@formatjs/intl-datetimeformat/polyfill'
import '@formatjs/intl-datetimeformat/add-all-tz.js'

//If this statement doesn't work, use expo-localization's getCalendar()
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone

if ('__setDefaultTimeZone' in Intl.DateTimeFormat) {
  Intl.DateTimeFormat.__setDefaultTimeZone('America/Los_Angeles')
}

//For my case, I have to use expo-localization
const timezone = Localization.getCalendars()[0].timezone

how to remove .DS_Store from repository

vatana7 — Fri, 29 Mar 2024 08:06:48 +0000

Introduction

Just as you know if you develop your application on MacOS, at one point you will accidentally add this annoying file into your Github repository.

To get rid of it just head onto your repository using any terminal and then run below command:

find . -name .DS_Store -print0 | xargs -0 git rm -f --ignore-unmatch

After this, make sure you git ammend the last commit and git push --force to remove .DS_Store successfully.

PostgreSQL setup via homebrew for junior devs

vatana7 — Wed, 27 Mar 2024 04:54:49 +0000

Introduction

No need to stress it out if you are trying to set up PostgreSQL on your machine. Just simply follow this guide, you'll be ready in no time.

This guide assumed that you have homebrew installed already in your terminal. So if you don't please install it and come back to this guide.

Getting PostgreSQL

Run brew install PostgreSQL then wait for it to finish.

Make sure that you restart your terminal

Running PostgreSQL in background

Run brew services start PostgreSQL to start PostgreSQL service.
You only have to run this once because now PostgreSQL will boot up every time you turn on your laptop.

Create a database and a superuser

To create database, run createdb dbname.
To create a superuser, run createuser -s postgres. Here -s flag indicate that we're create a superuser. postgres is the name that we're giving to the user.

Accessing PostgreSQL

Run psql -U postgres in your terminal to interact with PostgreSQL. Here -U postgres indicate that we're interacting as User with the name postgres that we have just created with superuser role.

Start interacting with PostgreSQL

Run \l to list all database or \du to list all users. To quit PostgreSQL interactive mode simly run \q.

That's it folks, thank you for reading my post!

react-native-collapsable-tab-view onScroll not working

vatana7 — Mon, 25 Mar 2024 08:30:10 +0000

I've been working on a React Native project for about six months. Despite this time, I'm continuously learning and encountering new challenges, underscoring that there's always more to master

One problem I encountered was a bug in the react-native-collapsible-tab-view package, specifically related to callback props like onScroll, onScrollEndDrag, among others

Initially I tried to extract the nativeEvent from onScrollEndDrag inside <Tabs.ScrollView onScrollEndDrag={callback} /> but it return nothing and I tried everything but I didn't seem to work.

Solution 1

By using usCurrentTabScrollY() directly from the package and useAnimatedReaction from react-native-animated, you can extract the onScroll's native event value from it by following below code. P.S: This approach only work if you are using that hook separately in a standalone component and it's wrapped by <Tabs.Container> from react-native-collapsable-tab-view package.

  const scrollY = useCurrentTabScrollY();

  //Function to extra 
  const scrollHandler = useCallback((value) => {
    //Execute statement with scrollEvent value here
  }, []);

  useAnimatedReaction(
    () => scrollY.value,
    (y) => {
      runOnJS(scrollHandler)(y);
    },
    [],
  );

Solution 2

Finally, I decided to assign an empty function () => {} to onScroll. After this adjustment, I found that only onScrollEndDrag callbacks inside <Tabs.ScrollView /> work and it started to return nativeEvent as expected and functioned properly.

I hope my experience can offer some guidance. Thank you for reading

Opensource NextJS Project | Great For Beginner!

vatana7 — Fri, 18 Aug 2023 02:55:00 +0000

Introduction

Recently I have created an open source project that implemented the latest cutting edge technology and packages in order to make myself learn and expand my knowledge overall.

I am super excited to share this projects with all the people that have started their programming journey.

Here is the project:

Project

Be sure to check it out guys! Thanks

Improving Serverless Function response time on Vercel

vatana7 — Thu, 17 Aug 2023 07:47:02 +0000

Introduction & Problem

So I have built a side project in my free time to expand my knowledge on NextJs, the problem that I have found is that when I navigate to my website the first time, I have noticed that the loading time to load data from MongoDB was incredibly slow. Knowing that MongoDb query is fast, I understand that the problem itself was not with MongoDB but it definitely has something to do from my side of development.

The Reason

There is a guide on Vercel's webpage explaining why the initial load take time ranging from under 100ms to over 1 seconds because of the fact that every time you load your webpage that isn't visited often (no traffic, only visit by you), your serverless function cease to exist and has to be newly created every time you visit the webpage once in a while.

This process also known as (Cold Boot). Any subsequence request after the Cold Boot are going to be much faster and quicker.

As you can see in the diagram, the first two step (Cold Boot) will involve taking time to firing up at the cost of delayed response.

Solutions

So what should be the solution to the problem? Well the first answer should be obvious to you already.

Your webpage should have moderate traffic to keep the serverless function alive and avoid Cold Boot
Another solution to change the region that is used to deploy your serverless function in near your database region. In default deployment, your serverless function is deployed in iad1 which is US, Washington DC.

So in this case, for example if I have my MongoDb instance deployed at Singapore I wouldn't want my serverless function to be deployed at US, the answer should be obvious, of course it has to be the same as Singapore too.

Another available solution which is newly introduced into the world of Web Development is Vercel's Edge Runtime. They claimed that it's very fast in the Response time department. I have tried to connect to MongoDB with Edge Runtime but because my app use MongoDB and Mongoose doesn't support Edge yet I have to rely on the region solution as of now.

I hope you learn something new from this article and thank you for reading.

How to send Email In SpringBoot | SpringBoot Tutorial

vatana7 — Fri, 09 Jun 2023 07:20:20 +0000

This is a latest guide on how to send Email in your SpringBoot Application. Simply follow these steps to make your Spring Application be able to send Email.

Step 1: Add Project Dependency

<dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-mail</artifactId>
</dependency>

Step 2: Set up App Password inside your Google Account

Go to (Google Account)[https://myaccount.google.com]
On Search Bar, search for App Passwords then you should see App Passwords with Security under it
Under Select App, find Other (Custom Name), input your desired name then click Generate
Copy the password we will use it later

Step 3: Set up Application.properties

spring.mail.username=youremail@gmail.com
spring.mail.properties.mail.smtp.starttls.required=true
spring.mail.host=smtp.gmail.com
spring.mail.port=587
spring.mail.password=Copied Password From App Password
spring.mail.properties.mail.smtp.auth=true
spring.mail.properties.mail.transport.protocol=smtp
spring.mail.properties.mail.smtp.starttls.enable=true

Step 4: Configure Bean for JavaMailSender

@Configuration
public class MailConfiguration {

    @Bean
    public JavaMailSender getJavaMailSender() {
        JavaMailSenderImpl mailSender = new JavaMailSenderImpl();
        mailSender.setHost("smtp.gmail.com");
        mailSender.setPort(587);

        mailSender.setUsername("your@gmail.com");
        mailSender.setPassword("copiedPassword");

        Properties props = mailSender.getJavaMailProperties();
        props.put("mail.transport.protocol", "smtp");
        props.put("mail.smtp.auth", "true");
        props.put("mail.smtp.starttls.enable", "true");
        props.put("mail.debug", "true");

        return mailSender;
    }
}

Step 5: Implement MailSenderService

@Service
public class MailSenderService {
    @Autowired
    private JavaMailSender mailSender;

    public void sendNewMail(String to, String subject, String body) {
        SimpleMailMessage message = new SimpleMailMessage();
        message.setTo(to);
        message.setSubject(subject);
        message.setText(body);
        mailSender.send(message);
    }
}

Step 6: Start sending email

private final MailSenderService mailService;

public void Foo(){
 mailService.sendNewMail("test@gmail.com", "Subject right here", "Body right there!")
}

I hope this guide will help you. Thanks for reading!

Localhost:5000 Access Denied on MacOS | How do you fix it?

vatana7 — Fri, 09 Jun 2023 06:49:43 +0000

In order to fix above issue, you simply have to turn off Airplay Receiver inside your macBook's System Preference.

It turns out that Airplay Receiver is using Port 5000 for whatever reason it has. I hope this will fix your current issue.

Thanks!

How to fix IntelliJ debugger trigger breakpoint only once until restart Server/Application

vatana7 — Sun, 28 May 2023 09:27:49 +0000

Problem:

I would say I debug a lot of the time but I am not really an expert on how to use the debugger tool to its full potential so there's some knowledge limitation to how I can use the debugger.

I was developing Java application and I used Jboss EAP for web server for my Java application to run but as I debug the application I always finish the debug by using the Run to caret position button and the breakpoint was never trigger ever again until I restart the server.

Solution to the problem:

This is my current version of IntelliJ Idea:

IntelliJ IDEA 2022.3.3 (Ultimate Edition)
Build #IU-223.8836.41, built on March 10, 2023
Runtime version: 17.0.6+1-b653.34 aarch64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
macOS 13.4
Kotlin: 223-1.8.0-release-345-IJ8836.41

For you to hit the breakpoint as many time as you want, you would have to click on Resume Program Execution after your debug session. (Red Circle)

If you click on Run to where caret is, the debugger won't be able to re-hit the breakpoint again until you restart your server or application. (Red Circle)

Hope this help

DEV Community: vatana7

Implementing Recaptcha V3 on Flutter | Flutter Recaptcha V3

Implementing Google reCAPTCHA v3 in Flutter (Mobile)

Prerequisites

Choosing the Right Package

Why You Need a Hosted HTML

Step 1: Initialize Your Site Key

Step 2: Add the Hidden WebView

Step 3: Trigger reCAPTCHA Execution

Wrap-Up

Fixing Aapt2Exception: RES_TABLE_TYPE_TYPE entry offsets overlap actual entry data on Android 35

The Unexpected Struggle of Implementing Custom CAPTCHA on Linux

Choosing the Right CAPTCHA Solution

The First Unexpected Issue: 401 Unauthorized

The Hidden Dependency on System.Drawing

Switching to a Linux-Friendly Alternative

The Second Issue: Missing Arial Font on Linux

The Solution: Embedding the Font in the Project

Lessons Learned

A timezone problem on react-native-paper-date (1day-off)

how to remove .DS_Store from repository

Introduction

PostgreSQL setup via homebrew for junior devs

Introduction

Getting PostgreSQL

Running PostgreSQL in background

Create a database and a superuser

Accessing PostgreSQL

Start interacting with PostgreSQL

react-native-collapsable-tab-view onScroll not working

Solution 1

Solution 2

Opensource NextJS Project | Great For Beginner!

Introduction

Improving Serverless Function response time on Vercel

Introduction & Problem

The Reason

Solutions

How to send Email In SpringBoot | SpringBoot Tutorial

Step 1: Add Project Dependency

Step 2: Set up App Password inside your Google Account

Step 3: Set up Application.properties

Step 4: Configure Bean for JavaMailSender

Step 5: Implement MailSenderService

Step 6: Start sending email

Localhost:5000 Access Denied on MacOS | How do you fix it?

How to fix IntelliJ debugger trigger breakpoint only once until restart Server/Application

Problem:

Solution to the problem:

The Hidden Dependency on `System.Drawing`