Using FirebaseAuth to Skip Login Screen for Logged In Users Flutter

Question

I'm trying to skip the login page and straight head to the homepage in my application using FirebaseAuth but firebaseAuth.getCurrentUser() gives result twice, first null and second FirebaseUser . And the application always is taking the first result as THE result which than gives me the login screen.

My code is below;

@override
  Widget build(BuildContext context) {
    return FutureBuilder<FirebaseUser>(
        future: authService.getCurrentUser(),
        builder: (context, AsyncSnapshot<FirebaseUser> snapshot) {
          print("snapshot data");
          print(snapshot.hasData);
          if (snapshot.hasData) {
            print(snapshot.data.uid);
            return MaterialApp(
              theme: ThemeData(
                primarySwatch: Colors.blue,
              ),
              initialRoute: HomePage.id,
              routes: {
                HomePage.id: (context) => HomePage(snapshot.data.uid),
                WelcomePage.id: (context) => WelcomePage(),
                RegistrationPage.id: (context) => RegistrationPage()
              },
            );
          } else {
            return SafeArea(
              child: Scaffold(
                backgroundColor: colorPalette.white,
                body: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 20.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.symmetric(horizontal: 20.0),
                        child: SizedBox(
                          height: 150,
                          child: Image.asset(
                            "lib/assets/images/logo-with-name.png",
                          ),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(
                            horizontal: 20.0, vertical: 10.0),
                        child: CustomTextBox(
                          size: 8.0,
                          hintText: "E-Mail",
                          borderColor: colorPalette.logoLightBlue,
                          function: onChangeFunction,
                          keyboardType: TextInputType.emailAddress,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(
                            horizontal: 20.0, vertical: 10.0),
                        child: CustomTextBox(
                          size: 8.0,
                          hintText: "Password",
                          borderColor: colorPalette.logoLightBlue,
                          function: onChangeFunctionTwo,
                          keyboardType: TextInputType.text,
                        ),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(
                                left: 10.0, top: 10.0, bottom: 10.0),
                            child: Material(
                              elevation: 5.0,
                              color: colorPalette.lighterPink,
                              borderRadius: BorderRadius.circular(10.0),
                              child: MaterialButton(
                                onPressed: () {
                                  signIn();
                                },
                                child: Text(
                                  "Log In",
                                  style: TextStyle(
                                    color: colorPalette.white,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(10.0),
                            child: Text("or"),
                          ),
                          GestureDetector(
                            onTap: () {
                              setState(() {
                                Navigator.pushNamed(
                                    context, RegistrationPage.id);
                              });
                            },
                            child: Text(
                              "Register",
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                color: colorPalette.logoLightBlue,
                              ),
                            ),
                          ),
                        ],
                      )
                    ],
                  ),
                ),
              ),
            );
          }
        });
  }

AuthService class;

class AuthService {
  final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;

  Stream<String> get onAuthStateChanged => _firebaseAuth.onAuthStateChanged.map(
        (FirebaseUser user) => user?.uid,
      );

  // Email & password Sign Up
  Future<String> createUser(String email, String password, String companyName,
      String nameAndSurname) async {
    try {
      final currentUser = await _firebaseAuth.createUserWithEmailAndPassword(
          email: email, password: password);

      // Update the UserName
      var userUpdate = UserUpdateInfo();
      userUpdate.displayName = companyName;

      await currentUser.user.updateProfile(userUpdate);

      await currentUser.user.reload();

      Firestore.instance.runTransaction((Transaction transaction) async {
        await Firestore.instance.collection("users").add({
          currentUser.user.uid: {
            "properties": {
              "companyName": companyName,
              "nameAndSurname": nameAndSurname,
              "eMail": email,
              "currentCashBalance": 0,
              "currentTotalBalance": 0,
            },
            "partners": {},
            "revenues": {},
            "payments": {}
          }
        });
      });

      return currentUser.user.uid;
    } catch (err) {
      if (err is PlatformException) {
        if (err.code == "ERROR_EMAIL_ALREADY_IN_USE") {
          return "ERROR_EMAIL_ALREADY_IN_USE";
        } else {
          return err.code;
        }
      }
    }
  }

  // Email & password Sign In
  Future<String> signInWithEmailAndPassword(
      String email, String password) async {
    return (await _firebaseAuth.signInWithEmailAndPassword(
            email: email, password: password))
        .user
        .uid;
  }

  // Sign Out
  signOut() {
    return _firebaseAuth.signOut();
  }

  // Get Current User
  Future<FirebaseUser> getCurrentUser() async {
    FirebaseUser user = await _firebaseAuth.currentUser();
    return user;
  }
}

The result is like this when the app is launched:

I/flutter (12529): snapshot data
I/flutter (12529): false
I/flutter (12529): snapshot data
I/flutter (12529): true
I/flutter (12529): *firebase userid*

What am I doing wrong here and how can I make it right?

Answer 1

The reason you get this is because the builder is getting executed before retrieving the userid .

Therefore you need to use CircularProgressIndicator() , that will show a circular progress until the result of the future is retrieved. For example:

builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data.uid);
    } else if (snapshot.hasError) {
      return Text("${snapshot.error}");
    }

    // By default, show a loading spinner.
    return CircularProgressIndicator();
  },
);

Answer 2

    //function to check if the user is logged in
Future getCurrentUser() async {
        FirebaseUser _user = await FirebaseAuth.instance.currentUser();
        print("User: ${_user?.email ?? "None"}");
        print(_user);
        return _user;
      }
//using future builder to show whichever screen you want to show loading screen is 
//empty screen with circular progress indicator in center i hope this will help you
     home: FutureBuilder(
              future: getCurrentUser(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return LoadingScreen();
                } else if (snapshot.connectionState == ConnectionState.done) {
                  return snapshot.data == null ? LoginScreen() : MainScreen();
                }
                return LoginScreen();
              },
            ),