Implementing Firebase AppCheck for REACT Web

Question

I am trying to implement Firebase AppCheck feature for my React web application. I registered for reCaptchav3 but it doesn't seem to be working. I followed the sample on Firebase AppCheck Documentation, not sure what is wrong. Anyone knows what to do?

firebase.js (my firebase config file)

import firebase from "firebase/compat/app";
import "firebase/compat/auth"
import "firebase/compat/firestore"
import "firebase/compat/storage"
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check"

const app = firebase.initializeApp({
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID
})

const appCheck = initializeAppCheck(app, {
    provider: new ReCaptchaV3Provider(process.env.REACT_APP_APP_CHECK_RECAPTCHA_SITEKEY),
    isTokenAutoRefreshEnabled: true
});
const firestore = app.firestore();
export const database = {
    usersRef: firestore.collection('user'),
    portfolioRef: firestore.collection('portfolio'),
    projectTitleRef: firestore.collection('projectTitle'),
    audioRef: firestore.collection('audio'),
    videoRef: firestore.collection('video'),
    imageRef: firestore.collection('image'),
    ascensionRef: firestore.collection('ascensionNumber')
};
export const storage = app.storage("gs://sftc-development.appspot.com");
export const auth = app.auth();
export default app;

and here is the error I am getting

Hasen

Answer 1

A solution that worked for me with firebase: 9.8.4

1. Go to Firebase How To Setup App Check
2. After doing your setup of firebase -> Register your site for reCAPTCHA v3 and get your reCAPTCHA v3 site key and secret key

• The site key goes to your code config (React part) / Secret key goes to firebase

secret_key_in_firebase site_key_in_code_config

4. Build and deploy
5. For the development environment you need debug token. Get it by following the steps here and add it to the code config (React part):

step 1 step 2

Finally, the code should look something like this:

    if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
        window.FIREBASE_APPCHECK_DEBUG_TOKEN = 'your_debug_token';
    }
    
    const appCheck = initializeAppCheck(app, {
        provider: new ReCaptchaV3Provider('your_site_key_from_register'),
    
        // Optional argument. If true, the SDK automatically refreshes App Check
        // tokens as needed.
        isTokenAutoRefreshEnabled: true
    });

Klusek