AAD B2C with UWP WinUI 3 SDK

So I’ve been working with an internal customer on leveraging Azure Active Directory B2C. I noticed that the demo code is a bit dated so I thought I would put together some updated guidance. It’s been a while since I worked with UWP apps so I thought I would reboot that as well and get the latest bits working with UWP apps and AAD B2C.

I’ve published my code here.

Create an App Registration

You need to create an app registration in your Azure AD B2C tenant. If you want to support both AAD and Microsoft Accounts (e.g. Hotmail and Outlook.com consumer users) then select the third option “Accounts in any identity provider or organizational directory (for authenticating users with user flows)”. Read “Organizational Directory” as your B2B end users that have their own Azure Active Directory account and read “any identity provider” as any other consumer identity provider you enable through the AAD B2C “Identity Providers” configuration.

Grab your App ID

After your application is created you need to grab two values from the App Registration:

1. Tenant Name

2. Application ID

The Tenant Name and Application ID will be used as the `DomainName` and `ClientId` variables, respectively, in my UWP application code. More on that later.

Configure a Redirect URI

The OAuth flow that your AAD B2C tenant users to authenticat users requires a redirect URL. If you are building a native mobile application you don’t really have something like that because your app runs client-side. Web app developers will know what I am talking about. So for you mobile / native app devs out there just make sure to check one of the default URLs that AAD B2C provides for you out of the box.

We will use this value when we set the `RedirectUri` in the UWP application code.

Setup an API Scope

I haven’t even started developing an API to go with this app so we can just use a placeholder. Ideally this would be a real scope for some real functionality within your server side API. I’m going to use the `ClientId` to create a Application ID URI and `demo.read` as a scope.

Configure the UWP Application

Now that we have all the AAD B2C stuff setup, let’s configure the codebase! I’ve set it up so that you just need to set two values. The `DomainName` and the `ClientId` which correspond to the AAD B2C Domain Name and the AAD B2C App Registration’s Application ID, respectively.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s