{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/guest-post/authenticating-flutter-apps/","result":{"data":{"markdownRemark":{"id":"a2592925-b065-5c8a-9549-069c4851c3e4","excerpt":"Introduction User authentication is the process of validating a user's identity to ensure that they are who they claim to be. Implementing user authentication…","html":"

Introduction

\n

User authentication is the process of validating a user's identity to ensure that they are who they claim to be. Implementing user authentication in your application is critical to prevent unauthorized users from accessing sensitive information.

\n

This tutorial focuses on implementing user authentication and registration in Flutter applications using the LoginRadius API.

\n

Prerequisites

\n

If you wish to follow along with this tutorial, you must have the following set up:

\n\n

This tutorial is verified with Flutter v2.5.1 and Android Studio v3.5.

\n

Getting Started with LoginRadius

\n

What is LoginRadius?

\n

LoginRadius is a cloud-based, SaaS Customer Identity and Access Management (CIAM) platform that provides developers and businesses simplified and robust features for managing customer identity, privacy, and access. LoginRadius offers high-level, secure, and well-documented APIs for integrating User Authentication and Single Sign-on (SSO) into your application.

\n

Why use LoginRadius?

\n

LoginRadius offers:

\n\n

So, with everything out of the way, let's get started.

\n

Setting Up LoginRadius for Your Application

\n

After creating an account with LoginRadius, it sets up a free app for you. This is the app in which you would integrate the LoginRadius API with Flutter. Here my app name is “tayy”.

\n

\n \n \n

\n

Next, you need to obtain your LoginRadius API credentials. To do so, login to your Dashboard and navigate to the Configuration tab in the sidebar menu. You will find your API credentials under the API Key and Secret section. Copy and store your APP Name, API Key, and API Secret somewhere safe and easily accessible.

\n

\n \n \n

\n

Integrating LoginRadius API with Your Flutter Application.

\n

Step 1: Create a New Flutter project

\n

Create a new Flutter project and navigate to the folder of the application by running the following commands in your terminal:

\n
flutter create loginradius_example\ncd loginradius_example
\n

Step 2: Install Dependencies

\n

Next, you need to install the dio package as a dependency in our project. The dio package is a powerful HTTP client used for making network requests.

\n

Run the following command to get the newest version of the dio package in your project.

\n
flutter pub add dio
\n

Then, install the dependency by running flutter pub get in your terminal.

\n

Project Structure

\n

The project is being structured in this order:

\n

\"Folder

\n\n

Step 3: Setting up the API Client Class

\n

Create a new dart file named api_client.dart and import the dio package into the file, as follows:

\n
import 'package:dio/dio.dart';
\n

Now let’s create a class named ApiClient and initialize the Dio object in it. The ApiClient class will contain several methods for making network requests based on your features, including User Registration, User Login, Get User Profile Data, and User Logout.

\n
import 'package:dio/dio.dart';\n\nclass ApiClient {\n   final Dio _dio = Dio();\n\n    Future<Response> registerUser() async {\n        //IMPLEMENT USER REGISTRATION\n    }\n\n    Future<Response> login() async {\n        //IMPLEMENT USER LOGIN\n    }\n\n    Future<Response> getUserProfileData() async {\n        //GET USER PROFILE DATA\n    }\n\n    Future<Response> logout() async {\n        //IMPLEMENT USER LOGOUT\n     }\n}
\n

Step 4: Implement User Registration

\n

Before implementing the user registration functionality, you must first obtain the user registration endpoint URL from the LoginRadius API Docs.

\n

After retrieving the endpoint URL, you need to send a POST request to the endpoint using the Dio package by passing in:

\n\n
class ApiClient {\n       //...\n       Future<Response> registerUser(Map<String, dynamic>? userData) async {\n        try {\n          Response response = await _dio.post(\n              'https://api.loginradius.com/identity/v2/auth/register',  //ENDPONT URL\n              data: userData, //REQUEST BODY\n              queryParameters: {'apikey': 'YOUR_API_KEY'},  //QUERY PARAMETERS\n              options: Options(headers: {'X-LoginRadius-Sott': 'YOUR_SOTT_KEY', //HEADERS\n          }));\n          //returns the successful json object\n          return response.data;\n        } on DioError catch (e) {\n          //returns the error object if there is\n          return e.response!.data;\n        }\n      }\n    }
\n

Step 5: Implement User Login

\n

The below code snippet shows how you’ll send a POST request to the LoginRadius login endpoint URL https://api.loginradius.com/identity/v2/auth/login, passing in your apiKey as a query parameter and the email and password of the user as the request body.

\n
class ApiClient {\n       //...\n       Future<Response> login(String email, String password) async {\n        try {\n          Response response = await _dio.post(\n            'https://api.loginradius.com/identity/v2/auth/login',\n            data: {\n              'email': email,\n              'password': password\n            },\n            queryParameters: {'apikey': 'YOUR_API_KEY'},\n          );\n          //returns the successful user data json object\n          return response.data;\n        } on DioError catch (e) {\n          //returns the error object if any\n          return e.response!.data;\n        }\n      }\n    }
\n

Step 6: Get User Profile Data

\n

To retrieve the user profile details, send a GET request to the Read Profile Endpoint URL https://api.loginradius.com/identity/v2/auth/account, passing in your apiKey as a query parameter and the user's access token as the header.

\n
\n

The user’s access token is gotten from the successful response object of the User Login endpoint.

\n
\n
class ApiClient {\n       //...\n\n       Future<Response> getUserProfileData(String accesstoken) async {\n        try {\n          Response response = await _dio.get(\n            'https://api.loginradius.com/identity/v2/auth/account',\n            queryParameters: {'apikey': 'YOUR_API_KEY'},\n            options: Options(\n              headers: {\n                'Authorization': 'Bearer ${YOUR_ACCESS_TOKEN}',\n              },\n            ),\n          );\n          return response.data;\n        } on DioError catch (e) {\n          return e.response!.data;\n        }\n    }
\n

Step 7: Implement User Logout

\n

Finally, to implement the user logout functionality, you would send a GET request to the Invalidate User Access Token endpoint URL https://api.loginradius.com/identity/v2/auth/access_token/InValidate. This API call invalidates the user's active access token, requiring them to re-authenticate if they want to access their data.

\n
class ApiClient {\n       //...\n\n      Future<Response> logout(String accessToken) async {\n        try {\n          Response response = await _dio.get(\n            'https://api.loginradius.com/identity/v2/auth/access_token/InValidate',\n            queryParameters: {'apikey': ApiSecret.apiKey},\n            options: Options(\n              headers: {'Authorization': 'Bearer $accessToken'},\n            ),\n          );\n          return response.data;\n        } on DioError catch (e) {\n          return e.response!.data;\n        }\n      }\n    }
\n

That concludes the ApiClient class. Next, you'll build the UI for your Flutter application, making use of the methods you just created in the ApiClient class.

\n

Building the UI

\n

Your Flutter application will consist of four screens, which include:

\n\n

Let’s begin by building the Registration Screen.

\n

Registration Screen

\n

The RegistrationScreen has two TextFormField widgets that serve as our email and password fields, as well as an ElevatedButton to handle event submission, as shown in the code snippet below from the register.dart file.

\n
 //...\n    @override\n    Widget build(BuildContext context) {\n      Scaffold(\n          backgroundColor: Colors.blueGrey[200],\n          body: Form(\n            key: _formKey,\n            child: SizedBox(\n              width: size.width,\n              height: size.height,\n              child: Align(\n                alignment: Alignment.center,\n                child: Container(\n                  width: size.width * 0.85,\n                  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 30),\n                  decoration: BoxDecoration(\n                    color: Colors.white,\n                    borderRadius: BorderRadius.circular(20),\n                  ),\n                  child: SingleChildScrollView(\n                    child: Column(\n                      crossAxisAlignment: CrossAxisAlignment.start,\n                      children: <Widget>[\n                        const Center(\n                          child: Text(\n                            "Register",\n                            style: TextStyle(\n                              fontSize: 30,\n                              fontWeight: FontWeight.bold,\n                            ),\n                          ),\n                        ),\n                        SizedBox(height: size.height * 0.05),\n                        TextFormField(\n                          validator: (value) =>\n                              Validator.validateEmail(value ?? ""),\n                          controller: emailController,\n                          keyboardType: TextInputType.emailAddress,\n                          decoration: InputDecoration(\n                            hintText: "Email",\n                            isDense: true,\n                            border: OutlineInputBorder(\n                              borderRadius: BorderRadius.circular(10),\n                            ),\n                          ),\n                        ),\n                        SizedBox(height: size.height * 0.03),\n                        TextFormField(\n                          obscureText: _showPassword,\n                          validator: (value) =>\n                              Validator.validatePassword(value ?? ""),\n                          controller: passwordController,\n                          keyboardType: TextInputType.visiblePassword,\n                          decoration: InputDecoration(\n                            hintText: "Password",\n                            isDense: true,\n                            border: OutlineInputBorder(\n                              borderRadius: BorderRadius.circular(10),\n                            ),\n                          ),\n                        ),\n                        SizedBox(height: size.height * 0.06),\n                        Row(\n                          mainAxisAlignment: MainAxisAlignment.center,\n                          children: [\n                            Expanded(\n                              child: ElevatedButton(\n                                onPressed: _handleRegister,\n                                style: ElevatedButton.styleFrom(\n                                    primary: Colors.indigo,\n                                    shape: RoundedRectangleBorder(\n                                        borderRadius: BorderRadius.circular(10)),\n                                    padding: const EdgeInsets.symmetric(\n                                        horizontal: 40, vertical: 15)),\n                                child: const Text(\n                                  "Register",\n                                  style: TextStyle(\n                                    fontSize: 20,\n                                    fontWeight: FontWeight.bold,\n                                  ),\n                                ),\n                              ),\n                            ),\n                          ],\n                        ),\n                      ],\n                    ),\n                  ),\n                ),\n              ),\n            ),\n          ),\n        );\n    }\n    //...
\n

In the onPressed callback of the ElevatedButton widget, you'll handle the validation of your form data.

\n

If the form is validated, you pass your userData to the registerUser method from the ApiClient class for processing.

\n

If the response is an error, you show a snackbar with the error message. Otherwise, the user is redirected to the Login Screen.

\n
\n

In the following example, you've provided only a few user attributes as userData. To view the complete list of user attributes, please look at the body parameters of the User Registration API here.

\n
\n
Future<void> _handleRegister() async {\n    if (_formKey.currentState!.validate()) {\n    //show snackbar to indicate loading\n     ScaffoldMessenger.of(context).showSnackBar(SnackBar(\n        content: const Text('Processing Data'),\n        backgroundColor: Colors.green.shade300,\n      ));\n\n   //the user data to be sent\n    Map<String, dynamic> userData = {\n      "Email": [\n        {\n          "Type": "Primary",\n          "Value": emailController.text,\n        }\n      ],\n      "Password": passwordController.text,\n      "About": 'I am a new user :smile:',\n      "FirstName": "Test",\n      "LastName": "Account",\n      "BirthDate": "10-12-1985",\n      "Gender": "M",\n    };\n\n    //get response from ApiClient\n    dynamic res = await _apiClient.registerUser(userData);\n    ScaffoldMessenger.of(context).hideCurrentSnackBar();\n\n    //checks if there is no error in the response body.\n    //if error is not present, navigate the users to Login Screen.\n    if (res['ErrorCode'] == null) {\n      Navigator.push(context,\n          MaterialPageRoute(builder: (context) => const LoginScreen()));\n    } else {\n     //if error is present, display a snackbar showing the error messsage\n      ScaffoldMessenger.of(context).showSnackBar(SnackBar(\n        content: Text('Error: ${res['Message']}'),\n        backgroundColor: Colors.red.shade300,\n      ));\n    }\n  }\n}
\n

Login Screen

\n

The LoginScreen UI code is similar to the RegistrationScreen in that it also has two TextFormField widgets that serve as our email and password fields, as well as an ElevatedButton to handle event submission. So, for the sake of brevity, I’ll be leaving out the LoginScreen UI code and focusing mainly on the code to be written in the ElevatedButton onPressed callback in the login_screen.dart file.

\n
//...\n    //...\n       Future<void> loginUsers() async {\n        if (_formKey.currentState!.validate()) {\n          //show snackbar to indicate loading\n          ScaffoldMessenger.of(context).showSnackBar(SnackBar(\n            content: const Text('Processing Data'),\n            backgroundColor: Colors.green.shade300,\n          ));\n\n          //get response from ApiClient\n          dynamic res = await _apiClient.login(\n            emailController.text,\n            passwordController.text,\n          );\n          ScaffoldMessenger.of(context).hideCurrentSnackBar();\n\n          //if there is no error, get the user's accesstoken and pass it to HomeScreen\n          if (res['ErrorCode'] == null) {\n            String accessToken = res['access_token'];\n            Navigator.push(\n                context,\n                MaterialPageRoute(\n                    builder: (context) => HomeScreen(accesstoken: accessToken)));\n          } else {\n          //if an error occurs, show snackbar with error message\n          ScaffoldMessenger.of(context).showSnackBar(SnackBar(\n            content: Text('Error: ${res['Message']}'),\n            backgroundColor: Colors.red.shade300,\n          ));\n          }\n        }\n      }\n    //...
\n

The code snippet above is a method that first validates the form before passing the email and password values to the login method from the ApiClient class for handling.

\n

If the response is successful, you obtain the user’s access_token from the response data and pass it over to the HomeScreen. Otherwise, you display a snackbar with the error message that occurred.

\n

Then, you pass the loginUsers method you created above to the onPressed property of the ElevatedButton widget in the LoginScreen, as shown below.

\n
    ElevatedButton(\n        onPressed: loginUsers, //<--\n        style: ElevatedButton.styleFrom(\n        primary: Colors.indigo,\n        shape: RoundedRectangleBorder(\n               borderRadius: BorderRadius.circular(10)),\n               padding: const EdgeInsets.symmetric(\n                        horizontal: 40, vertical: 15)),\n        child: const Text("Login",\n            style: TextStyle(\n                fontSize: 20,\n                fontWeight: FontWeight.bold,\n            ),\n           ),\n         ),\n       ),
\n

Next, you need to provide a screen that reveals the user's profile data when they successfully log in, and the HomeScreen is there to do so.

\n

Home Screen

\n

The HomeScreen displays the user’s profile details using a FutureBuilder widget that accepts a future getUserData.

\n
      Future<Map<String, dynamic>> getUserData() async {\n        dynamic userRes;\n        userRes = await _apiClient.getUserProfileData(widget.accesstoken);\n        return userRes;\n      }
\n

The getUserData method above is used to retrieve details of a user by passing in the access_token obtained earlier from the LoginScreen to the ApiClient getUserProfileData method.

\n

To display the result of your getUserData method on our screen, use a FutureBuilder widget. The code snippet below shows how to use the FutureBuilder to get the results of the getUserData future in the home.dart file.

\n
    class HomeScreen extends StatefulWidget {\n      final String accesstoken;\n      const HomeScreen({Key? key, required this.accesstoken}) : super(key: key);\n      @override\n      State<HomeScreen> createState() => _HomeScreenState();\n    }\n    class _HomeScreenState extends State<HomeScreen> {\n      //instance of ApiClient class\n      final ApiClient _apiClient = ApiClient();\n\n      //get user data from ApiClient\n      Future<Map<String, dynamic>> getUserData() async {\n        dynamic userRes;\n        userRes = await _apiClient.getUserProfileData(widget.accesstoken);\n        return userRes;\n      }\n      @override\n      Widget build(BuildContext context) {\n        var size = MediaQuery.of(context).size;\n        return Scaffold(\n          backgroundColor: Colors.white,\n          body: SizedBox(\n              width: size.width,\n              height: size.height,\n              child: FutureBuilder<Map<String, dynamic>>(\n                future: getUserData(), //<---\n                builder: (context, snapshot) {\n                  if (snapshot.hasData) {\n                    if (snapshot.connectionState == ConnectionState.waiting) {\n                      return Container(\n                        height: size.height,\n                        width: size.width,\n                        color: Colors.blueGrey,\n                        child: const Center(\n                          child: CircularProgressIndicator(),\n                        ),\n                      );\n                    }\n                    //get results from snapshot\n                    String fullName = snapshot.data!['FullName'];\n                    String firstName = snapshot.data!['FirstName'];\n                    String lastName = snapshot.data!['LastName'];\n                    String birthDate = snapshot.data!['BirthDate'];\n                    String email = snapshot.data!['Email'][0]['Value'];\n                    String gender = snapshot.data!['Gender'];\n                    return Container(\n                      width: size.width,\n                      height: size.height,\n                      color: Colors.blueGrey.shade400,\n                      child: SingleChildScrollView(\n                        physics: const BouncingScrollPhysics(),\n                     //...\n                //...
\n

Finally, let's add the logout feature.

\n

Add an ElevatedButton widget to the HomeScreen.

\n
     TextButton(\n        onPressed: (){},\n        style: TextButton.styleFrom(\n        backgroundColor: Colors.redAccent.shade700,\n        shape: RoundedRectangleBorder(\n               borderRadius: BorderRadius.circular(5)),\n               padding: const EdgeInsets.symmetric(\n                    vertical: 15, horizontal: 25)),\n        child: const Text('Logout',\n          style: TextStyle(color: Colors.white),           ),\n        ),\n     ),
\n

On pressing the button, you'll call the logout method on the ApiClient class and pass in the access_token value, and then you route the user to the LoginScreen.

\n
     TextButton(\n        onPressed: () async {\n          await _apiClient.logout(widget.accesstoken);\n          Navigator.pushReplacement(\n            context, MaterialPageRoute(builder: (context) => const LoginScreen()));\n        },\n        style: TextButton.styleFrom(\n        backgroundColor: Colors.redAccent.shade700,\n        shape: RoundedRectangleBorder(\n               borderRadius: BorderRadius.circular(5)),\n               padding: const EdgeInsets.symmetric(\n                    vertical: 15, horizontal: 25)),\n        child: const Text('Logout',\n             style: TextStyle(color: Colors.white),\n          ),\n     ),
\n

\"Preview

\n

Conclusion

\n

LoginRadius provides high-level, secure, and well-documented APIs to ease the implementation of authentication and user identity management. This tutorial has discussed LoginRadius's benefits and how to use the LoginRadius APIs to handle user authentication and registration in a Flutter application.

\n

The complete source code of the demo application is available on GitHub.

\n","headings":[{"value":"Introduction","depth":2},{"value":"Prerequisites","depth":2},{"value":"Getting Started with LoginRadius","depth":2},{"value":"What is LoginRadius?","depth":3},{"value":"Why use LoginRadius?","depth":3},{"value":"Setting Up LoginRadius for Your Application","depth":2},{"value":"Integrating LoginRadius API with Your Flutter Application.","depth":2},{"value":"Step 1: Create a New Flutter project","depth":3},{"value":"Step 2: Install Dependencies","depth":3},{"value":"Project Structure","depth":3},{"value":"Step 3: Setting up the API Client Class","depth":3},{"value":"Step 4: Implement User Registration","depth":3},{"value":"Step 5: Implement User Login","depth":3},{"value":"Step 6: Get User Profile Data","depth":3},{"value":"Step 7: Implement User Logout","depth":3},{"value":"Building the UI","depth":3},{"value":"Registration Screen","depth":3},{"value":"Login Screen","depth":3},{"value":"Home Screen","depth":3},{"value":"Conclusion","depth":2}],"fields":{"slug":"/engineering/guest-post/authenticating-flutter-apps/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":"Developing Flutter apps? Learn how to implement user authentication and registration in your Flutter applications quickly with LoginRadius APIs.","title":"Flutter Authentication: Implementing User Signup and Login","canonical":null,"date":"February 17, 2022","updated_date":null,"tags":["Authentication","Flutter","API"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/52db7c04cea4a2d8a1eab648a60d075d/03979/user-authentication-for-flutter-apps.png","srcSet":"/static/52db7c04cea4a2d8a1eab648a60d075d/f5f11/user-authentication-for-flutter-apps.png 200w,\n/static/52db7c04cea4a2d8a1eab648a60d075d/6d133/user-authentication-for-flutter-apps.png 400w,\n/static/52db7c04cea4a2d8a1eab648a60d075d/03979/user-authentication-for-flutter-apps.png 800w,\n/static/52db7c04cea4a2d8a1eab648a60d075d/aca38/user-authentication-for-flutter-apps.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Yusuf Ahmed","github":null,"bio":"He is a Flutter developer and technical writer. He is focused on learning new technologies and making advancements in the world of tech.","avatar":null}}}},"pageContext":{"id":"a2592925-b065-5c8a-9549-069c4851c3e4","fields__slug":"/engineering/guest-post/authenticating-flutter-apps/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}