FirebaseOptions cannot be null when creating the default app Flutter web

Question

I got the following error:

e Flutter DevTools debugger and profiler on Chrome is available at: http://127.0.0.1:9100?uri=http://127.0.0.1:64886/Uy-qx5WCixA=
Error: Assertion failed: file:///C:/Users/Username/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/firebase_core_web-1.7.1/lib/src/firebase_core_web.dart:207:11
options != null
"FirebaseOptions cannot be null when creating the default app."
    at Object.throw_ [as throw] (http://localhost:64781/dart_sdk.js:5405:11)
    at Object.assertFailed (http://localhost:64781/dart_sdk.js:5327:15)
    at firebase_core_web.FirebaseCoreWeb.new.initializeApp (http://localhost:64781/packages/firebase_core_web/firebase_core_web.dart.lib.js:241:42)
    at initializeApp.next (<anonymous>)
    at http://localhost:64781/dart_sdk.js:43063:33
    at _RootZone.runUnary (http://localhost:64781/dart_sdk.js:42919:58)
    at _FutureListener.thenAwait.handleValue (http://localhost:64781/dart_sdk.js:37493:29)
    at handleValueCallback (http://localhost:64781/dart_sdk.js:38088:49)
    at _Future._propagateToListeners (http://localhost:64781/dart_sdk.js:38126:17)
    at [_completeWithValue] (http://localhost:64781/dart_sdk.js:37955:23)
    at http://localhost:64781/dart_sdk.js:37112:46
    at _RootZone.runUnary (http://localhost:64781/dart_sdk.js:42919:58)
    at _FutureListener.then.handleValue (http://localhost:64781/dart_sdk.js:37493:29)
    at handleValueCallback (http://localhost:64781/dart_sdk.js:38088:49)
    at _Future._propagateToListeners (http://localhost:64781/dart_sdk.js:38126:17)
    at [_completeWithValue] (http://localhost:64781/dart_sdk.js:37955:23)
    at async._AsyncCallbackEntry.new.callback (http://localhost:64781/dart_sdk.js:37991:35)
    at Object._microtaskLoop (http://localhost:64781/dart_sdk.js:43223:13)
    at _startMicrotaskLoop (http://localhost:64781/dart_sdk.js:43229:13)
    at http://localhost:64781/dart_sdk.js:38359:9

Answer 1

I came across your question while trying to solve this same error for myself. I'm not sure if you have an existing Flutter app or if you're creating a new one, but either way I believe the answer is the same.

The process to initialize Firebase for Flutter web has changed. Previously you would initialize Firebase in your web/index.html file, but now you no longer need to do that. Instead you should pass your Firebase project details when you call Firebase.initializeApp in main.dart, like this:

await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform,
);

DefaultFirebaseOptions comes from the firebase_options.dart file. You should create this file by installing the firebase_core package to your Flutter project, then running flutterfire configure from your command line:

 flutterfire configure

The official documentation for how to do this is here: https://firebase.google.com/docs/flutter/setup

In my case I had an existing Flutter project that has used Firebase for a long time. After a version upgrade, I started seeing the "Firebase Options cannot be null" error when running my project in web which made no sense because it had always worked previously and the configuration in index.html was correct and had not changed. I had not realized that they changed how this needs done. Creating firebase_options.dart and adding it in main.dart fully resolved the issue for me.