Flutter: firebase authorization flow won't work with routes - flutter

Question

I'm trying to make sure that app-users that aren't authorised (signed in), are directed to the sign in page. This is what my main.dart looks like:
class App extends StatelessWidget {
Widget build(BuildContext context) {
return StreamBuilder<FirebaseUser>(
stream: FirebaseAuth.instance.onAuthStateChanged,
builder: (context, snapshot) {
if (snapshot.connectionState != ConnectionState.active) {
// some loading widget
return MaterialApp(home: Scaffold(),);
}
FirebaseUser user = snapshot.data;
if (user == null) {
return MaterialApp(home: SignIn(),);
}
// this is the main app
return MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
'/new_game': (context) => NewGame(),
'/join_session': (context) => JoinSession(),
'/my_rankings': (context) => MyRankings(),
'/settings': (context) => Settings(),
},
);
}
);
}
}
When I run the app (on chrome using the web function) I start of at the sign in page (as expected) which just contains an anonymous sign in button. When I sign in it gives an error, stating that the initial-route-builder (route '/' with HomeScreen() as builder) returns null. When I swap my the main app for a simple
return MaterialApp(home: Scaffold(body: Text('This Works')));
it does seem to work. When using a simple MaterialApp() that does the same but using routes, it gives the error again, so the problem seems to be the routing. What's going on?

Answer 1

i don't think it will work like that. the main.dart should be used only as the app entry point.
class App extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => SplashScreen(),
'/home': (context) => HomeScreen(),
'/new_game': (context) => NewGame(),
'/join_session': (context) => JoinSession(),
'/my_rankings': (context) => MyRankings(),
'/settings': (context) => Settings(),
},
);
}
}
class SplashScreen extends StatelessWidget {
void isLogged StreamBuilder<FirebaseUser>(
stream: FirebaseAuth.instance.onAuthStateChanged,
builder: (context, snapshot) {
if (snapshot.connectionState != ConnectionState.active) {
// some loading widget
Navigator.pushReplacementNamed(context, '/home');
}
FirebaseUser user = snapshot.data;
if (user == null) {
Navigator.pushReplacementNamed(context, '/SignIn');
}
// this is the main app
);
initiatState(){
isLogged();
}
Widget build(BuildContext context){
}
}
You could use this method to check if a user is logged auth.currentUser() it returns null if the user is not signed
FirebaseAuth auth = FirebaseAuth.instance;
await auth.currentUser() == null ? false : true;

Answer 2

Just do this!
import 'package:base_app/screens/auth/login/index.dart';
import 'package:base_app/screens/boarding/index.dart';
import 'package:base_app/screens/main/home/index.dart';
import 'package:base_app/screens/main/profile/index.dart';
import 'package:base_app/screens/splash/index.dart';
import 'package:base_app/style/palette.dart';
import 'package:base_app/style/theme.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:sizer/sizer.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Sizer(
builder: (context, orientation, deviceType) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
fontFamily: 'DancingScript',
textTheme: getTextTheme(context),
primarySwatch: colorRed as MaterialColor,
),
home: LandingFlow(),
routes: {
ProfileScreen.id: (context) => ProfileScreen(),
},
);
},
);
}
}
class LandingFlow extends StatefulWidget {
#override
_LandingFlowState createState() => _LandingFlowState();
}
class _LandingFlowState extends State<LandingFlow> {
bool isSplashOver = false;
bool hasBoardingScreensShown = true;
#override
Widget build(BuildContext context) {
if (isSplashOver) {
if (hasBoardingScreensShown) {
return StreamBuilder(
stream: FirebaseAuth.instance.authStateChanges(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const CircularProgressIndicator();
}
if (snapshot.hasData) {
debugPrint('HomeScreen');
return HomeScreen();
} else {
debugPrint('LoginScreen');
return LoginScreen();
}
},
);
}
return BoardingScreen();
}
return SplashScreen(
onFinished: () => setState(() {
isSplashOver = true;
}),
);
}
}
And for your Splash Screen:
import 'package:flutter/material.dart';
class SplashScreen extends StatelessWidget {
static const id = 'SplashScreen';
final Function onFinished;
const SplashScreen({this.onFinished});
#override
Widget build(BuildContext context) {
Future.delayed(
const Duration(seconds: 3),
() => onFinished(),
);
return const Scaffold(
body: Center(
child: Text('Splash Screen'),
),
);
}
}