Authenticate your Flutter Application using Asgardeo

Welcome back to another article about Flutter Framework. Today we will look at how to authenticate your flutter application using Asgardeo 👨‍💻 .

Before moving on let’s first look at what Asgardeo is.

What is Asgardeo❓

Asgardeo is a SaaS-based customer identity and access management (CIAM) solution that lets you design a smarter, more engaging, and data-driven customer experience (CX).

Now let’s code!

First of all, let’s configure Asgardeo!

Configure Asgardeo 💻

You must have an Asgardeo account to integrate Asgardeo with your Flutter application. You may use an account that you already have. If not, register for a free account by clicking here.

After creating an Asgardeo account, follow the steps below to set up an application:

Create a user 👩

Let’s first, create a user in the newly created organisation. We will use this user to log into our Flutter application.

• Go to the “Manage” section and click on the “+ Add User” button.

• Fill in the user’s details and click on “Finish”, to create the user.

Create an application 📘

Now we will create an application to communicate with our Flutter application

• First, go to the Develop section of the interface.

• Click on the “+ New Application” button.

• Click on the “Mobile Application”.

• Enter a name for your application. Here we will use the name of the application as “FlutterConnect” and set Authorized Redirect URL as,

com.wso2.flutterconnect://login-callback

and click on “Register” to create the application.

• Go to the User Attributes section and select Email, Full Name and Username attributes [These attributes will be shared with our Flutter application]. Also, you can send other attributes as well, but right now we will be only using these attributes. Finally, make sure to press Update to save the configurations.

Now you have set up the configuration in the Asgardeo, let’s move on to coding with Flutter !!

Install Dependencies 🐱‍🚀

This Flutter project requires one main dependency:

• flutter_appauth : A wrapper package around AppAuth for Flutter. AppAuth authenticates and authorises users and is compatible with the PKCE extension. [This is the main dependency that is needed when authenticating your Flutter application with Asgardeo].
• Also, in the application codebase, you will find some other dependencies as well, but this is the main dependency that is required for the authentication process.

Sneak peek 🤫

Let’s take a quick sneak peek at what you are going to build.

This will be a simple application that will make use of Asgardeo to log in as a user. It has a profile interface as well to show detailed information about the logged-in user and a logout button.

Now we Code 👩‍💻🧑🏽‍💻👨🏿‍💻!

As the first step, we will look at how to configure the redirect URL.

Configure Android 🤖

Add the following section to the defaultConfig section in the android/app/build.gradle file.

...
defaultConfig {
       ...
       manifestPlaceholders += [
                'appAuthRedirectScheme': 'com.wso2.flutterconnect'
        ]
    }
...

The value appAuthRedirectScheme must be in lowercase letters.

Configure iOS 🍎

Add the callback URL by adding the following entry to the <dict> element in the ios/Runner/Info.plist file.

...
<plist version="1.0">
<dict>
    ...
   <key>CFBundleURLTypes</key>
   <array>
      <dict>
         <key>CFBundleTypeRole</key>
         <string>Editor</string>
         <key>CFBundleURLSchemes</key>
         <array>
            <string>com.wso2.flutterconnect</string>
         </array>
      </dict>
   </array>
</dict>
</plist>

Now we will move on to the Flutter part!

Since the project is a bit large to put in a Medium article, I will mainly focus on how the login, logout, and get user details functions are implemented. But will give you the GitHub repository of the application, so you can refer to it later.

Login Function ➡️

Future<AuthorizationTokenResponse?> loginAction() async {
    try {
      final AuthorizationTokenResponse? result =
          await FlutterAppAuth().authorizeAndExchangeCode(
        AuthorizationTokenRequest(
          <CLIENT ID>,
          <REDIRECT URL>,
          discoveryUrl: <DISCOVERY URL>,
          scopes: <LIST OF SCOPES>,
        ),
      );

      return result;
    } catch (e, s) {
      inspect("login error: $e - stack: $s");
      throw Exception("Failed to login");
    }
  }

Logout Function ⬅️

Future<EndSessionResponse?> logoutAction(
      AuthorizationTokenResponse authorizationTokenResponse) async {

    try {
      final EndSessionResponse? result = await FlutterAppAuth().endSession(
        EndSessionRequest(
          idTokenHint: <ID TOKEN>,
          postLogoutRedirectUrl: <REDIRECT URL>,
          discoveryUrl: <DISCOVERY URL>,
        ),
      );

      return result;
    } catch (e, s) {
      inspect("logout error: $e - stack: $s");
      throw Exception("Failed to logout");
    }
  }

Get user details function 👩‍🦲

Future<Map<String, dynamic>> getUserDetails(AuthorizationTokenResponse authorizationTokenResponse) async {
   
    final response = await http.get(
      Uri.parse(<USER INFO URL>),
      headers: {"Authorization": "Bearer $<ACCESS TOKEN>"},
    );

    if (response.statusCode == 200) {
      return jsonEncode(response.body);
    } else {
      throw Exception('Failed to get user details');
    }
  }

You can find the DISCOVERY URL& USER INFO URL in the info section of the application interface.

That’s it. Now you know how to authenticate a Flutter application with Asgardeo 🎉.

GitHub repository of the Application 🐱

As promised, here is the link to the Github repository for the application. Also, you can find some additional details on how to set up the application in the Readme.md file.

Conclusion ✌

This is the end of the article. Before I finish, I want to say if I have made any mistakes or if there is an easy way to do this, please add a comment below about it. If you find this article useful, feel free to share this with your friends and colleagues.

Thank you, and HAPPY CODING! 👩‍💻🧑🏽‍💻👨🏿‍💻