firebasenext.jsfirebase-app-check

Getting "Component app-check has not been registered yet" when using Firebase with NextJS


I am trying to use Firebase App Check in my NextJS (v13.1.1) website, but when I try to initialize it, I get the following error Error: Component app-check has not been registered yet. I am trying to initialize it in _app.js:

import firebase from '../firebase/clientApp'
const { initializeAppCheck, ReCaptchaV3Provider } = require("firebase/app-check");
import { useEffect } from 'react';

export default function MyApp({ Component, pageProps }) {

  useEffect(() => {

    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;

    const appCheck = initializeAppCheck(firebase, {
      provider: new ReCaptchaV3Provider(process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY),
      isTokenAutoRefreshEnabled: true
    });

  }, []);

  return (
    <main>
      <Component {...pageProps} />
    </main>
  )
}

This is the clientApp.js file, where I initialize the firebase app:

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
};

const app = initializeApp(firebaseConfig);

export default app;

I have taken a look at this: https://stackoverflow.com/a/71101900/12819433, but I do not have duplicate packages. I have firebase and firebase-admin installed, but I need both of them.


Solution

  • Create a separate component for App Check Initalisation:

    import firebase from "../firebase/clientApp";
    import {initializeAppCheck, ReCaptchaV3Provider} from "firebase/app-check";
    import { useEffect } from "react";
    
    export default function InitialiseAppCheck() {
    
        useEffect(() => {
    
            if (process.env.NODE_ENV !== 'production') {
                self.FIREBASE_APPCHECK_DEBUG_TOKEN = process.env.NEXT_PUBLIC_APPCHECK_DEBUG_TOKEN;
            }
            const appCheck = initializeAppCheck(firebase, {
                provider: new ReCaptchaV3Provider(process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY),
                isTokenAutoRefreshEnabled: true
            });
        },[]);
        
        return null;
    }
    

    Load the above component around your main component in _app.js:

    import '../styles/globals.css'
    import InitialiseAppCheck from '../components/InitialiseAppCheck';
    
    export default function MyApp({ Component, pageProps }) {
    
      return (
        <main>
          <InitialiseAppCheck />
          <Component {...pageProps} />
        </main>
      )
    }