Intended Flow: Only show the home page when the user verifies their email. What is actually happening: The user can pop the navigation stack to show the home page.
I'm using Firebase to handle my authentication flow and currently am using a StreamBuilder to show either the landing page or the home page at the root of the app depending on if a user is verified and not null.
//create user object based on Firebase User
UserApp _userFromFirebaseUser(User user) {
return user != null ? UserApp(uid: user.uid, isVerified: user.emailVerified):null;
}
//userapp type class
class UserApp {
final String uid;
final bool isVerified;
UserApp({this.isVerified, this.uid});
}
Then I have a StreamBuilder that lives on top of my main.dart file:
class AuthWidgetBuilder extends StatelessWidget {
const AuthWidgetBuilder({Key key, @required this.builder}) : super(key: key);
final Widget Function(BuildContext, AsyncSnapshot<UserApp>) builder;
@override
Widget build(BuildContext context) {
final authService = Provider.of<AuthService>(context, listen: false);
return StreamBuilder<UserApp>(
stream: authService.onAuthStateChanged,
builder: (context, snapshot) {
final UserApp user = snapshot.data;
//only show home page if user is non null and also if they verified their email.
if (user != null && authService.currentUser().isVerified == true) {
return MultiProvider(
providers: [
Provider<UserApp>.value(value: user),
],
child: builder(context, snapshot),
);
}
return builder(context, snapshot);
});
}
}
class AuthWidget extends StatelessWidget {
const AuthWidget({Key key, @required this.userSnapshot}) : super(key: key);
final AsyncSnapshot<UserApp> userSnapshot;
@override
Widget build(BuildContext context) {
if (userSnapshot.connectionState == ConnectionState.active) {
return userSnapshot.hasData ? HomePage() : LandingPage();
}
return Scaffold(
body: Center(
child: CircularProgressIndicator(),
),
);
}
}
Then this is my main.dart file with the StreamBuilder and AuthService class on top of the widget tree:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Provider<AuthService>(
create: (_) => AuthService(),
child: AuthWidgetBuilder(builder: (context, userSnapshot) {
return MaterialApp(
home: AuthWidget(userSnapshot: userSnapshot),
);
}));
}
How come I can pop the navigation stack to reveal the home page, even when I have not yet verified the user through email? What do I need to change in my code to make sure that the user can only see the home page, after verifying their email? Is there any resource I can look at to understand these concepts better?