Flutter: Keep user logged in after app closes and reopen - authentication

Question

I'm a beginner and requesting help. I tried to find the answer but sadly cannot find the answer that I'm looking for. I'm building an app where users can see the homepage and other parts of the app when they are not logged in. This part I have working but only when I close the app and restart it I need to log in again. This is of course not ideal. I tried to look for the SharedPreferences but all examples I can find are with a login function for the whole app and I can't figure out how to get it working in my app. Below is the code I have so far. All help is appreciated and thank you all in advance!
(Apologies for posting so much code but it might help!)
Main.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:reboo1/services/firebaseauthservice.dart';
import 'package:reboo1/services/users.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return StreamProvider<User>.value(
value: AuthService().user,
child: MaterialApp(
title: 'Rèboo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home:HomePage(),
),
);
}
}
HomePage.dart
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:reboo1/authenticate/signin.dart';
import 'package:reboo1/authenticate/signout.dart';
import 'package:reboo1/models/drawerlogin.dart';
import 'package:reboo1/models/drawerlogout.dart';
import 'package:reboo1/services/firebaseauthservice.dart';
import 'package:reboo1/services/users.dart';
class DrawerItem {
String title;
IconData icon;
DrawerItem(this.title, this.icon);
}
class HomePage extends StatefulWidget {
final drawerItems = [
new DrawerItem("Rèboo", Icons.home),
new DrawerItem("Inbox", Icons.mail_outline),
new DrawerItem("Profile", Icons.person_outline),
new DrawerItem("Reservations", Icons.event_note),
new DrawerItem("Favorites", Icons.favorite_border),
new DrawerItem("Vouchers", Icons.card_giftcard),
new DrawerItem("Invite Friends", Icons.person_add),
new DrawerItem("Settings", Icons.settings),
new DrawerItem("FAQ", Icons.help_outline),
new DrawerItem("Terms & Conditions", Icons.assignment),
new DrawerItem("Sign out", Icons.exit_to_app),
];
#override
State<StatefulWidget> createState() {
return new HomePageState();
}
}
class HomePageState extends State<HomePage> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
int _selectedDrawerIndex = 0;
var _setIcon = Icons.person;
var drawer;
String uid;
_getDrawerItemWidget(int pos) {
switch (pos) {
case 0:
return new Reboo();
case 1:
return new Inbox();
case 2:
return new Profile();
case 3:
return new Reservations();
case 4:
return new Favorites();
case 5:
return new Vouchers();
case 6:
return new InviteFriends();
case 7:
return new Settings();
case 8:
return new Faq();
case 9:
return new TermsAndConditions();
case 10:
return new SignOut();
default:
return new Text("Error");
}
}
_onSelectItem(int index) {
setState(() => _selectedDrawerIndex = index);
if (_selectedDrawerIndex == 0) {
setState(() => _setIcon = Icons.person);
} else {
setState(() => _setIcon = Icons.arrow_back);
}
Navigator.of(context).pop(); // close the drawer
}
#override
Widget build(BuildContext context) {
var drawerOptions = <Widget>[];
for (var i = 0; i < widget.drawerItems.length; i++) {
var d = widget.drawerItems[i];
drawerOptions.add(new ListTile(
leading: new Icon(
d.icon,
color: Color(0xFF008577),
),
title: new Text(d.title),
selected: i == _selectedDrawerIndex,
onTap: () => _onSelectItem(i),
));
}
final auth = Provider.of<User>(context, listen: false);
if (auth != null) {
drawer = DrawerLogin();
} else {
drawer = DrawerLogout();
}
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
leading: Builder(
builder: (BuildContext context) {
return IconButton(
icon: new Icon(_setIcon),
onPressed: () {
if (_selectedDrawerIndex == 0) {
Scaffold.of(context).openDrawer();
} else {
setState(() => _selectedDrawerIndex = 0);
setState(() => _setIcon = Icons.person);
}
},
tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
);
},
),
centerTitle: true,
title: new Text(widget.drawerItems[_selectedDrawerIndex].title),
backgroundColor: Color(0xFF008577),
elevation: 0.0,
actions: <Widget>[
IconButton(
icon: Icon(Icons.menu, color: Colors.white),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Company()),
);
},
)
],
),
drawer: new Drawer(
child: SingleChildScrollView(
child: new Column(
children: <Widget>[drawer, new Column(children: drawerOptions)],
),
),
),
body: _getDrawerItemWidget(_selectedDrawerIndex),
);
}
}
FirebaseAuthService.dart
import 'package:firebase_auth/firebase_auth.dart';
import 'package:reboo1/services/users.dart';
import 'package:reboo1/services/database.dart';
class AuthService {
final FirebaseAuth _auth = FirebaseAuth.instance;
// create user obj based on FirebaseUser
User _userFromFirebaseUser(FirebaseUser user){
return user != null ? User(uid: user.uid) : null;
}
// auth change user stream
Stream<User> get user {
return _auth.onAuthStateChanged
.map(_userFromFirebaseUser);
}
// sign with email & password
Future signInWithEmailAndPassword(String email, String password) async {
try {
AuthResult result = await _auth.signInWithEmailAndPassword(email: email, password: password);
FirebaseUser user = result.user;
return _userFromFirebaseUser(user);
}catch(e){
print(e.toString());
return null;
}
}
// register with email & password
Future registerForm(String email, String password, String birthday, String address, String fullName, String phone) async {
try {
AuthResult result = await _auth.createUserWithEmailAndPassword(email: email, password: password);
FirebaseUser user = result.user;
// creat a new document in the database for the user with the uid
await DatabaseService(uid: user.uid).updateUserData(email, birthday, address, fullName, phone);
return _userFromFirebaseUser(user);
}catch(e){
print(e.toString());
return null;
}
}
Stream<String> get onAuthStateChanged =>
_auth.onAuthStateChanged.map(
(FirebaseUser user) => user?.uid,
);
// GET UID
Future<String> getCurrentUID() async {
return (await _auth.currentUser()).uid;
}
Future getCurrentUser() async {
return await _auth.currentUser();
}
//sign out
Future signOut() async{
try{
return await _auth.signOut();
}catch(e){
print(e.toString());
return null;
}
}
}
SignIn.dart
import 'package:flutter/material.dart';
import 'package:reboo1/authenticate/register.dart';
import 'package:reboo1/home/homepage.dart';
import 'package:reboo1/services/constants.dart';
import 'package:reboo1/services/loading.dart';
import 'package:reboo1/services/firebaseauthservice.dart';
import 'package:shared_preferences/shared_preferences.dart';
class SignIn extends StatefulWidget {
final Function toggleView;
SignIn({this.toggleView});
#override
_SignInState createState() => _SignInState();
}
class _SignInState extends State<SignIn> {
final AuthService _auth = AuthService();
final _formKey = GlobalKey<FormState>(); //global key
bool loading = false;
// text field state
String email = '';
String password = '';
String error = '';
#override
Widget build(BuildContext context) {
return loading
? Loading()
: Scaffold(
backgroundColor: Colors.brown[50],
appBar: AppBar(
backgroundColor: Color(0xFF008577),
elevation: 0.0,
title: Text('Sign in to Rèboo'),
actions: <Widget>[
FlatButton.icon(
textColor: Colors.white,
icon: Icon(Icons.person),
label: Text('Register'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Register()),
);
},
)
],
),
body: Container(
padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 50.0),
child: Form(
key: _formKey, //global key
child: Column(children: <Widget>[
SizedBox(height: 20.0),
TextFormField(
decoration: textInputDecoration.copyWith(
hintText: 'Email address'),
validator: (val) =>
val.isEmpty ? 'Enter an email address' : null,
onChanged: (val) {
setState(() => email = val);
}),
SizedBox(height: 20.0),
TextFormField(
decoration:
textInputDecoration.copyWith(hintText: 'Password'),
validator: (val) =>
val.length < 8 ? 'Enter valid password' : null,
obscureText: true,
onChanged: (val) {
setState(() => password = val);
},
),
SizedBox(height: 20.0),
RaisedButton(
color: Colors.purple[400],
child:
Text('Sign in', style: TextStyle(color: Colors.white)),
onPressed: () async {
if (_formKey.currentState.validate()) {
setState(() => loading = true);
dynamic result = await _auth.signInWithEmailAndPassword(
email, password);
if (result == null) {
setState(() {
error =
'Could not sign in with those credentials. Please register an account.';
setState(() => loading = false);
});
} else {
setState(() => loading = false);
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomePage()),
);
}
}
},
),
SizedBox(height: 12.0),
Text(
error,
style: TextStyle(color: Colors.red, fontSize: 14.0),
)
]),
),
),
);
}
}

Answer 1

Have provided a dummy implementation but this is the legit way to tackle this. If you want to search on google, search for keyword firebase onAuthChanged, and read about it. No local storage is required and the most simple and secure way to handle your requirement.
StreamBuilder<FirebaseUser>(
stream: FirebaseAuth.instance.onAuthStateChanged,
builder: (BuildContext context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return print("getting data");
} else if (snapshot.connectionState == ConnectionState.active &&
!snapshot.hasData) {
return print("no user found");
} else if (snapshot.connectionState == ConnectionState.active &&
snapshot.hasData)
{
return print(snapshot.data.currentuser);
}
else
return null;
},

Answer 2

You could save some sort of data to your shared preferences, then when a user opens the app you could retrieve that data from the shared preferences to determine if the user should already be logged in or not. That data could be the users bearer token and expiry date for instance. This could look something like this:
Save data to shared preferences:
Future storeTokenPropertiesToPreferences(
TokenProperties accessTokenProperties, refreshTokenProperties) async {
final preferences = await SharedPreferences.getInstance();
preferences.setString(
_preferencesLocation,
json.encode(
{
'accessToken': accessTokenProperties?.value,
'refreshToken': refreshTokenProperties?.value,
'accessTokenExpiresAt':
accessTokenProperties?.expiresAt?.toIso8601String(),
'refreshTokenExpiresAt':
refreshTokenProperties?.expiresAt?.toIso8601String(),
},
),
);
Retrieve data:
Future<TokenProperties> _tokenPropertiesFromPreferences(
String tokenName) async {
final _userData = await _getPreferences();
try {
final value = _userData[tokenName];
final expiresAt = DateTime.parse(_userData['${tokenName}ExpiresAt']);
final lifeTime = expiresAt.difference(DateTime.now()).inSeconds;
return (value == null || expiresAt == null)
? null
: TokenProperties(value, lifeTime);
} catch (e) {
await _loggingService.log(LoggingMethod.ERROR,
'Could not get token properties from preferences for token $tokenName. Got exception: $e');
return null;
}
Future<Map<String, Object>> _getPreferences() async {
final preferences = await SharedPreferences.getInstance();
if (!preferences.containsKey(_preferencesLocation)) return null;
return json.decode(preferences.getString(_preferencesLocation))
as Map<String, Object>;
}
You could obviously change out the object properties to whatever you need, this is just an example.

Answer 3

I don't think you need to mess up with local storage to save user's detail.As Firebase itself store user's detail in local storage.You just need to call .currentUser() method of FirebaseAuth class object when your app starts. If the current user is null then load Login Page otherwise your Main Page. Just like that;
Future loadUser() async {
FirebaseUser _tempUser = await _auth.currentUser();
if (_tempUser != null)
// goto MainPage(mainUser:_tempUser);
} else
// goto LoginPage;
}

Answer 4

thanks to #UTKARSH Sharma I found out that the user is not logged out but the problem was in my own code. I found the below code which helped me solve my problem:
#override
void initState() {
super.initState();
var auth = FirebaseAuth.instance;
auth.onAuthStateChanged.listen((user) {
if (user != null) {
print("user is logged in");
//navigate to home page using Navigator Widget
} else {
print("user is not logged in");
//navigate to sign in page using Navigator Widget
}
});
}
Thank you everyone for your help!