User Login

15min
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)
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.
- 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:
Dart
 import 'package:flutter/material.dart';
 import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
3
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();

   final keyApplicationId = 'YOUR_APP_ID_HERE';
   final keyClientKey = 'YOUR_CLIENT_KEY_HERE';
   final keyParseServerUrl = 'https://parseapi.back4app.com';
10
  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, debug: true);
13
  runApp(MyApp());
}
16
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 {
  
 }
}
173
 import 'package:flutter/material.dart';
 import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
3
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();

   final keyApplicationId = 'YOUR_APP_ID_HERE';
   final keyClientKey = 'YOUR_CLIENT_KEY_HERE';
   final keyParseServerUrl = 'https://parseapi.back4app.com';
10
  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, debug: true);
13
  runApp(MyApp());
}
16
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 {
  
 }
}
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.
- 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.
﻿
- 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:
Dart
 final username = controllerUsername.text.trim();
     final password = controllerPassword.text.trim();
3
     final user = ParseUser(username, password, null);

     var response = await user.login();
7
     if (response.success) {
       showSuccess("User was successfully login!");
      setState(() {
        isLoggedIn = true;
      });
    } else {
      showError(response.error!.message);
    }
 final username = controllerUsername.text.trim();
     final password = controllerPassword.text.trim();
3
     final user = ParseUser(username, password, null);

     var response = await user.login();
7
     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 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:
Dart
   void doUserLogin() async {
     final username = controllerUsername.text.trim();
     final password = controllerPassword.text.trim();
4
     final user = ParseUser(username, password, null);
6
     var response = await user.login();
8
     if (response.success) {
      showSuccess("User was successfully login!");
      setState(() {
        isLoggedIn = true;
      });
    } else {
      showError(response.error!.message);
    }
  }
   void doUserLogin() async {
     final username = controllerUsername.text.trim();
     final password = controllerPassword.text.trim();
4
     final user = ParseUser(username, password, null);
6
     var response = await user.login();
8
     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:
﻿
- 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:
Dart
     final user = await ParseUser.currentUser() as ParseUser;
     var response = await user.logout();
3
     if (response.success) {
       showSuccess("User was successfully logout!");
       setState(() {
         isLoggedIn = false;
       });
     } else {
      showError(response.error!.message);
    }
     final user = await ParseUser.currentUser() as ParseUser;
     var response = await user.logout();
3
     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 functionParseUser.currentUser().
Call thelogout function for ParseUser object, which will delete Session 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:
Dart
   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);
    }
  }
   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!
Updated 04 Jun 2024
Did this page help you?
User Registration
Email Verification
User Login

User Login and Logout for Flutter using Parse Server

Introduction

Goal

Prerequisites

Understanding the Login/Logout App

Let’s get started!

1 - Create the Login/Logout App Template

2 - Connect Template to Back4app Project

3 - Code for Login User

4 - Code for Logout User

It’s done!
