Get Started with Flutter Authentication in WSO2 Identity Server
Tags: Oauth2, Oidc, Wso2 Identity Server, Flutter, Dart

Get Started with Flutter Authentication in WSO2 Identity Server Yasin Jan 27·8 min read

Flutter is the Google’s new UI toolkit created for developers to build beautiful cross-platform applications. In this article, you will learn how to secure your Flutter application with WSO2 Identity Server using the open-source Flutter flutter_appauth plugin that wraps the native AppAuth library. You can find code developed throughout the article in this GitHub repository.

First Things First

Before proceeding with this article, you need a working knowledge of Flutter (for the most part). If you need help getting started, you can follow the beginners guide in Flutter website. For state management we utilize the BLoC pattern to handle our application events and states. For that, we use the awesome library called flutter_bloc.

What You’ll Build?

In this article, you will build an application that allows users to log in or sign up using basic authentication credentials. As you can see in the below figures login and signup forms are already developed for you. The application will use the authentication portal provided by WSO2 Identity Server.

Sample Application Screenshots

Clone the Sample Application

You can scaffold a brand new project using the Flutter CLI tool and work your way up till the end. But however, I recommend you to clone the sample application and focus on the service and logic layer of the application instead of the UI.

Structure of the Application

Below figure illustrates how our sample application is structured. We use this structure to separate the business logic layer and data layer from our UI layer.

Application Structure

bloc/ — This package contains all the bloc related files. Under this package we have only one folder called auth/ which is responsible for handling the authentication logic events and state.

This package contains all the bloc related files. Under this package we have only one folder called which is responsible for handling the authentication logic events and state. data/ — This package contains all the models, services, etc. required to handle the authentication requests. In a typical flutter project folders under this package will scatter in lib/ but I think this approach is much more scalable and maintainable.

This package contains all the models, services, etc. required to handle the authentication requests. In a typical flutter project folders under this package will scatter in but I think this approach is much more scalable and maintainable. ui/ — This package contains all the presentation related files and folders. We will list all the screens under screens/ folder and for reusable widgets we use the widgets/ folder.

This sample application has a completely decoupled layers that can be reused in you own project. If you aren’t really interested in the UI then you can just reuse the bloc/ and data/ folders in to your project. Alright, now we know how our sample application is structured. Let’s focus on integrating the WSO2 Identity Server authentication into our application.

Throughout the article we will be focusing more on the BLoC and Data layers since UI is not our main focus here…

Installing Dependencies

This sample Flutter project requires below dependencies.

flutter_appauth — A wrapper package for flutter which uses AppAuth as the underneath implementation. Developed by Michael Bui. flutter_secure_storage — A wrapper package for flutter which uses KeyStore and KeyChain. Developed by German Saprykin flutter_bloc — A pure dart package for maintaining Flutter application state. Developed by Felix Angelov. equatable — Another dart package developed by Felix Angelov to deep compare equalities in dart objects. dio — A HTTP client library package developed by Flutter China Community jiffy — A date time package inspired by momentJS for parsing, manipulating, querying and formatting dates. pretty_json — A small wrapper library for pretty printing JSON objects in a more human readable format.

Then you can add these dependencies into your pubspec.yaml file located under the project root directory.

dependencies:

flutter:

sdk: flutter

flutter_appauth: ^0.9.2+6

flutter_secure_storage: ^3.3.5

flutter_bloc: ^6.1.1

equatable: ^1.2.5

dio: ^3.0.10

jiffy: ^3.0.1

pretty_json:



# UI Dependencies

flutter_svg: ^0.18.1

google_fonts: ^1.1.2

flutter_easyloading: ^2.2.2

Configure Dependencies

flutter_appauth — Since this package wraps AppAuth native libraries, it requires some additional platform level configurations. We need to configure a callback URL to receive the authentication code once the user successfully authenticated with the WSO2 Identity Server.

A callback URL is a mechanism by which an authorization server communicates back to your application. Or in WSO2 Identity Server, it is the exact location in the service provider’s application where an access token would be sent.

You need to have a unique redirect scheme for your application. For example, com.domain.sample.app Once you have a unique scheme you can add below configurations to relevant files as follows: -

Update the app level build.gradle file located under android/app/build.gradle

defaultConfig {

...

manifestPlaceholders = [

// Replace with your own custom scheme

'appAuthRedirectScheme': 'org.wso2.cloud.flutterdemo'

]

}

Update the Info.plist file located under ios/Runner/Info.plist You need add these values to the top level <dict>

<key>CFBundleURLTypes</key>

<array>

<dict>

<key>CFBundleTypeRole</key>

<string>Editor</string>

<key>CFBundleURLSchemes</key>

<array>

<string>org.wso2.cloud.flutterdemo</string>

</array>

</dict>

</array>

2. flutter_secure_storage — Finally, you need to bump the android minSdkVersion from 18 to 19 to compile flutter_secure_storage dependency.

defaultConfig {

applicationId "com.wso2.flutterauth"

minSdkVersion 19

...

}

If you run into any issue make sure you have followed the steps above correctly. Also, for Android if you plan to compile your project for AndroidX then you need to configure <queries> as explained in the flutter_appauth documentation. You can find these configurations in the sample application as well.

Setup WSO2 Identity Server

WSO2 Identity Server is an identity and entitlement management server that facilitates security while connecting and managing multiple identities across with multi tenancy support and different application stacks.

In order to integrate WSO2 Identity Server into your Flutter application, you need to have a working pack (presumably 5.11.0 ). If you do not have a pack yet then you can download the latest one for free.

After setting up the server you can follow the steps below to setup an custom application to support flutter authentication: -

Go to the service providers section in your management console.

section in your management console. Click on the Add button.

button. Enter a name for your application (e.g., FlutterSampleApp)

Mandate allowed grant types using the checkbox-es.

using the checkbox-es. Configure the callback URL and enable PKCE mandatory checkbox.

and enable checkbox. Check allow authentication without client secret

Setting up a WSO2 Identity Server Service Provider

Sometimes you may run into SSL issues if you are trying to up the server locally and integrating it to flutter_appauth. You can follow this article to overcome those issues.

Integrating WSO2 Identity Server with Flutter