Fallback

Implementing an abstract fallback flow with two different reCAPTCHA types (e.g., v3 and v2)

First, we need to initialize the main reCAPTCHA provider component. In these examples, we'll use reCAPTCHA v3 as a starting point for the flow:

import React from 'react';
import { GoogleReCaptchaProvider } from '@google-recaptcha/react';

export const App = () => (
  <GoogleReCaptchaProvider type='v3' siteKey='your_site_key'>
    ...
  </GoogleReCaptchaProvider>
);

In our component, we want to perform verification by sending the reCAPTCHA token to our backend API.

import React from "react";
import {  } from "@google-recaptcha/react";

const  = () => {
  const  = ();

  const  = async () => {
    if (!.) {
      .("Execute recaptcha not available");
      return;
    }

    const  = await .("action");
  };

  return < ={}>verify</>;
};

After receiving the token, call your backend validation; if it fails, you can trigger another reCAPTCHA version with its own siteKey.

import React from "react";
import {  } from "@siberiacancode/reactuse"; 
import { ,  } from "@google-recaptcha/react"; 

const  = () => {
  const  = ();
  const  = (); 

  const  = async () => {
    if (!.) {
      .("Execute recaptcha not available");
      return;
    }

    try {
      const  = await .("action");
      // your request with token
      const  = await ("/api/verify", {
        : "POST",
        : .({  })
      });
      // ...
    } catch {
      .();
    }
  };

  return (
    <>
      < ={}>verify</>
      {. && (
        <
          ={() => .()}
        />
      )}
    </>
  );
};