Authenticate the .NET MAUI App with Azure AD
Tags: csharp, dotnet, maui, azure
Published: 2022-12-15 12:51:06

---
title: Authenticate the .NET MAUI App with Azure AD
published: true
date: 2022-12-13 11:33:45 UTC
tags: csharp, dotnet, maui, azure, 
canonical_url: https://www.syncfusion.com/blogs/post/authenticate-the-net-maui-app-with-azure-ad.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7o4wmbaiht382oqq5cb7.png
---
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](#register-the-application-in-azure-ad).
- [Create a .NET MAUI program to use the registered application to authenticate](#create-a-net-maui-program).

## <a name="register-the-application-in-azure-ad">Register the application in Azure AD</a>
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](https://portal.azure.com/ "Microsoft Azure portal").
2. If you have access to multiple tenants, use the  **Directories + subscriptions** filter 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**.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Overview-of-the-app-registration.png" alt="Overview of the app registration" style="width:100%">

  <figcaption>Overview of the app registration</figcaption>

</figure>

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**.

##<a name="create-a-net-maui-program">Create a .NET MAUI Program</a>

1. Create a new .NET MAUI project referring to the MS documentation, [Build your first app](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android "Build your .NET MAUI app documentation"). 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.  
 ![Install the Microsoft.Identity.Client NuGet package](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Install-the-Microsoft.Identity.Client-NuGet-package.png)The **Microsoft.Identity.Client** package is used in the following scenarios:
  - [Web app that signs in users](https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-web-app-sign-user-overview "Web app that signs in users documentation").
  - [Web app that signs in users and calls a web API on their behalf](https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-web-app-call-api-overview "A web app that authenticates users and calls web APIs").
  - [Protected web API that only authenticated users can access](https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-protected-web-api-overview "Protected web API").
  - [Protected web API that calls another (downstream) web API on behalf of the signed-in user](https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-web-api-call-api-overview "A web API that calls web APIs").

![Install System.IdentityModel.Tokens.Jwt NuGet package](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Install-System.IdentityModel.Tokens.Jwt-NuGet-package.png)The **System.IdentityModel.Tokens.Jws** package is required for the security token designed for representing a JSON web token (JWT).  
 ![Install CommunityToolkit.Maui NuGet package](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Install-CommunityToolkit.Maui-NuGet-package.png)

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.

```csharp
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" };
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Application-or-Client-ID-of-the-registered-app.png" alt="Application or Client ID of the registered app" style="width:100%">

  <figcaption>Application or Client ID of the registered app</figcaption>

</figure>

3. Modify the manifest files with the following code. For Android, open **AndroidManifest.xml**.
```html
<?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. ![Application ID in the MauiAuthApp.csproj file](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Application-ID-in-the-MauiAuthApp.csproj-file.png)

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.
```csharp
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.
```csharp
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.
```html
<?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.
```csharp
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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Authenticating-a-.NET-MAUI-App-with-Azure-AD.png" alt="Authenticating a .NET MAUI App with Azure AD" style="width:100%">

  <figcaption>Authenticating a .NET MAUI App with Azure AD</figcaption>

</figure>

## GitHub

You can download the complete sample to [authenticate .NET MAUI apps with Azure AD](https://github.com/SyncfusionExamples/Authenticate-.NET-MAUI-App-with-Azure-AD "Authenticate .NET MAUI apps with Azure AD demo on GitHub").

## 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](https://www.syncfusion.com/maui-controls "Syncfusion .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](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can always download [our free evaluation](https://www.syncfusion.com/downloads/maui/confirm "Free evaluation of the Syncfusion Essential Studio") to see all our controls in action.

For questions, you can contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Achieve Outlook-Like Swiping Using .NET MAUI ListView](https://www.syncfusion.com/blogs/post/achieve-outlook-like-swiping-using-net-maui-listview.aspx "Blog: Achieve Outlook-Like Swiping Using .NET MAUI ListView")
- [Replicating an Invoice Page UI in .NET MAUI](https://www.syncfusion.com/blogs/post/invoice-page-ui-in-net-maui.aspx "Blog: Replicating an Invoice Page UI in .NET MAUI")
- [Keyboard Shortcuts in .NET MAUI Scheduler](https://www.syncfusion.com/blogs/post/keyboard-shortcuts-in-dotnet-maui-scheduler.aspx "Blog: Keyboard Shortcuts in .NET MAUI Scheduler")
- [Configure Syncfusion .NET MAUI Controls Using Visual State Manager (VSM)](https://www.syncfusion.com/blogs/post/configure-syncfusion-net-maui-controls-using-visual-state-manager.aspx "Blog: Configure Syncfusion .NET MAUI Controls Using Visual State Manager (VSM)")