How do I enable reCAPTCHA v3 app check in my web app?

Question

I want to enable reCAPTCHA v3 app check in my web project. These are the steps I've followed:

Firstly, I got my private and public reCAPTCHA v3 keys from the official admin site.
These are the imports I had added in my html page, after that:

    <script src="https://www.gstatic.com/firebasejs/9.10.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.10.0/firebase-database-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.10.0/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.10.0/firebase-app-check-compat.js"></script>

This is my javascript code:

const firebaseConfig = {
  apiKey: "my_key_here",
  authDomain: "my_domain_here",
  projectId: "project_id",
  storageBucket: "storage_bucket",
  messagingSenderId: "sender_id",
  databaseURL: "db_url",
  appId: "app_id"
};

firebase.initializeApp(firebaseConfig);

document.getElementById("login").addEventListener("click",function(event){
    event.preventDefault();
    firebase.initializeAppCheck(firebase.initializeApp(firebaseConfig),{     
        provider: new ReCaptchaV3Provider('my_reCAPTCHAv3_public_key_here'),
        isTokenAutoRefreshEnabled: true
    });

    //If the response is a success, I want the user to be able to access the firebase services.
    //How do I ensure that?
})

Sorry I am new to firebase, so I am asking this silly question. How do I ensure that a legit user is trying to access my firebase services? Also I keep getting this error:

Uncaught (in promise) ReferenceError: ReCaptchaV3Provider is not defined

Please guide me on this.

How do I enable reCAPTCHA v3 app check in my web app?

0 Answers0