2 years ago

#65673

test-img

PleaseDontHurtMe

Next Js Firebase Recaptcha V3 verification

I'm very confused about the Recaptcha V3 implementation and it is not clear to me if actually need to implement it on my website or if initializing Appcheck with my Recaptcha V3 credentials is enough: Appcheck does successfully initialize and I have enforced firestore and the cloud storage to use it.

I don't want bots to create infinite accounts on my website and raise like crazy my costs so I looked into implementing Recaptcha on forms: the developer documentation is a joke (https://developers.google.com/recaptcha/docs/v3) as it is not explained how to verify the token which is returned I saw an old article from 2017 telling you to use Cloud Functions (which may take up to 10-12 seconds to fire up in case of cold-start) but this sounds really far-fetched and 5 years later I hope we have a better solution: https://firebase.googleblog.com/2017/08/guard-your-web-content-from-abuse-with.html

Am I overthinking this? Would Appcheck protect my app from people abusing my contact form and sign up section? If this is not enough, how can I implement Recaptcha V3 with React and Firebase?

I am using Next JS and so far my code looks something like this (where I replaced my publishable key "mySyteKey"):

import Script from "next/script";

export default function TestRecaptcha() {
    
   const handleSubmit = (e) => {
       e.preventDefault();
       grecaptcha.ready(function () {
           grecaptcha.execute('mySiteKey', {action: 'submit'}).then(function (token) {
               
               // How the hell do I verify this token!?
               
               console.log(token)
           }), error =>{
               console.log(error.message)
           }
       });
   }
   
    return (
        <div>
            <Script src="https://www.google.com/recaptcha/api.js?render=mySiteKey"
                    strategy="beforeInteractive"/>
            <form onSubmit={(e) => handleSubmit(e)}>
                <button
                    type="submit">
                    Submit
                </button>
            </form>
        </div>
    )
}

reactjs

firebase

next.js

recaptcha-v3

firebase-app-check

0 Answers

Your Answer

Accepted video resources