User Login and Logout for Flutter using Parse Server
Introduction
After implementing the User Registration for Flutter on Parse in the last guide, you will learn how to login and logout users using the same ParseUser
class. After a Signup, the login operation is performed automatically, and a new user session is created. The Logout operation deletes the active Session object for the logged user.
In this guide, you will learn how to use the Flutter plugin for Parse Server to perform login/logout using ParseUser
class for your Flutter App.
Goal
To build a User Login/Logout feature using Parse for a Flutter App.
Prerequisites
To complete this tutorial, you will need:
- Flutter version 2.2.x or later
- Android Studio or VS Code installed (with Plugins Dart and Flutter)
- A Flutter app created and connected to Back4app.
- Note: Follow the Install Parse SDK on Flutter project to create an Flutter Project connected to Back4App.
- Complete the previous guide so you can have a better understanding of the
ParseUser
class.- A device (or virtual device) running Android or iOS.
Understanding the Login/Logout App
To better understand the Login/SingOut process, we will create an app to login e logout user on your account.
We won’t explain the Flutter application code once this guide’s primary focus is using the Flutter with Parse. Following the next steps, you will build a Login e Logout App at Back4App Database.
Let’s get started!
In the following steps, you will be able to build a Login/Logout App.
Step 1 - Create the Login/Logout App Template
Open your Flutter project from the previous guide Flutter plugin for Parse Server. Go to the main.dart
file, clean up all the code, and replace it with:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
final keyApplicationId = 'YOUR_APP_ID_HERE';
final keyClientKey = 'YOUR_CLIENT_KEY_HERE';
final keyParseServerUrl = 'https://parseapi.back4app.com';
await Parse().initialize(keyApplicationId, keyParseServerUrl,
clientKey: keyClientKey, debug: true);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Login/Logout',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final controllerUsername = TextEditingController();
final controllerPassword = TextEditingController();
bool isLoggedIn = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Login/Logout'),
),
body: Center(
child: SingleChildScrollView(
padding: const EdgeInsets.all(8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: 200,
child: Image.network(
'http://blog.back4app.com/wp-content/uploads/2017/11/logo-b4a-1-768x175-1.png'),
),
Center(
child: const Text('Flutter on Back4App',
style:
TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
),
SizedBox(
height: 16,
),
Center(
child: const Text('User Login/Logout',
style: TextStyle(fontSize: 16)),
),
SizedBox(
height: 16,
),
TextField(
controller: controllerUsername,
enabled: !isLoggedIn,
keyboardType: TextInputType.text,
textCapitalization: TextCapitalization.none,
autocorrect: false,
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black)),
labelText: 'Username'),
),
SizedBox(
height: 8,
),
TextField(
controller: controllerPassword,
enabled: !isLoggedIn,
obscureText: true,
keyboardType: TextInputType.text,
textCapitalization: TextCapitalization.none,
autocorrect: false,
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black)),
labelText: 'Password'),
),
SizedBox(
height: 16,
),
Container(
height: 50,
child: TextButton(
child: const Text('Login'),
onPressed: isLoggedIn ? null : () => doUserLogin(),
),
),
SizedBox(
height: 16,
),
Container(
height: 50,
child: TextButton(
child: const Text('Logout'),
onPressed: !isLoggedIn ? null : () => doUserLogout(),
),
)
],
),
),
));
}
void showSuccess(String message) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text("Success!"),
content: Text(message),
actions: <Widget>[
new TextButton(
child: const Text("OK"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
void showError(String errorMessage) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text("Error!"),
content: Text(errorMessage),
actions: <Widget>[
new TextButton(
child: const Text("OK"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
void doUserLogin() async {
}
void doUserLogout() async {
}
}
Set the
debug
parameter in functionParse().initialize
totrue
so you can see the Parse API calls on the console. This configuration can help you debug the code. It is prudent to disable debug in the release version.
Step 2 - Connect Template to Back4app Project
Find your Application Id and Client Key credentials navigating to your app Dashboard at Back4App Website.
Update your code in main.dart
with the values of your project’s ApplicationId and ClientKey in Back4app.
- keyApplicationId = App Id
- keyClientKey = Client Key
Run the project, and the app will load as shown in the image.
Step 3 - Code for Login User
The User Login function creates a Session
object, which points to the User
logged in and stores in your local storage a valid user session.
Future calls to methods like currentUser
will successfully retrieve your User
data and sessionToken
for Session
object which created in the Dashboard
.
Search for the function doUserLogin
in the file main.dart
. Replace the code inside doUserLogin
with:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
final username = controllerUsername.text.trim();
final password = controllerPassword.text.trim();
final user = ParseUser(username, password, null);
var response = await user.login();
if (response.success) {
showSuccess("User was successfully login!");
setState(() {
isLoggedIn = true;
});
} else {
showError(response.error!.message);
}
To build this function, follow these steps:
- Create a new
ParseUser
class instance with the commandParseUser(username, password, null);
using the data entered in the app. The e-mail field is not necessary and must be informed with null. - Call the
login
function, which will create aSession
in your database in the Parse Dashboard and save the token to local storage - Check if the user login was successful. If it wasn’t successful, show the error description message.
The complete function should look like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
void doUserLogin() async {
final username = controllerUsername.text.trim();
final password = controllerPassword.text.trim();
final user = ParseUser(username, password, null);
var response = await user.login();
if (response.success) {
showSuccess("User was successfully login!");
setState(() {
isLoggedIn = true;
});
} else {
showError(response.error!.message);
}
}
To test it, click on the
Run
button in Android Studio/VSCode.
After providing the desired user credentials, you will see this message after pressing on Login if everything was successful:
Error handling can be tested if you try to login a user with invalid credentials:
You will get another error if you try to login with no password:
Step 4 - Code for Logout User
The User Logout function deletes the Session
object, which was created in the login function. It will clear this session on the device and log out of any linked services in your Parse server.
Search for the function doUserLogout
in the file main.dart
. Replace the code inside doUserLogout
with:
1
2
3
4
5
6
7
8
9
10
11
final user = await ParseUser.currentUser() as ParseUser;
var response = await user.logout();
if (response.success) {
showSuccess("User was successfully logout!");
setState(() {
isLoggedIn = false;
});
} else {
showError(response.error!.message);
}
To build this function, follow these steps:
- Get the current logged user using function
ParseUser.currentUser()
. - Call the
logout
function forParseUser
object, which will deleteSession
in your database and clean the token in the local storage. - Check if the user logout was successfull. If it wasn’t successful, show the error description message.
The complete code should look like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
void doUserLogout() async {
final user = await ParseUser.currentUser() as ParseUser;
var response = await user.logout();
if (response.success) {
showSuccess("User was successfully logout!");
setState(() {
isLoggedIn = false;
});
} else {
showError(response.error!.message);
}
}
To test it, click on the
Run
button in Android Studio/VSCode.
After providing the desired user credentials, you will see this message after pressing on Login if everything was successful:
Click the “Logout” button:
It’s done!
At the end of this guide, you can login and logout Parse Users of your app using Parse Server core features through Back4App!