Quickblox Authentication in Flutter.

In todays world, the companies which want there own messenger with chat and Video Calling application can use Quickblox SDK and API to implement their own application. Quickblox has many features namely Authentication, Chating, Video calling and even Video Conference, it even has push notification and Address book (will be released soon).

I have explored some of these features in Quickblox SDK using Flutter. In this blog, we will be focusing only on Authentication and User related some queries rest of the features we will look in other blogs. So now let’s get started.

Check out this blog for more information regarding Flutter and Quickblox

Quickblox Setup

Once you done with register or login.

Create New App

Enter all details

I have named my project as Loop Calling.

Select your application in the dashboard

Under Overview you can look the applicationID, Key, Auth Secret everything will be mentioned here. Please note all this key and ids later we will be using in out Flutter.

Mobile Application Setup

Using Command line or Open VSCode and create a new Flutter Project.
I’m using MVVM with Clean Architecture. So now just focusing on the QuickBlox Authentication setup. You can check my github repo I have mentioned on the bottom of this blog.

Import Package

pubspec.yaml

Navigate to pubspec.yaml file and add in all the packages. Most importantly add quickblox_sdk in pubspec.yaml rest all is second priority. Im using flutter_riverpod for StateManagement. internet_connection_checker is used for checking the Internet Connection. shared_preferences is used for storing the User data & Sessions locally.

Android Configuration

Navigate to android > app > build.gradle file and update the minSdkVersion to 21.

Auth Keys Configuration

Copy all your appId, Keys and paste it here in this AppConfig class.
Now wrap this class above the MyApp in main.dart

Here when the AppConfig is initialized QB Setting will be initialized where all the required private keys will be passed.

UI

This UI is inspired from dribble by Kuba Zelichowski.

User Model

Create a User Model which has a QBUser and QBSession.

SharedPrefs Setup

Created a file for storing the User data and sessions in Local DB i.e is in Shared Prefs. addUser function is for storing the value in user_session variable. removeUser function is for removing the value from the shared prefs. getUser function is for getting the value from the DB

Quickblox Registration

Don’t get confused just focus on line 37 we need to pass the username and password for creating a new user. This createUser function returns a QBUser Optional Object. If that is null we are throwing a error else here we are automatically logging in. Additionally you can pass these many information but these are optional.

email: Users EmailID
blobId:
when we upload files that respective ID will be stored in this blobID
customData: Here we can store some other useful Information which is not mentioned in this attributes.
tagList: This is basically used to store tag of a user. This is useful when we search a user.

QuickBlox Login

Here in line 55, just passing username and password in QB.auth.login function please make sure you wrap in try catch else it will throw Error.
QBLoginResult will give user and session data. and now adding these data in our User Model class.

Updating to Local DB

Once the login is done we get the result as User or Failure. If returned value of the login is Failure it will be given to HomeScreen and Error will be shown.
If the return value is User we will be storing it in local db using shared prefs.

Quickblox Session

isLoggedIn is used to check the status of the auth whether is logged in or not.
When after QBlogin session will be created automatically. Here when the app is in SpashScreen this getter variable is called. Checking the QBSession is null or not if its null the screen will navigate to QuickBlox Logout else it will navigate to HomeScreen

QuickBlox Logout

To logout you need to use QB.auth.logout(). Here it automatically removes the Session of QB when this function is called and we need to make sure that it gets removed from our Local DB too. To do so we need to call the removeUser method it will clear the DB of user_session.

Outputs

Hurrah! and we are done with the Quickblox Authentication using Flutter. You can check my github repository to have a more detailed view of this functionality and UI.

Do you know you can press the clap👏 button 50 times? The higher you go, the more it motivates me to write more stuff for you guys!
Hello, I am Agnel Selvan. A noob developer. You can find me on Linkedin or stalk me on GitHub.

--

--

--

I’m an IOS, Flutter Developer and now a Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

His colleagues hate him for how good he is 😎 Learn his 3 secrets to being a successful developer!

Finally, InsureDAO testnet is out on Rinkeby testnet today, 6th August at 4:00 PM (UTC) !!

Microsoft Build 2018 : The Student Experience

Solving CodeWars challenge Title Case (6kyu)

Pixwell v9.3 — Modern Magazine

3 Ways To Connect Cisco Jabber And Microsoft Teams

Connect Cisco Jabber And Microsoft Teams

How to Use @auth Directive With Amplify GraphQL Schema For Beginners

An Introduction to Modules, Packages, and Imports in Python for Beginners

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Agnel Selvan

Agnel Selvan

I’m an IOS, Flutter Developer and now a Blogger

More from Medium

Flutter Hive (part 2 ) Advanced Modeling

Advanced Data Scrapping in Flutter

Keys in Flutter: Types and Uses

Flutter Auth Flow | Firebase_auth mail auth