How to Set Up Firebase App Check in Your Flutter App

[Nikesh]

How to Set Up Firebase App Check in Your Flutter App

If you’re building a Flutter app with Firebase, keeping your backend safe from misuse and unauthorized access is super important. That’s where Firebase App Check comes in. It makes sure only your real app can access your Firebase services. Also, with App-Check it verifies your app is downloaded from legitimate source such as Google PlayStore or AppStore. In this guide, I’ll show you how to set it up step by step.

Set Up Firebase project via CLI if not already(Spoiler)

Spoiler

If you prefer setting up Firebase through the CLI, open terminal in project window and run the following command:
1. Install the Firebase CLI:

npm install -g firebase-tools

2. Log in to your Firebase account:

firebase login

3. Create a new Firebase project:

firebase projects:create your-project-name

That’s it! Your Firebase project is ready to go.

Step 1: Register App Check in Firebase
1. Go to the Firebase Console.
2. Select your project and open App Check.
3. Click Register App and pick your platform (iOS, Android, or Web).
4. For Android or iOS, choose your app and follow the setup steps.
5. Use Play Integrity for Android or DeviceCheck/App Attest for iOS.
6. Finish the registration and grab the configuration details.
7. For all platforms in development, add a debug token in the Firebase Console.

Step 2: Add Dependencies
Open your pubspec.yaml and add these:

dependencies:
  firebase_core: any
  firebase_app_check: any

Then run:

flutter pub get

Step 3: Set Up App Check in Your Code
In your main.dart, initialize Firebase and App Check:

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_app_check/firebase_app_check.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  await FirebaseAppCheck.instance.activate(
    androidProvider: AndroidProvider.playIntegrity,
    appleProvider: AppleProvider.deviceCheck,
    webProvider: ReCaptchaV3Provider('your-site-key'),
    debugProvider: kDebugMode ? DebugProvider() : null,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Firebase App Check')),
        body: Center(child: Text('App Check is up and running!')),
      ),
    );
  }
}

Step 4: Make Sure It’s Working
To check if App Check is working:
1. Go to the Firebase Console.
2. Open App Check and go to the Requests section.
3. If everything’s set up right, you’ll see requests coming in from your app.

Step 5: Enforce App Check (Optional)
Once it’s working, you can lock things down:
1. In the Firebase Console, go to App Check.
2. Pick the service (like Firestore) and click Enforce.

This makes sure only verified requests from your app can reach your Firebase backend.

Additional Setup for Web (Spoiler)

Spoiler

For web, you’ll need to set up ReCAPTCHA:
1. Go to the Firebase Console and select your project.
2. Navigate to App Check and choose your web app.
3. Register your site key and domain.
4. Use the site key in your main.dart:

webProvider: ReCaptchaV3Provider('your-site-key'),

5. Add the following script to your web/index.html for local development:

<script>self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;</script>

6. Make sure your domain is also listed in the Firebase project settings under authorized domains.

Wrapping Up
Setting up Firebase App Check in Flutter adds a solid layer of security to your app. Now you’ve got your Firebase services protected from misuse and unauthorized access. If you run into any snags, check out the Firebase docs or double-check your app’s registration and setup.