User Login

15 min

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)
An app created on Back4App:
- Note: Follow the New Parse App Tutorial to learn how to create a Parse App on Back4App.
An Flutter app 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.

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   import 'package:flutter/material.dart';
2   import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
3
4   void main() async {
5     WidgetsFlutterBinding.ensureInitialized();
6 
7     final keyApplicationId = 'YOUR_APP_ID_HERE';
8     final keyClientKey = 'YOUR_CLIENT_KEY_HERE';
9     final keyParseServerUrl = 'https://parseapi.back4app.com';
10
11    await Parse().initialize(keyApplicationId, keyParseServerUrl,
12        clientKey: keyClientKey, debug: true);
13
14    runApp(MyApp());
15  }
16
17  class MyApp extends StatelessWidget {
18    @override
19    Widget build(BuildContext context) {
20      return MaterialApp(
21        title: 'Flutter Login/Logout',
22        theme: ThemeData(
23          primarySwatch: Colors.blue,
24          visualDensity: VisualDensity.adaptivePlatformDensity,
25        ),
26        home: HomePage(),
27      );
28    }
29  }
30  
31  class HomePage extends StatefulWidget {
32    @override
33    _HomePageState createState() => _HomePageState();
34  }
35  
36  class _HomePageState extends State<HomePage> {
37    final controllerUsername = TextEditingController();
38    final controllerPassword = TextEditingController();
39    bool isLoggedIn = false;
40  
41    @override
42    Widget build(BuildContext context) {
43      return Scaffold(
44          appBar: AppBar(
45            title: const Text('Flutter Login/Logout'),
46          ),
47          body: Center(
48            child: SingleChildScrollView(
49              padding: const EdgeInsets.all(8),
50              child: Column(
51                crossAxisAlignment: CrossAxisAlignment.stretch,
52                children: [
53                  Container(
54                    height: 200,
55                    child: Image.network(
56                        'http://blog.back4app.com/wp-content/uploads/2017/11/logo-b4a-1-768x175-1.png'),
57                  ),
58                  Center(
59                    child: const Text('Flutter on Back4App',
60                        style:
61                            TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
62                  ),
63                  SizedBox(
64                    height: 16,
65                  ),
66                  Center(
67                    child: const Text('User Login/Logout',
68                        style: TextStyle(fontSize: 16)),
69                  ),
70                  SizedBox(
71                    height: 16,
72                  ),
73                  TextField(
74                    controller: controllerUsername,
75                    enabled: !isLoggedIn,
76                    keyboardType: TextInputType.text,
77                    textCapitalization: TextCapitalization.none,
78                    autocorrect: false,
79                    decoration: InputDecoration(
80                        border: OutlineInputBorder(
81                            borderSide: BorderSide(color: Colors.black)),
82                        labelText: 'Username'),
83                  ),
84                  SizedBox(
85                    height: 8,
86                  ),
87                  TextField(
88                    controller: controllerPassword,
89                    enabled: !isLoggedIn,
90                    obscureText: true,
91                    keyboardType: TextInputType.text,
92                    textCapitalization: TextCapitalization.none,
93                    autocorrect: false,
94                    decoration: InputDecoration(
95                        border: OutlineInputBorder(
96                            borderSide: BorderSide(color: Colors.black)),
97                        labelText: 'Password'),
98                  ),
99                  SizedBox(
100                   height: 16,
101                 ),
102                 Container(
103                   height: 50,
104                   child: TextButton(
105                     child: const Text('Login'),
106                     onPressed: isLoggedIn ? null : () => doUserLogin(),
107                   ),
108                 ),
109                 SizedBox(
110                   height: 16,
111                 ),
112                 Container(
113                  height: 50,
114                   child: TextButton(
115                     child: const Text('Logout'),
116                     onPressed: !isLoggedIn ? null : () => doUserLogout(),
117                   ),
118                 )
119               ],
120             ),
121           ),
122         ));
123   }
124 
125   void showSuccess(String message) {
126     showDialog(
127       context: context,
128       builder: (BuildContext context) {
129         return AlertDialog(
130           title: const Text("Success!"),
131           content: Text(message),
132           actions: <Widget>[
133             new TextButton(
134               child: const Text("OK"),
135               onPressed: () {
136                 Navigator.of(context).pop();
137               },
138             ),
139           ],
140         );
141       },
142     );
143   }
144 
145   void showError(String errorMessage) {
146     showDialog(
147       context: context,
148       builder: (BuildContext context) {
149         return AlertDialog(
150           title: const Text("Error!"),
151           content: Text(errorMessage),
152           actions: <Widget>[
153             new TextButton(
154               child: const Text("OK"),
155               onPressed: () {
156                 Navigator.of(context).pop();
157               },
158             ),
159           ],
160         );
161       },
162     );
163   }
164 
165   void doUserLogin() async {
166    
167   }
168 
169   void doUserLogout() async {
170    
171   }
172 }
173

When debug parameter in function Parse().initialize is true, allows displaying Parse API calls on the console. This configuration can assist in debugging the code. It is advisable to disable debug in the release version.

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.

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   final username = controllerUsername.text.trim();
2       final password = controllerPassword.text.trim();
3
4       final user = ParseUser(username, password, null);
5 
6       var response = await user.login();
7
8       if (response.success) {
9         showSuccess("User was successfully login!");
10        setState(() {
11          isLoggedIn = true;
12        });
13      } else {
14        showError(response.error!.message);
15      }

To build this function, follow these steps:

Create a newParseUser class instance with the command ParseUser(username, password, null); using the data entered in the app. The e-mail field is not necessary and must be informed with null.
Call thelogin function, which will create a Session 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     void doUserLogin() async {
2       final username = controllerUsername.text.trim();
3       final password = controllerPassword.text.trim();
4
5       final user = ParseUser(username, password, null);
6
7       var response = await user.login();
8
9       if (response.success) {
10        showSuccess("User was successfully login!");
11        setState(() {
12          isLoggedIn = true;
13        });
14      } else {
15        showError(response.error!.message);
16      }
17    }

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:

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       final user = await ParseUser.currentUser() as ParseUser;
2       var response = await user.logout();
3
4       if (response.success) {
5         showSuccess("User was successfully logout!");
6         setState(() {
7           isLoggedIn = false;
8         });
9       } else {
10        showError(response.error!.message);
11      }