1

I'm trying to configure AppCheck in my web app (using SvelteKit).

I've registered my web app with recaptcha and then Added this basic code:

        onMount(async () => {

            const appCheck =  initializeAppCheck(app, {
        provider: new ReCaptchaV3Provider('my-key'),
        isTokenAutoRefreshEnabled: true
            
    })
})

But it fails with 400 error. Those occur because the POST request has 'unknown' where the Recaptcha (and firebase collection) should be.

POST URL: https://content-firebaseappcheck.googleapis.com/v1/projects/undefined/apps/undefined:exchangeRecaptchaV3Token?key=undefined

Why does it happen? how can I fix it?

*The only similar case is here, but it has no solution, and might not be the same.

yuvala
  • 31
  • 4

2 Answers2

0

SOLVED: The request was malformed due to mistaken firebaseConfig data.

yuvala
  • 31
  • 4
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 15 '23 at 23:10
  • @yuvala What about the firebaseConfig data const was mistaken? I'm experiencing the same issue... – obevan Feb 23 '23 at 19:40
  • I've resolved it, see answer below – obevan Feb 23 '23 at 20:35
0

Make sure your firebaseConfig object has all the details as specified in the Firebase console under the app.

Then do the following

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
  
// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
const appCheck = initializeAppCheck(firebaseApp, {
  provider: new ReCaptchaV3Provider('your_key'),

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  isTokenAutoRefreshEnabled: true
});

And make sure your imports look like this

import { initializeApp } from "firebase/app";
import { initializeAppCheck, ReCaptchaV3Provider } from 'firebase/app-check';

The issue I think is due to the Firebase AppCheck guide specifying using

const app = initializeApp({
  // Your firebase configuration object
});

Removing the {} prevents the issue and the app config data can be properly accessed buy the initializeAppCheck method.

Hope this helps!

obevan
  • 104
  • 7