METHODS TO REGISTER AND LOGIN A USER USING FLUTTER

Authentication is one of the important features of any application. It is when the system checks login credentials to see if it recognizes a user, and confirms that they should be logged in. It helps the application to keep track of its users and prevent unnecessary malware.

Various methods which can be used by the User are mentioned below.

1. Sign up
2. Sign in
3. SSO

We are talking about the act of verifying identity, making sure users are who they say they are. The most common example of user authentication is by using a username/email and a password to access an application.

For any user to access an app he has to provide a username/email and a password which help’s the app to verify the identity of the user.

First, the user has to register himself in the app. By providing a few details such as name, email, or a unique username. And has to set a secret key for eg- a strong password.

Below mentioned method helps us to create a registration page in flutter which helps a user to register.

• Creating a Sign-up page using Flutter

Creating a Sign-up page is quite easy using Flutter

• Create a Flutter project using command flutter create project-name and under the lib folder create a new dart file (a file with dart extension).
• Import material dart (import ‘package:flutter/material.dart’;).
• Create a Stateful widget with a proper class name.
• Return a Scaffold widget.
• And create your UI using various widgets available in the material import.
• Communicate with the backend using an API and create a proper model using proper state management present in Flutter for eg: provider, Bloc.
• If you get a successful response from the backend then navigate the User to the next screen.
• Else by using the try-catch method show the error given by the backend.

Below are some difficulties which I faced while creating the signup page and their resolution:-

• Proper navigation to be given when the user registers and navigates to the home screen.
• The Android back button onPressed should always exit the app and not navigate back to the Registration page. To avoid it use the OnWillPop widget rather than navigator.pop().
• Proper validation to be given under form fields. Using Regex can save you. Using proper keyboard type is recommended for a better user experience.
• The form fields and the input parameters should be responsive to any android device (Mobile). Use Screen utils when displaying forms in a container.
• Displaying the error message from the backend using a dialog box improves user experience.
• Using a loader when authenticating will improve the user experience. For eg: use the CircularProgressIndicator widget to show a progress indicator.
• Using the TextFormField widget is recommended as it has a validation parameter that will help users to know where they went wrong.

After a user is registered in the app he has created himself a username and a password which he can use to log in to the app from the SignIn page.

• Creating a Sign-in page using Flutter

After we have successfully registered a user. We now have to add a Sign-in page. To create a sign-in page follow the steps mentioned in the sign-up flow and create your own UI using material widgets.

To keep the user signed in even after the app restarted we need to save user data ( like access token, refresh token ) in shared preferences once the user logs-in into our application.

• SSO ( SINGLE SIGN-ON )

Definition: Single sign-on (SSO) is an authentication method that enables users to securely authenticate with multiple applications and websites by using just one set of credentials.

SSO is a session and user authentication service that allows a user to use one set of login credentials for multiple apps. SSO is a federated identity management arrangement; it can also be called an identity federation. The framework which it uses is OAuth, which allows account information to be used by third-party services like google without exposing the user’s secret key (password). Common SSO services include offerings from Google, Facebook, Github, etc. They log the user on to the target app by replaying user credentials.

The Advantage of using SSO is that it brings convenience to the users as they have minimal passwords to remember, it streamlines the signing on.

The disadvantage of SSO is it is a single-way access point which on failure can be attacked by attackers. If the availability is lost for the primary app or account then the users might be logged out of multiple apps.

Here we are using an SSO service provided by Google. Using Flutter we are implementing the UI.

• Google Sign in

The procedure is different than simple authentication where you provide your email and password.

• Create a Firebase account in the console and create a project.
• Inside the project, register the app (android app/ iOS app) according to your requirement.

I will be considering only the android app for this blog.

• Firstly download the google services.json file and place it inside the (android/app) folder.
• Add the SHA-1 algorithm, without this SHA-1 algorithm google sign-in, won’t work.
• If you are using your own backend then go to Google developers console, select your respective project and go to credentials and copy the client id and web client which will be required for the backend.
• Then add dependencies/plugins in the build.gradle files in app-level and project level as suggested in firebase.
• In pubspec.yaml file download Google sign-in package which is available in the pub dev.
• Create UI as per your choice.
• Use the google Sign-in package in the app and get started.

Below are some difficulties which I faced while creating the google SignIn page and their resolution:-

• Register the app properly following all the steps in Firebase.
• SHA 1 key must be added to your app in Firebase.
• If you get com.google.android.gms.common.api.ApiException error then check if you have added the SHA -1 key and plugins. Also, check whether you have added the google JSON file at the proper location.
• If you get the id token as null error, then check the SHA 1 key registered in your firebase.

These are the various authentications I have implemented. Learning makes you Perfect. Happy Learning!