Firebase Auth does not properly update values with GetX

Question

I am currently developing an authentication feature in my app using Firebase Auth and GetX as state management tool.

For this, I have an AuthStateController that looks like this:

class AuthStateController extends GetxController {
  FirebaseAuth firebaseAuth = FirebaseAuth.instance;

  Rxn<User> user = Rxn<User>();

  @override
  void onInit() {

    super.onInit();
    user.bindStream(firebaseAuth.authStateChanges());
  }
}

I then call firebase's createUserWithEmailAndPassword function. This works properly, the user correctly gets created, but my user variable is not updated, even though the stream correctly emits a user object.

After restarting the app, the user is logged in and login and logout work as expected from here on.

I need this user variable to reactively show the registration screen respectively the home screen in my UI after registering. The code for this roughly looks like this:

return Obx(( {
  if (authStateController.user.value != null) {
    return HomePage();
  } else {
    return LoginPage();
  }
});

Anywhere else in this project GetX works really well and as expected.

I have set up firebase following this tutorial: https://firebase.google.com/docs/flutter/setup?platform=android

My pubspec.yaml file looks like this:

firebase_core: ^2.24.2
firebase_auth: ^4.16.0
get: ^4.6.6

I have tested this on an emulator (iOS and Android) and a real device, both do not work.

Any tips on what I am doing wrong here?

Answer 1

I managed to find a solution, but I am not quite sure what was causing the problem.

I was using

Navigator.of(context).pushReplacement(
  MaterialPageRoute(
    builder: (context) => const RegistrationPage(),
  ),
);

to navigate between my login page and the registration page. This somehow messed up how GetX refreshes widgets. Once the authentification UI was placed in a single widget, everything worked as expected.