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.
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>
)
}