Error: [core/no-app] No Firebase App '[DEFAULT]' has been created - call Firebase.initializeApp()

Question

I am building a Flutter application and I have integrated Firebase, but I keep getting this error when I click on the login button. I have come across people with similar problem, but none seems to work for me. I am using VS Code as my IDE. How can I fix this problem?

Here is my code for each file...

main.dart file

import 'login_screen.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "FLUTTER-FIREBASE LOGIN APP",
      home: LoginScreen(),
    );
  }
}

login_screen.dart file

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

import 'profile_screen.dart';

class LoginScreen extends StatefulWidget {
  const LoginScreen({Key? key}) : super(key: key);

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  // Initialize Firebase App
  Future<FirebaseApp> _initializeFirebase() async {
    FirebaseApp firebaseApp = await Firebase.initializeApp();
    return firebaseApp;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        future: _initializeFirebase(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return const LoginForm();
          }
          return const Center(
            child: CircularProgressIndicator(),
          );
        },
      ),
    );
  }
}

class LoginForm extends StatefulWidget {
  const LoginForm({Key? key}) : super(key: key);

  @override
  State<LoginForm> createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
  // Login Function
  static Future<User?> loginUsingEmailPassword(
      {required String email,
      required String password,
      required BuildContext context}) async {
    FirebaseAuth auth = FirebaseAuth.instance;
    User? user;

    try {
      UserCredential userCredential = await auth.signInWithEmailAndPassword(
        email: email, 
        password: password,
      );
      user = userCredential.user;
    } on FirebaseAuthException catch (e) {
      if (e.code == "user-not-found") {
        print("No user found for that email");
      }
    }

    return user;
  }

  @override
  Widget build(BuildContext context) {
    // TextFielf Controller
    TextEditingController _emailController = TextEditingController();
    TextEditingController _passwordController = TextEditingController();

    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          const Text(
            "MyApp Title",
            style: TextStyle(
              color: Colors.black,
              fontSize: 28,
              fontWeight: FontWeight.bold,
            ),
          ),
          const Text(
            "Login to your App",
            style: TextStyle(
              color: Colors.black,
              fontSize: 44.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(
            height: 44.0,
          ),
          TextField(
            controller: _emailController,
            keyboardType: TextInputType.emailAddress,
            decoration: const InputDecoration(
                hintText: "enter email...",
                prefixIcon: Icon(
                  Icons.mail,
                  color: Colors.black,
                )),
          ),
          const SizedBox(
            height: 26.0,
          ),
          TextField(
            controller: _passwordController,
            obscureText: true,
            decoration: const InputDecoration(
              hintText: "enter password...",
              prefixIcon: Icon(
                Icons.lock,
                color: Colors.black,
              ),
            ),
          ),
          const SizedBox(
            height: 12.0,
          ),
          const Text(
            "Forgot Password?",
            style: TextStyle(
              color: Colors.blue,
            ),
          ),
          const SizedBox(
            height: 88.0,
          ),
          Container(
            width: double.infinity,
            child: RawMaterialButton(
              fillColor: const Color(0xFF0069FE),
              elevation: 0.0,
              padding: const EdgeInsets.symmetric(vertical: 20.0),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12.0),
              ),
              onPressed: () async {
                User? user = await loginUsingEmailPassword(
                    email: _emailController.text,
                    password: _passwordController.text,
                    context: context);
                print(user);

                if (user != null) {
                  Navigator.of(context).pushReplacement(
                    MaterialPageRoute(builder: (context) => const ProfileScreen()));
                }
              },
              child: const Text(
                "Login",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

profile_screen.dart

class ProfileScreen extends StatefulWidget {
  const ProfileScreen({ Key? key }) : super(key: key);

  @override
  State<ProfileScreen> createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text("TO BE CONTINUED...!!!"),
      ),
    );
  }
}```



**This is the error message I get when I tap on the login button**

Error: [core/no-app] No Firebase App '[DEFAULT]' has been created - call Firebase.initializeApp()
    at Object.throw_ [as throw] (http://localhost:51555/dart_sdk.js:5067:11)
at firebase_core_web.FirebaseCoreWeb.new.app (http://localhost:51555/packages/firebase_core_web/firebase_core_web.dart.lib.js:285:23)
at Function.app (http://localhost:51555/packages/firebase_core/firebase_core.dart.lib.js:111:50)
at Function.get instance [as instance] (http://localhost:51555/packages/firebase_auth/firebase_auth.dart.lib.js:96:55)
at loginUsingEmailPassword (http://localhost:51555/packages/flutter_login_with_firebase_authentication/login_screen.dart.lib.js:1047:47)
    at loginUsingEmailPassword.next (<anonymous>)
    at runBody (http://localhost:51555/dart_sdk.js:40590:34)
    at Object._async [as async] (http://localhost:51555/dart_sdk.js:40621:7)
at Function.loginUsingEmailPassword (http://localhost:51555/packages/flutter_login_with_firebase_authentication/login_screen.dart.lib.js:1046:20)
at http://localhost:51555/packages/flutter_login_with_firebase_authentication/login_screen.dart.lib.js:1068:66
    at Generator.next (<anonymous>)
    at runBody (http://localhost:51555/dart_sdk.js:40590:34)
    at Object._async [as async] (http://localhost:51555/dart_sdk.js:40621:7)
at http://localhost:51555/packages/flutter_login_with_firebase_authentication/login_screen.dart.lib.js:1067:1029
at ink_well._InkResponseState.new.[_handleTap] (http://localhost:51555/packages/flutter/src/material/icon_button.dart.lib.js:40468:31)
at tap.TapGestureRecognizer.new.invokeCallback (http://localhost:51555/packages/flutter/src/gestures/recognizer.dart.lib.js:190:18)
    at LinkedMap.new.forEach (http://localhost:51555/dart_sdk.js:27679:11)
at pointer_router.PointerRouter.new.[_dispatchEventToRoutes] (http://localhost:51555/packages/flutter/src/gestures/pointer_router.dart.lib.js:110:29)
at pointer_router.PointerRouter.new.route (http://localhost:51555/packages/flutter/src/gestures/pointer_router.dart.lib.js:105:37)
at binding$5.WidgetsFlutterBinding.new.handleEvent (http://localhost:51555/packages/flutter/src/gestures/binding.dart.lib.js:364:26)
at binding$5.WidgetsFlutterBinding.new.dispatchEvent (http://localhost:51555/packages/flutter/src/gestures/binding.dart.lib.js:352:24)
at binding$5.WidgetsFlutterBinding.new.dispatchEvent (http://localhost:51555/packages/flutter/src/rendering/layer.dart.lib.js:5427:13)
at binding$5.WidgetsFlutterBinding.new.[_handlePointerEventImmediately] (http://localhost:51555/packages/flutter/src/gestures/binding.dart.lib.js:328:14)
at binding$5.WidgetsFlutterBinding.new.handlePointerEvent (http://localhost:51555/packages/flutter/src/gestures/binding.dart.lib.js:302:43)
at binding$5.WidgetsFlutterBinding.new.[_flushPointerEventQueue] (http://localhost:51555/packages/flutter/src/gestures/binding.dart.lib.js:292:14)
at binding$5.WidgetsFlutterBinding.new.[_handlePointerDataPacket] (http://localhost:51555/packages/flutter/src/gestures/binding.dart.lib.js:283:54)
    at Object.invoke1 (http://localhost:51555/dart_sdk.js:190405:7)
    at _engine.EnginePlatformDispatcher.__.invokeOnPointerDataPacket (http://localhost:51555/dart_sdk.js:171081:15)
    at _engine.PointerBinding.__.[_onPointerData] (http://localhost:51555/dart_sdk.js:171963:49)
    at http://localhost:51555/dart_sdk.js:172401:28
    at http://localhost:51555/dart_sdk.js:172357:16
    at loggedHandler (http://localhost:51555/dart_sdk.js:172062:11)

Answer 1

With the recent firebase versions you have to use Firebase Cli to connect your app.

Installing the cli first install firebase cli

Firebase CLI via npm by running the following command:

npm install -g firebase-tools

Next, install the FlutterFire CLI by running the following command:

dart pub global activate flutterfire_cli

Once installed, the flutterfire command will be globally available.

In the root of your application, run the configure command:

flutterfire configure

The configuration command will guide you through a number of processes:

• Selecting a Firebase project (based on the .firebaserc file or from the Firebase Console).
• Prompt what platforms (e.g. Android, iOS, macOS & web) you would like configuration for.
• Identify which Firebase applications for the chosen platforms should be used to extract configuration for. By default, the CLI will attempt to automatically match Firebase apps based on your current project configuration.
• Generate a firebase_options.dart file in your project.

Once complete, you can now import the generated file and provide it to the initializeApp method: lib/main.dart // Import the generated file import 'firebase_options.dart';

Then, provide the current platform options via the currentPlatform getter from the DefaultFirebaseOptions class:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform,
);
..