1

In order to secure my website, I try to link my web Flutter App and my Firebase backend to App Check.

I created a reCAPTCHA v3 which provides me two keys :

  • website key (public)
  • secret key

For linked it to my project, I use the following code :

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.web,
  );
  await FirebaseAppCheck.instance.activate(
    webRecaptchaSiteKey: 'website key (public)',  
  );

  runApp(MultiProvider(
    providers: [
      ChangeNotifierProvider(create: (context) => ContentView()),
      ChangeNotifierProvider(create: (context) => AuthBase()),
      ChangeNotifierProvider(create: (context) => TopCollaboratorsProvider()),
    ],
        child: const MyApp(),
      ));
    }

Then on the Firebase console, I put the secret key.

However, when I try to build my web app online either on Firebase Hosting or on another hosting solution, my screen is completely white and my app is not loading.

On the web emulator, everything is ok, my app is loading correctly.

Am I doing something wrong ?

Thank you for your help

2 Answers2

1
  1. You should have a firebase_core plugin
  2. Copy the config(CDN) found in firebase/project overview/project settings then paste it as a script in index.html in yourproject/web/index.html

lastly in firebase init hosting makesure you put build/web as your file not public.

0

I was facing the same issue,

  1. register here to get site and secret key https://www.google.com/recaptcha/admin/create

  2. in firebase, go to app check, click on register , enter secret key here

  3. in your project add this package - firebase_app_check

  4. add this in main function below firebase options and before run app

    await FirebaseAppCheck.instance.activate( webRecaptchaSiteKey: '// your reCAPTCHA site key here');

then build and deploy, if you see white blank screen then just flutter clean and then rebuild you project