Authenticate the .NET MAUI App with Azure AD

Building desktop, mobile, and web applications with one code base is finally possible! With .NET MAUI, you can build your native UI in .NET with XAML and C#, and then run that same single code base on all these target platforms:

• Windows using WinUI
• macOS with Mac Catalyst apps
• iOS and Android apps on phones

In this blog, we will see how to create a .NET MAUI application that authenticates users using Azure Active Directory on Windows and Android platforms. Authentication is the process of identifying users who request access to a system. This often determines user identity according to their credentials. Authentication keeps unauthorized users from accessing sensitive information, thus blocking cyber criminals on unsecured systems from accessing and stealing information.

To authenticate a .NET MAUI application using Azure AD:

• Register the application in Azure AD.
• Create a .NET MAUI program to use the registered application to authenticate.

Register the application in Azure AD

First, register the Web API in your Azure Active Directory tenant and add a scope by following these steps:

1. Sign in to the Azure portal.
2. If you have access to multiple tenants, use the Directories + subscriptionsfilter in the top menu to switch to the tenant where you want to register the application.
3. Search for and select Azure Active Directory.
4. Under Manage, select App registrations -> New registration.

• Name: Enter a name for your application. For example, MyMauiApp. Users of your app will see this name. You can change it later.
• Supported account types: Accounts in any organizational directory (any Azure AD directory-multitenant) and personal Microsoft accounts (e.g., Skype, Xbox).

5. Select Register.

6. Under Authentication, provide the redirection URI.

7. Select Overview.

Overview of the app registration

8. Note the Application (client) ID in the Essentials section, as you’ll need this value to configure the backend service later. This will be referred to as the Web API Application ID.

Create a .NET MAUI Program

1. Create a new .NET MAUI project referring to the MS documentation, Build your first app. Here, I am going to name the project MauiAuthApp.
2. Install the Microsoft.Identity.Client, System.IdentityModel.Tokens.Jwt, and CommunityToolkit.Maui NuGet packages in the project.

The Microsoft.Identity.Client package is used in the following scenarios:

• Web app that signs in users.
• Web app that signs in users and calls a web API on their behalf.
• Protected web API that only authenticated users can access.
• Protected web API that calls another (downstream) web API on behalf of the signed-in user.

The System.IdentityModel.Tokens.Jws package is required for the security token designed for representing a JSON web token (JWT).

The CommunityToolkit.Maui package is used to display the authentication message in a toast.

Create a class named Constants to assign the client ID and the scope values. Refer to the following code.

namespace MauiAuthApp;

public static class Constants
{
    //The Application or Client ID will be generated while registering the app in the Azure portal. Copy and paste the GUID.
    public static readonly string ClientId = "3bf5e165-a671-44e9-a412-22f13c737078";

    //Leaving the scope to its default values.
    public static readonly string[] Scopes = new string[] { "openid", "offline_access" };
}

Application or Client ID of the registered app

3. Modify the manifest files with the following code. For Android, open AndroidManifest.xml.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
 <application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true">
 
   <activity android:name="microsoft.identity.client.BrowserTabActivity"  android:exported="true">
      <intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="msal35610457-7107-4d3d-a3d9-f1f7ffaaf904" android:host="auth" />
      </intent-filter>
    </activity>
 
 </application>
 
 <queries>
   <package android:name="com.azure.authenticator" />
   <package android:name="com.companyname.mauiauthapp" /> <!-- This value should be copied from the MauiAuthApp.csproj file -->
   <package android:name="com.microsoft.windowsintune.companyportal" />
 </queries>

 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 <uses-permission android:name="android.permission.INTERNET" />
</manifest>

Note: android:scheme starts with msal and continues with the client ID from the app registration at the Azure portal. Also, the application ID is used in the MAUI app’s project file. For example, refer to the screenshot of the MauiAuthApp.csproj file.

4. You need to override some methods to receive a callback from the identity server. For Android, open Android/MainActivity.cs and override the OnActivityResult method.

using Android.App;
using Android.Content;
using Android.Content.PM;
using Microsoft.Identity.Client;


namespace MauiAuthApp;

[Activity(Theme = "@style/Maui.SplashTheme", Exported = true, MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]

public class MainActivity : MauiAppCompatActivity
{
    protected override void OnActivityResult(int requestCode, Result resultCode, Intent? data)
    {
        base.OnActivityResult(requestCode, resultCode, data);
        AuthenticationContinuationHelper.SetAuthenticationContinuationEventArgs(requestCode, resultCode, data);
    }
}

You also need to set the activity attribute Exported = true.

5. Next, create the AuthService class. Refer to the following code.

using Microsoft.Identity.Client;

namespace MauiAuthApp;

public class AuthService
{
    private readonly IPublicClientApplication authenticationClient;

    // Providing the RedirectionUri to receive the token based on success or failure.
    public AuthService()
    {
        authenticationClient = PublicClientApplicationBuilder.Create(Constants.ClientId)
            .WithRedirectUri($"msal{Constants.ClientId}://auth")
            .Build();
    }

    // Propagates notification that the operation should be cancelled.
    public async Task<AuthenticationResult> LoginAsync(CancellationToken cancellationToken)
    {
        AuthenticationResult result;
        try
        {
            result = await authenticationClient
                .AcquireTokenInteractive(Constants.Scopes)
                .WithPrompt(Prompt.ForceLogin) //This is optional. If provided, on each execution, the username and the password must be entered.
                .ExecuteAsync(cancellationToken);
            return result;
        }
        catch (MsalClientException)
        {
            return null;
        }
    }
}

6. Prepare the UI to use the AuthService. Add a login button to the MainPage.xaml. The following code is the default code in the MainPage.xaml, where the label and the button elements are modified. Here, a Login button is added to perform the authentication.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAuthApp.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label
                Text="Hello, Everyone!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Authenticate .Net MAUI app with Azure Active Directory!"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App UI"
                FontSize="18"
                HorizontalOptions="Center" />

            <Button
                Text="Login"
                SemanticProperties.Hint="Login"
                Clicked="OnLoginClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

7. Add the click event handler in the MainPage.xaml.cs file. Use the following code to complete the application creation.

using CommunityToolkit.Maui.Alerts;
using Microsoft.Identity.Client;
using System.IdentityModel.Tokens.Jwt;
using System.Text;

namespace MauiAuthApp;

public partial class MainPage : ContentPage
{
 int count = 0;

 public MainPage()
 {
  InitializeComponent();
 }

 private async void OnLoginClicked(object sender, EventArgs e)
 {
          try
          {
            var authService = new AuthService();
            var result = await authService.LoginAsync(CancellationToken.None);
            var token = result?.IdToken; // AccessToken also can be used
            if (token != null)
            {
                var handler = new JwtSecurityTokenHandler();
                var data = handler.ReadJwtToken(token);
                var claims = data.Claims.ToList();
                if (data != null)
                {
                    var stringBuilder = new StringBuilder();
                    stringBuilder.AppendLine($"Name: {data.Claims.FirstOrDefault(x => x.Type.Equals("name"))?.Value}");
                    stringBuilder.AppendLine($"Email: {data.Claims.FirstOrDefault(x => x.Type.Equals("preferred_username"))?.Value}");
                    await Toast.Make(stringBuilder.ToString()).Show();
                }
            }
        }
        catch (MsalClientException ex)
        {
            await Toast.Make(ex.Message).Show();
        }
    }
}

We have completed implementing the application! Let’s run the application to see the result.

Following is the output of the application we created. The application runs and asks for authentication details. If authenticated, you will receive the toast message that we returned. Here, we have used the Name and Email address of the user to confirm the authentication.

Authenticating a .NET MAUI App with Azure AD

GitHub

You can download the complete sample to authenticate .NET MAUI apps with Azure AD.

Conclusion

I hope you enjoyed reading this blog. This article explained the procedure to authenticate a .NET MAUI application using Azure Active Directory on Windows and Android platforms.

Syncfusion’s .NET MAUI controls were built from scratch using .NET MAUI, so they feel like framework controls. They are fine-tuned to work with a huge volume of data. Use them to build better cross-platform mobile and desktop apps!

For current customers, the new Essential Studio version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can always download our free evaluation to see all our controls in action.

For questions, you can contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Related blogs

• Achieve Outlook-Like Swiping Using .NET MAUI ListView
• Replicating an Invoice Page UI in .NET MAUI
• Keyboard Shortcuts in .NET MAUI Scheduler
• Configure Syncfusion .NET MAUI Controls Using Visual State Manager (VSM)

Originally published at https://www.syncfusion.com on December 13, 2022.