How to implemet a reCaptcha on react-native

Question

I'm working on implementing a reCaptcha validator for a login screen on a react-native app which has to work both on web and mobile environments.

As I'm fairly new as a programmer and have little experience on react-native I'm aware that I may have missed something very basic/obvious which is why I've decided to ask this, even though this question has already been asked a couple of times before.

I'm trying this library since it is the most popular one on NPMjs.

On the login screen page I'm calling the component and this is the code I have so far within the component.

import React, { useRef } from 'react';
import { View, Button } from 'react-native';
import Recaptcha, { RecaptchaHandles } from "react-native-recaptcha-that-works";

export const Recaptcha_Component = () => {

    let url = "mySiteUrl";
    let key = "publicKey";

    const recaptcha: any = useRef();

    const send = () => {
        console.log('send!');
        recaptcha.current?.open();
    };

    const onVerify = (token: string) => {
        console.log('success!', token);
    };

    const onExpire = () => {
        console.warn('expired!');
    }

    return (

When I press the Send button in the app I see an small loading indicator but nothing happens after that. On the console I see this warning message.

user_11447048 · Answer

first create recaptcha keys at https://www.google.com/recaptcha/admin/create

then you create an new component like this:

const GetRecaptcha = (props) => {
const onMessage = (data) => {

    console.log('recaptcha', data.nativeEvent.data)
    //here you can put your action to perform(check validation on your server or somthing)
    props.action(data.nativeEvent.data);

};

return 

     await onMessage(e)}
        containerStyle={{height: 0}}
        source={{
            html: `
            
        
        
        
        Title
        
        
        
        
        
        `
        , baseUrl: 'your-url',
    }}/>


;
};

you could use this component from other component as this example:

const action=(token)=>{
   // validate key on server
   if(token){
    //do some action
   }else{
   //do some action
   }
  }
  const App=()=>{
  return 
  }

How to implemet a reCaptcha on react-native

1 Answers