Navigate to Home screen after receiving token in Flutter - flutter

Question

I'm trying to implement user authentication.
To log user in I created a Provider called Auth:
import 'dart:convert';
import 'package:flutter/foundation.dart';
import 'package:http/http.dart' as http;
import '../../utilities/http_exception.dart';
class Auth extends ChangeNotifier {
String _userId;
String _userUUID;
String _token;
DateTime _expiryDate;
bool get isAuth {
return token != null;
}
String get token {
if (_token != null) {
return _token;
}
return null;
}
Future<void> login(String email, String password) async {
const String url = "http://10.0.2.2:8000/users/api/token/";
try {
final response = await http.post(
url,
headers: {"Content-Type": "application/json"},
body: json.encode(
{
"email": email,
"password": password,
},
),
);
final responseData = json.decode(response.body);
if (response.statusCode == 200 && responseData["token"] != null) {
_token = responseData["token"];
_userUUID = responseData["user"]["uuid"];
notifyListeners();
} else {
print("SOMETHING WENT WRONG HERE");
}
} catch (e) {
throw e;
}
}
}
As you can see I called notifyListeners() to notify listeners to do some operations.
What kind of operations?
I used a Consumer around my MateriaApp widget and for home parameter I've checked weather the token is null or not.
if it's null OK, load GeneralAuth screen otherwise load Home screen.
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
return OrientationBuilder(
builder: (context, orientation) {
return MultiProvider(
providers: [
ChangeNotifierProvider.value(value: Auth()),
ChangeNotifierProvider.value(value: Users()),
ChangeNotifierProvider.value(value: Teachers()),
],
child: Consumer<Auth>(
builder: (context, auth, _) => MaterialApp(
debugShowCheckedModeBanner: false,
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate
],
supportedLocales: [Locale("fa", "IR")],
onGenerateRoute: Router.generateRoute,
initialRoute: GeneralAuthRoute,
onUnknownRoute: (settings) => MaterialPageRoute(
builder: (context) => Undefined(name: settings.name),
),
locale: Locale("fa", "IR"),
theme: ThemeData(
fontFamily: "IranSans",
primaryColor: Color(0xFF212121),
bottomSheetTheme: BottomSheetThemeData(
backgroundColor: Colors.black.withOpacity(0),
),
),
home: auth.isAuth ? Home() : GeneralAuth(),
),
),
);
},
);
},
);
}
}
Looks like everything is OK because as I said I called notifyListeners() but after receiving token even though I have token and auth.isAuth returns true, screen won't load up.
What is the problem?

Answer 1

Home property is something that is not dynamically changing your screen, and this behavior is expected. What you need to do is you need to follow through logic where you wait for login endpoint to execute, and based on response you get, you would need to decide on the screen that gets presented.
Example of that would be this:
await login('a#a.com', '12345');
if (Auth.isAuth) {
// Present here Home screen
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Home()),
);
}