用户使用 Firebase 身份验证登录时屏幕不刷新

Question

I have a Flutter app in which I am using firebase_auth ^0.18.1+2 to log the user in with an email/password. There are two screens:

• Home screen: where the user is presented the option to log in
• Dashboard screen: the first screen to be shown when logged in

After the user logs in, however, the app does not refresh to show the Dashboard; the Home screen continues to appear. Can anyone advise?

After logging in, only when I perform a Hot Restart does the Dashboard appear.

main.dart :

MultiProvider(
    providers: [
      // Provider 1
      // ...
      // Provider 2
      // ...
      Provider<AuthService>(
        create: (_) => AuthService(),
      ),
      // Provider 4
      // ...
      // Provider 5
      // ...
    ],
    child: App(),
),

auth_service.dart :

Stream<User> get authStateChanges => FirebaseAuth.instance.authStateChanges();

app.dart :

final AuthService authService =
    Provider.of<AuthService>(context, listen: false);

return MaterialApp(
  debugShowCheckedModeBanner: false,
  home: StreamBuilder<User>(
    stream: authService.authStateChanges,
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.active) {

        if (snapshot.hasData) {
        authService.firebaseUser = snapshot.data;

          return Scaffold(
            body: FutureBuilder<DocumentSnapshot>(
              future: authService.fetchExtraUserData(),
              builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.active) {
                      authService.user = snapshot.data;

                      // Dashboard does not appear, however Flutter logging shows that Dashboard
                      // initState() is being called in the background.

                      if (snapshot.hasData) {
                         return Dashboard();
                      } else {
                         return Scaffold(
                            backgroundColor: Colors.white,
                            body: Center(
                               child: CircularProgressIndicator(),
                             ),
                          );
                      }
                  } else {
                      return Scaffold(
                      backgroundColor: Colors.white,
                      body: Center(
                         child: CircularProgressIndicator(),
                        ),
                    );
                  }
              },
            ),
          );
        } else {
          return Home();
        }
      } else {
        return Scaffold(
          backgroundColor: Colors.white,
          body: Center(
            child: CircularProgressIndicator(),
          ),
        );
      }
    },
  ),
);

I have also tried the following with no luck:

• Removing the FutureBuilder which calls authService.fetchExtraUserData()

• Moving StreamBuilder above MaterialApp

  return StreamBuilder<User>( stream: authService.authStateChanges, builder: (context, snapshot) { return MaterialApp( debugShowCheckedModeBanner: false, home: snapshot.hasData? Dashboard(): Home(), ); }, );

It is also interesting to see that logging out works correctly - the user is returned to the Home screen. This shows that authStateChanges is working correctly in this case.

logout(BuildContext context) async => await authService.signOut();

flutter doctor output:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 1.23.0-18.1.pre, on Mac OS X 10.15.7 19H2 x86_64)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.52.0)
[✓] Connected device (3 available)

Answer 1

Well I have a demo which does work perfectly fine, let me post the relevant parts:

main.dart I used ChangeNotifierProvider.value()

...
return MultiProvider(
        providers: [
          ChangeNotifierProvider.value(
            value: AuthenticationService.instance(),
          ),
        ],
        child: MaterialApp(
          theme: ThemeData(
            primarySwatch: Colors.red,
          ),
          home: _screenMaker(context),
        ));
...

This is my _screenMaker Widget in the main.dart which is receiving the realtime state since im working with Consumers from the provider Package

Widget _screenMaker(BuildContext context) {
  return Consumer<AuthenticationService>(
    builder: (ctx, AuthenticationService auth, _) {
      switch (auth.status) {
        case Status.Uninitialized:
          return Splash();
        case Status.Unauthenticated:
        case Status.Authenticating:
          return LoginPage();
        case Status.NoVerification:
          return Verification();
        case Status.Authenticated:
          return UserInfoPage(
            user: auth.user,
          );
      }
    },
  );
}

Lets look at my AuthentificationService class, Im going to post the complete content but the magic for the state management is happening at the beginning after my getters:

import 'package:flutter/widgets.dart';
import 'package:firebase_auth/firebase_auth.dart';

enum Status { Uninitialized, Authenticated, Authenticating, Unauthenticated , NoVerification}

class AuthenticationService with ChangeNotifier {
  FirebaseAuth _auth = FirebaseAuth.instance;
  User _user;
  Status _status = Status.Uninitialized;

  Status get status => _status;
  User get user => _user;


  // Magic happens here
  AuthenticationService.instance() : _auth = FirebaseAuth.instance {
    _auth.authStateChanges().listen((firebaseUser) {
      print('--- authstate listening');
      if (firebaseUser == null) {
        _status = Status.Unauthenticated;
      } else if(firebaseUser != null && firebaseUser.emailVerified == false) {
        _status = Status.NoVerification;
      } else {
        _user = firebaseUser;
        _status = Status.Authenticated;
      }
      notifyListeners();
    });
  }


  Future<bool> signIn(String email, String password) async {
    try {
      _status = Status.Authenticating;
      notifyListeners();
      await _auth.signInWithEmailAndPassword(email: 'admin@admin.de', password: 'admin123');

      if(_auth.currentUser.emailVerified == null){
        _status = Status.Unauthenticated;
        print('--- user email verified is null');
        notifyListeners();
      }
   
      if(_auth.currentUser.emailVerified != true) {
        _status = Status.Authenticated;
        return true;
      } else {
        print('--- user needs confirmation');
        try {
        _status = Status.NoVerification;
        await user.sendEmailVerification();
        signOut();
        return true;
     } catch (e) {
        print('--- An error occured while trying to send email verification');
        print(e.message);
     }
      }
    } catch (e) {
      print('--- $e');
      signOut();
      notifyListeners();
      return false;
    }
  }



  // Signout function
  Future signOut() async {
    _auth.signOut();
    _status = Status.Unauthenticated;
    notifyListeners();
    return Future.delayed(Duration.zero);
  }

}

Thats everything you need. Read more about Consumers, this is a really powerful article for understanding it: https://medium.com/flutter-community/managing-flutter-state-using-provider-e26c78060c26

Answer 2

I think the issue is because of the false parameters passed into the provider.of<T>() call.

Try final AuthService authService = Provider.of<AuthService>(context);

which tried to listen to a value exposed with the provider, from outside of the widget tree.

Answer 3

final AuthService authService =
Provider.of<AuthService>(context, listen: false);

In this line argument listen: false tells the widget to not rebuild when the state changes(user logs in).

Try removing listen: false from the provider.

Also instead of creating provider as

Provider<AuthService>(
    create: (_) => AuthService(),
  )

which only exposes Auth Service values to widget tree and does not rebuild widget tree when state changes.

Use ChangeNotifierProvider to listen to changes and rebuild your widget tree like this

ChangeNotifierProvider(
    create: (context) => AuthService(),
)

Answer 4

Ok Try this,

First modify your firebase api class like this

 Stream<User> get user {
    return auth.onAuthStateChanged
        .map((FirebaseUser user) => _userFromFirebase(user));
  }


  User _userFromFirebase(FirebaseUser user) {
    return user != null ? User(id: user.uid) : null;
  } 

after in your main.dart file modify like this

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamProvider<User>.value(
      value: AuthService().user,
      child: MaterialApp(
        theme: ThemeData(scaffoldBackgroundColor: Colors.blueAccent),
        debugShowCheckedModeBanner: false,
        home: LoginWrapper(),
        //home: McqLoader(),
      ),
    );
  }
}

make Login wrapper class like this

class LoginWrapper extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    
    final user = Provider.of<User>(context);
    if (user == null) {
      return Login();
    } else {
      return DashboardPage(id: user.id,);
    }
  }
}

Answer 5

class LandingPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
   final auth = Provider.of<AuthBase>(context);
   return StreamBuilder<Object>(
     stream: auth.onAuthChange,
     builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.active) {
            User user = snapshot.data;
            if (user == null) {
               return SignIn();
            }else {
               return HomePage();
            }
         }
            return CupertinoActivityIndicator();
      },
    );
  }
}