Xamarin Forms Authentication with Azure B2C

I was recently facing an issue while integrating a Xamarin forms application with Azure B2C, for the login/signup scenario. Although, I was able to get the B2C login screen, I wasn’t getting any authentication token, despite the fact that all the configurations on Azure and the code changes seemed fine. I couldn’t find a single article that could explain everything starting from Xamarin, to Azure B2C configurations end to end. The articles that were there, were old from the preview days, or had information in bits and pieces… hence this article.

Let’s start with Azure B2C. First of all, we create an Azure B2C tenant :

Creating the Azure B2C tenant

Once we create a tenant, we get a warning that says there is no subscription linked. Do not panic!

We just need to switch to out directory and go to our subscription and link the created B2C tenant with the current subscription.

Once this tenant is linked to our subscription, we should switch to the tenant directory, and then we would be able to make the configuration changes related to the tenant.

Adding an application to the tenant:

We add an application as per the snapshot above, and make sure the required values are provided.

Once this application is added, an application ID gets generated, which we would need to update the custom redirect URI in the application configuration.

As soon as the application ID gets generated, we update the custom redirect URI, as shown in the snapshot above.

We now add the published scope. The name and description can be anything meaningful, as per our choice. The scope value will be automatically generated, and we will use it while making the code changes in the Xamarin application, to get the authentication token, when the user logs in.

The next very important step, is to update the API access to use the application that we just added. Please make sure that the permitted scopes contain the read access, that we configured in the previous step.

Now that we have configured everything that is required to support B2C authentication, we will create a sample Xamarin application that uses azure B2C authentication.

Use visual studio to create a blank Xamarin forms application. Once it gets created, it will have a structure like so :

It contains different projects for Android and IOS(we won’t talk about UWP here). We will first add a “Constants” file in the shared project, which will contain all the constants(configurations), we would be needing, to create the public client application, that interacts with B2C and fetches the access token for us. The constants class looks like this :

We add the “Authority” in the same format as shown above, replacing the tenant name and policy name, as applicable. The application Id is taken from B2C tenant’s application, that we have created in one of the steps above. The value of scopes is also copied from the “Published Scopes” tab in the application. I haven’t obfuscated the values here, as this application is just for demo purpose.

Now, it is time to create the client that interacts with the B2C tenant and gets the access token for us, after the login/sign up is successful. Again, please treat this just as a sample… Ideally the client code should be interface driven, so that the authentication service(in deployment scenarios), can be unit tested thoroughly and is extensible.

As you can see from the snapshot above, we need to add a reference to the “Microsoft.Identity.Client” dll. We will be using this class later, to make a call for acquiring the B2C authentication token.

In order to make the B2C login work in Android, we need to update the Android manifest file, to let it know that it needs to open the browser, to allow the user to login/sign up and where would the B2C client return, when the authentication token has been generated, after the login is complete.

After this, we also need to override the “OnActivityResult” method in the MainActivity, like so :

Once this is done, we can now use the client, to make a call to B2C, to run the login flow :

After following all of the steps above, we are now ready to run the login/sigup flow in our Xamarin android application!

For IOS, we just have to make two changes :

  1. Updating the info.plist url to have the msal url, like we did for Android

2. Updating the AppDelegate file to override the “OpenUrl” method :

Once this is done, we are good on IOS as well!

I have just created this sample that displays the access token when the login is successful. A quick look of the Application below. There is a login button and text box… As soon as the user clicks on login, they are taken to the default B2C login page wherein they can login/signup. If the login is successful, the text box on the screen displays the cropped access token.

In the beginning of this story, I talked about facing issues with the authentication, although all the configurations seemed fine. The mistake I was making, was using “read” as my scope, instead of “https://textxamarinb2c.onmicrosoft.com/api/read". None of the articles I skimmed through online, talked about this clearly. Apologies, if I missed out any article that did!

Next steps :

Azure AD B2C doesn’t end here! There are a lot many things we can do, like setting up social identity providers like facebook, google… embedding our own custom login page rather than the default login page provided by Azure B2C, setting up claims to store information about the user, after gathering them from sign up information… This was just to give you a base to start playing on!

Thank you!

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Exploring Amazon App Flow with Salesforce

Deployment Demystified

Do code reviews matter?

Final C# Questions and Answers

🚀 Here are my best finds for a Tech Smart Boss this week — Issue #220

Effective Java: Optimize Judiciously

🦞Lobster Daily #53 — Daily Recap — Apr 21:

What does it mean for an operation to be “well-defined”?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rashmi Singh

Rashmi Singh

More from Medium

Adobe E-Sign .NET Integration

Access DynamoDB from Lambda (.Net, C#)

.NET Core: Winforms reporting with FastReport

Basic CRUD operations in Amazon S3 Buckets with .NET 6