Flutter | Microsoft Active Directory OAuth2 v2.0 Login with Scopes

We needed to build an iOS and Android native application that could log into our customer’s Active Directory account, do some custom scope things and pull authorized information via an API.

We chose Flutter as the front-end language because of many reasons better listed here.

After checking out every single authorization package that was available via pub.dev and several days of troubleshooting packages like Firebase Auth, Simple Auth, AAD OAuth, and others, we realized nothing currently available would fit our needs. Both Microsoft and Google have been slow in releasing Flutter packages that help integrate Active Directory painlessly.

So we’re writing this small article in the hopes that it might save you from having to spending countless hours reading through multiple articles and failing repeatedly.

(Note: We are not pro Dart or Flutter developers. This was our first shot at trying it out and are tracking our experience for future reference and just in case it might be helpful for others out there banging their heads against the same wall.)

1. Prep

After registering your application and taking note of your Client ID and Tenant ID. If your app allows everyone to log in, you can discard your org specific Tenant ID since you’ll be using “common” as your Tenant ID.

Set up your Redirect URI. If you’re not sure what to set as your redirect URI, we used these guides for iOS and Android to get moving quickly.

2. Login Screen

Present the user with a login screen so that they can properly authenticate. We used the Flutter Webview Plugin to present the user with a login screen using this URL format, take special note of the required query parameters.

Authorization Endpoint Format

We were able to successfully get the Auth Code via the Authorization Endpoint:

https://login.microsoftonline.com/common/oauth2/v2.0/authorize

But when we passed the Auth-Code via a POST request using either the Http package POST option or the Dio package, we weren’t getting the Auth Token so that we could make requests.

3. Microsoft OAuth2 v2.0 Implicit Grant Flow

Eventually, we stumbled upon this article on Implicit Grant Flows. Take note of the security considerations.

Set up Implicit Grant in your Microsoft registered app by going to the Authentication Tab and selecting the options under Implicit Grant.

portal.azure.com > App Registration

While you’re on the Azure Portal, set up your API Permissions as well by including ALL the permissions your app needs.

Now when you’re setting up the URL for Webview, pass it in this format instead:

Asks the Authorization Endpoint to send back an Authorization Token

Ask your user to login to get access to the appropriate Authorization Token by removing the &prompt=none option. Take special note of the required parameters vs. the optional. We ended up including the Client-ID, Response Type, Response Mode (Fragment), Redirect-URI and Scope query parameters.

Don’t send scopes as just user.read or contacts.read.

Send scopes as the Microsoft Graph format with spaces in between:

https%3A%2F%2Fgraph.microsoft.com%2Fuser.read%20offline_access

Ok, now you’ve hopefully got the Auth-Token coming back to you, now what?

4. Extract just the Auth Token

Make sure you understand the security stuff you need to handle, specifically around client and user impersonation.

Prep the token by using RegEx to remove the prefixed URL Details, suffixed query parameters and the “access_token=” part of the token. We used this RegEx for the prefixed URL:

(?:access_token)\=([\S\s]*)

This RegEx for the suffixed query parameters:

(?:&token_type)\=([\S\s]*)

And this RegEx to remove the “access_token=” part of the token:

(?:access_token=)

Here is an extract of our implementation:

Using RegEx to prep the Authorization Token

You can play around with RegEx to get the right expression by using RegExr. Be careful not to paste Access_Tokens, they are private to the user and are not to be shared lightly.

5. Query Microsoft Graph for data

Now that you’ve extracted just the Auth-Token you’re ready to query Microsoft Graph for your user’s data adding the Authorization Token to the header of the Get request, we used Dio in the example below:

Querying Microsoft Graph for user data

We ran into a bunch of 404, 401, Invalid Access Token issues and others to finally arrive on the flow above. Hopefully, if you’ve followed every step, you should now see your query results as well.

Best of luck on your Flutter journey! We’ll be adding more learnings along the way.