How to set up navigation to a specific page base on FirebaseAuth State?

Question

I want to create an authorization check to display different screens depending on whether the user is logged in. When the user is logged in, then HomeScreen () should be displayed to him. And when not logged in, then the SignIn page, the code of which is attached below How to place the widget with the screen correctly?

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

  @override
  _SignInScreenState createState() => _SignInScreenState();
}

class _SignInScreenState extends State<SignInScreen> {
  TextEditingController _passwordTextController = TextEditingController();
  TextEditingController _emailTextController = TextEditingController();
  late StreamSubscription<User?> user;
  void initState() {
    super.initState();
    user = FirebaseAuth.instance.authStateChanges().listen((user) {
      if(user == null) {

      }
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(
            gradient: LinearGradient(colors: [
              hexStringToColor("#a40606"),
              hexStringToColor("#d98324"),
            ], begin: Alignment.topCenter, end: Alignment.bottomCenter)),
        child: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.fromLTRB(
                20, MediaQuery.of(context).size.height * 0.2, 20, 0),
            child: Column(
              children: <Widget>[
                logoWidget("images/news_icon.png"),
                const SizedBox(
                  height: 30,
                ),
                reusableTextField("Enter UserName", Icons.person_outline, false,
                    _emailTextController),
                const SizedBox(
                  height: 20,
                ),
                reusableTextField("Enter Password", Icons.lock_outline, true,
                    _passwordTextController),
                const SizedBox(
                  height: 5,
                ),
                forgetPassword(context),
                firebaseUIButton(context, "Sign In", () {
                  FirebaseAuth.instance
                      .signInWithEmailAndPassword(
                      email: _emailTextController.text,
                      password: _passwordTextController.text)
                      .then((value) {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) => HomeScreen()));
                  }).onError((error, stackTrace) {
                    print("Error ${error.toString()}");
                  });
                }),
                signUpOption()
              ],
            ),
          ),
        ),
      ),
    );
  }

Answer 1

I'll just assume that you already have a splash screen in place, on that screen you can put the condition for the navigation to HomeScreen or SignInScreen on it's initState().

void initState() {
    super.initState();
    FirebaseAuth.instance.authStateChanges().listen((User? user) {
      if (user == null) {
        Navigator.push(
           context,
           MaterialPageRoute(builder: (context) => const SignInScreen()),
        );
      } else {
        Navigator.push(
           context,
           MaterialPageRoute(builder: (context) => const HomeScreen()),
        );
      }
    });
  }

This solution only shows how to navigate to a specific screen based on user status. What i'll recommend is to create a service file where you gonna put the necessary logic for Flutter Auth. Here's a link that will be helpful: https://www.youtube.com/watch?v=mZYuuGAIwe4