Next.js Discord

Discord Forum

Recaptcha giving the error

Unanswered
Muhammed Khal posted this in #help-forum
Open in Discord
I am using react-google-recaptcha on my nextjs app and it's deployed on aws but it's giving the error the code is below

import axios from "axios";

export async function verifyCaptcha(token: string | null) {
    const res = await axios.post(
        `https://www.google.com/recaptcha/api/siteverify?secret=${process.env.NEXT_PUBLIC_RECAPTCHA_SECRET_KEY}&response=${token}`,
    );
    if (res.data.success) {
        return true;
    } else {
        throw new Error("Failed Captcha");
    }
}

"use client";

// eslint-disable-next-line import/no-named-as-default
import ReCAPTCHA, { type ReCAPTCHAProps } from "react-google-recaptcha";
import { verifyCaptcha } from "@/lib/captcha";

type Props = {
    onSuccess: () => void;
    onFail: () => void;
};

export function Captcha({ onSuccess, onFail, ...props }: Omit<ReCAPTCHAProps, "sitekey"> & Props) {
    const handleCaptchaSubmission = async (token: string | null) => {
        // Server function to verify captcha
        await verifyCaptcha(token)
            .then(() => onSuccess())
            .catch(() => onFail());
    };

    return (
        <ReCAPTCHA
            sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY as string}
            onChange={handleCaptchaSubmission}
            {...props}
        />
    );
}

That's the error I am getting, can anyone help me

1 Reply

Turkish Angora
did you solve it ?