App Check

App Check verifies that requests to Firebase services originate from your legitimate app, protecting against unauthorized access and abuse.

Setup via <FirebaseApp>

The recommended approach is to pass appCheckOptions directly to the <FirebaseApp> component:

src/routes/+layout.svelte

<script lang="ts">
  import { FirebaseApp, ReCaptchaEnterpriseProvider } from 'svelte-firekit';
  import { firebaseConfig } from '$lib/firebase';

  let { children } = $props();
</script>

<FirebaseApp
  config={firebaseConfig}
  appCheckOptions={{
    provider: new ReCaptchaEnterpriseProvider('YOUR_RECAPTCHA_ENTERPRISE_SITE_KEY'),
    isTokenAutoRefreshEnabled: true,
  }}
>
  {@render children()}
</FirebaseApp>

Provider options

svelte-firekit re-exports all three Firebase App Check providers:

Provider	Import	Use case
ReCaptchaV3Provider	from 'svelte-firekit'	reCAPTCHA v3 (standard)
ReCaptchaEnterpriseProvider	from 'svelte-firekit'	reCAPTCHA Enterprise (recommended for production)
CustomProvider	from 'svelte-firekit'	Custom token provider for native apps or custom logic

reCAPTCHA v3

<script lang="ts">
  import { FirebaseApp, ReCaptchaV3Provider } from 'svelte-firekit';
</script>

<FirebaseApp
  {config}
  appCheckOptions={{
    provider: new ReCaptchaV3Provider('YOUR_RECAPTCHA_V3_SITE_KEY'),
    isTokenAutoRefreshEnabled: true,
  }}
>
  {@render children()}
</FirebaseApp>

Custom provider

import { CustomProvider } from 'svelte-firekit';

const provider = new CustomProvider({
  getToken: async () => {
    // Fetch a token from your own backend
    const res = await fetch('/api/app-check-token');
    const { token, expireTimeMillis } = await res.json();
    return { token, expireTimeMillis };
  },
});

Manual initialization

If you need programmatic control, use firekitAppCheck directly:

import { firekitAppCheck, ReCaptchaEnterpriseProvider } from 'svelte-firekit';

firekitAppCheck.initialize({
  provider: new ReCaptchaEnterpriseProvider('YOUR_SITE_KEY'),
  isTokenAutoRefreshEnabled: true,
});

Get the current token

const tokenResult = await firekitAppCheck.getToken();
console.log(tokenResult.token);

Force token refresh

const tokenResult = await firekitAppCheck.getToken(/* forceRefresh */ true);

Debug mode

During local development, Firebase App Check supports a debug token that bypasses attestation:

// Set before initializing — only in development
if (import.meta.env.DEV) {
  // @ts-ignore
  self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

Firebase will log a debug token to the console. Add it to your Firebase project in the App Check settings.