Rushikesh Kasture
Rushikesh Kasture

Reputation: 11

Can we customize the default styles for google reCAPTCHA error message/expiration messages?

I was facing issue in customizing the google reCAPTCHA error message style Styles. Please follow below description:

I am using the "react-google-recaptcha" npm library to integrate the reCAPTCHA on frontend side for the user validation at the time of login. But the requirement is of customizing the default behavior of the appearances of the error messages or expiration messages

It is version2 with checkbox enter image description here

Custom message requirement(The default message I want to remove) enter image description here

Refer code below:

"use client";
import { useState } from "react";
import ReCAPTCHA from "react-google-recaptcha";


export default function Captcha() {
    const recaptcha_site_key: string = process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!;
    const [recaptcha, setRecaptcha] = useState<string | undefined>();
    const [recaptchaLoaded, setRecaptchaLoaded] = useState(false);
    const [recaptchaErrorMessage, setRecaptchaErrorMessage] = useState<string | null>(null);

    const handleChange = (token: string | null) => {
        if (token) {
            setRecaptcha(token);
            console.log(token)
        } else {
            setRecaptcha(undefined);
        }
    };
    const handleExpired = () => {
        setRecaptcha(undefined);
        setRecaptchaErrorMessage("Your session has expired. Please verify again.");
    };

    const handleLoaded = () => {
        setRecaptchaLoaded(true);
    };

    const handleErrored = () => {
        setRecaptchaErrorMessage("Failed to load reCAPTCHA. Please try refreshing the page.");
    };

    return (
        <div className= "relative flex w-full flex-col items-center justify-center" >
        <ReCAPTCHA
                sitekey={ recaptcha_site_key }
    onChange = { handleChange }
    onExpired = { handleExpired }
    asyncScriptOnLoad = { handleLoaded }
    onErrored = { handleErrored }
        />
        { recaptchaLoaded && recaptchaErrorMessage && (
            <div className="mt-2 rounded px-3 py-1 text-sm text-red-500" >
                { recaptchaErrorMessage }
                </div>
                )
}
</div>
    );
}

As, I am using nextjs version 14, for styles tailwind and https://www.npmjs.com/package/react-google-recaptcha. Do let me know how can we do it, Tried overriding the CSS and using custom messages, but it is not working.

Upvotes: 1

Views: 78

Answers (0)

Related Questions