Flutter with Azure: How to sign into Flutter applications with Microsoft’s Azure ADB2C.

When I first started out building my Flutter mobile application, it was really challenging. I found no tutorial or video that would make me sign into my app in one go and it was really frustrating. I tried browsing Azure’s documentation but it turned out to be even more disastrous. The documentation is really old and obsolete. So, having finally successfully signed into my application now, I’ve decided to post this tutorial that will get your app up and running in one go.

Prerequisites:

1. Be sure to have your Flutter installed and working.
2. Install Android Studio. Here is a link to the installed: https://developer.android.com/studio
3. If you are on iOS, be sure to have also have Xcode installed.

Let’s start!

Firstly, we will need to create a new Flutter application. In order to do this, simply open Command Prompt (Windows) or terminal (Mac). Then, navigate into the directory that you want your application to be in and type flutter create <your_app_name> and press Enter. This will create a brand new application for you!

Next, open up your favourite IDE and open the project folder.

Now, we need to install a couple of dependencies to help us communicate with Azure.

Open up the file pubspec.yaml file and just under the line cupertino_icons, add these dependencies:

flutter_appauth: ^1.0.0
jwt_decode: ^0.3.1

Add the dependencies like so.

After doing this, head into your terminal and navigate to where this project is located. Type in the following command and hit enter: flutter pub get . This will install the dependencies for you.

Next, in your app folder, go to Android/app and open the build.gradle file and add the following code:

...
android {
    ...
    defaultConfig {
        ...
        manifestPlaceholders = [
                'appAuthRedirectScheme': '<your_app_name>'
        ]
    }
}

Replace the <your_app_name> with com.example.<your_app_name> . Please ensure that this value is all in lowercase otherwise you may have problems later on.

Next, navigate to Android/app/src/main and open the AndroidManifest.xml file. You’ll see a big <application>…</application> code block. Just after you see the </application> line, paste the code below:

<queries>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="https" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.APP_BROWSER" />
        <data android:scheme="https" />
    </intent>
</queries>

Now it’s time for IOS. Go to ios/Runner and open up the Info.plist file. Insert the following code just below the </dict> line.

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string><your_app_name></string>
        </array>
    </dict>
</array>

Again, Please replace the <your_app_name> with com.example.<your_app_name>.

Azure time!

Now we’ll need to set up a couple of things for Azure.

We will start by actually ADB2C instance (Base tenant). Since this process is very long, I have found Microsoft’s documentation that explains it clearly. You can view it here: https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-create-tenant

Now it is actually time to create the mobile application on the Azure side. Here are the steps:

1. Sign in to the Azure portal.
2. Select the Directory + subscription filter in the top menu, and then select the directory that contains your Azure AD B2C tenant.
3. In the left menu, select Azure AD B2C. Or, select All services and search for and select Azure AD B2C.
4. Select App registrations, and then select New registration.
5. Enter a Name for the application. For example, nativeapp1.
6. Under Supported account types, select Accounts in any organizational directory or any identity provider.
7. Under Redirect URI, use the drop-down to select Public client/native (mobile & desktop).
8. Enter a redirect URI with a unique scheme. Now this is a CRUCIAL step. Please follow this format: com.example.<your_app_name>://oauthredirect. There are important considerations when choosing a redirect URI:

Complete: The redirect URI must have a both a scheme and a path. In this case, the scheme is the com.example.<your_app_name> and the path is ://oauthredirect. The path must contain at least one forward slash after the domain. Don't include special characters in the URI, for example, underscores.

9. Under Permissions, select the Grant admin consent to openid and offline_access permissions check box.

10. Select Register.

Next, we need to set up a User Flow. This is a paramount step as it enables to communicate with Azure and the User Flow is actually responsible for sending us the data back into our application. Please follow this link here to make a User Flow: https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-create-user-flows?pivots=b2c-user-flow. When you actually Run the User flow like in the documentation, please DO NOT select https://jwt.ms for the reply URL in the drop-down menu. Instead, please choose the custom redirect URL that we made in the previous steps. A lot of people make this mistake and this is what fails their app. The jwt.ms URL is for web development but what we’re doing is mobile. If everything works fine, when you click run User Flow, you will be redirected to this page:

You can quit the web page now. Please do not click the Sign In or Sign Up button just as yet.

Getting the necessary information:

Before we get started, we need some information from Azure’s ADB2C application that we just created. These are:

1. The Client ID
2. Redirect URL or Reply URL
3. Authorize URL
4. Token URL
5. Policy name

Don’t worry, I will tell you how to get each of them. First, let’s start with the Client ID. In order to get this, go to your base tenant, click on App Registrations, select your app, and you’ll see something called the Application (Client) ID. Just copy and paste it in a .txt file or something of that equivalency.

Next, we have to get the redirect URL. This is just the URL that we made when creating the application. Just copy paste this in the .txt file as well because we need all these things later. After pasting the URL, please append a forward slash (/) at the end of the URL. This is a really crucial step otherwise when we run on an IOS device, it will fail to sign in. Your final URL should look like: com.example.<app_name>://oauthredirect/

Next, we have to make the Authorize URL. To make this process easier, we also need the Discovery URL. Go to the User Flow page, then click Run User Flow and you should see something like this:

User flow

The part that is circled out in black is the part that is called the discovery URL. Copy and Paste this inside the .txt file as well. You should notice that the URL is in this format: https://<tenantName>/<tenantId>/v2.0/.well-known/openid-configuration?p=<policy_name>. Now, you can go ahead and copy the policy name from here and also take note of the <tenantName> and <TenantID> as we will need these to construct our Authorize URL.

Now, the Authorize URL is of the format:

https://<tenantName>/te/<tenantId>/<policyName>/oauth2/v2.0/authorize

Just copy the respective <tenantName> and <TenantID> and <Policy_Name> values that we just took and plug them in here. Now we have the Authorization URL. Copy this into the .txt file as well.

Similarly, the Token URL is of the format:

https://<tenantName>/te/<tenantId>/<policyName>/oauth2/v2.0/token

Again, simply copy the respective <tenantName> and <TenantID> and <Policy_Name> values that we just took and plug them in here. Now we have the Token URL. Copy this into the .txt file as well.

We have gathered all the required information. Now we can actually get to writing some code.

Time to write some code!

This is a very basic tutorial focusing more on the Azure side so I will not spend so much time developing the app. This is just a basic demonstration. Feel free to modify it.

In the main.dart file located under the lib folder, we will need to import the required packages.

import 'package:flutter_appauth/flutter_appauth.dart';
import 'package:jwt_decode/jwt_decode.dart';
import 'dart:io';

The first step is to initialize the AppAuth library and also make some variables to hold those URL’s mentioned in the previous step. We can place this at the top of the _MyHomePageState in main.dart class replacing the increment variable:

FlutterAppAuth appAuth = FlutterAppAuth();
String _clientId = 'Your ClientID';
String _redirectUrl = 'Your Redirect URL';
String authorizationEndpoint = 'Your Authorization URL';
String tokenEndpoint = 'Your token URL';
List<String> _scopes = ['openid', 'profile', 'email'];

Next, we have to add the login function that will actually communicate with ADB2C to log in. We will write this code to replace the _incrementCounter() method:

We can now add a method to decode what comes back as a JWT token.

This is basically it! You can use this information however you want, but now it’s time to make a method to log out the user when you are done. In order to do so, we need the idTokenand payload so you can also make those variables and set their respective state when we get the them from Azure. I didn’t do it here but you can do it on your own. Here’s the logout method:

It’s good to note that whenever we logout, since this library doesn’t have a built in function yet to actually clear the cookies and the data, we have to force a log in again. Unfortunately this pop-up is annoying for most users as they have to keep closing it to get back to the application but it’s the only way to log out until the library gets it’s own logout method.

Now let’s add a method to finally let the user know they data we’ve received. Again, this is not a practical use but since this tutorial’s main point is not building the application, it’s fine for now. We will add this method in the build() method within the _MyHomePageState class. Here also you are required to create the _displayName and _email variable and update their state as we get them. Again, I have not done this yet, and if you are following this tutorial please go ahead and do it.

Congratulations! We are officially done. Feel free to run the app and tell me what the results were. That’s it! Hopefully this tutorial was of use to you. Any suggestions or feedback is very valuable to me. Feel free to comment on this post.