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
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.
