Local Debugging with User Authentication of an Azure Mobile App Service

Local debugging of an Azure Mobile App Service can be a real timesaver, however, using provider authentication such as Facebook or Google throws a wrench in process. In the past, I resorted to logging on the server side and viewing the streaming logs. This was cumbersome and not to mention time consuming. Thankfully, that can be changed. Local debugging with user authentication of an Azure Mobile App Service is now super easy.

Thanks to the documentation, I knew it was possible, but a few things weren’t entirely clear. The steps below bring everything you need to configure local debugging with authentication into one place.

I assume you are working with the following:

• An Azure Mobile Apps .Net Server Service project using version GA 1.0.119.0 or greater.
• An App using Azure Mobile Services version 2.0.0-beta3 or greater.

In the [Project]/App_Start/Startup.MobileApp.cs file of your Mobile Apps Service, add the following highlighted code:

new MobileAppConfiguration()
                .UseDefaultConfiguration()
                .ApplyTo(config);

...

MobileAppSettingsDictionary settings = config.GetMobileAppSettingsProvider().GetMobileAppSettings();

            if (string.IsNullOrEmpty(settings.HostName))
            {
                // This middleware is intended to be used locally for debugging. By default, HostName will
                // only have a value when running in an App Service application.
                var options = new AppServiceAuthenticationOptions
                {
                    SigningKey = ConfigurationManager.AppSettings["SigningKey"],
                    ValidAudiences = new[] { ConfigurationManager.AppSettings["ValidAudience"] },
                    ValidIssuers = new[] { ConfigurationManager.AppSettings["ValidIssuer"] },
                    TokenHandler = config.GetAppServiceTokenHandler()
                };
                app.UseAppServiceAuthentication(options);
            }

...

app.UseWebApi(config);

You’ll need to grab the WEBSITE_AUTH_SIGNING_KEY for your service. This key is highly sensitive and should never be included in a client application. This should be only used on the service side.

1. Open a browser and navigate to https://{servicename}.scm.azurewebsites.net/, replacing the {servicename}. This will take you to the Kudu settings.
2. If you do not know your Service Name, you can find it as follows:
   1. Login to the Azure Portal.
   2. Navigate to your App Service.
   3. Click on Tools in the top bar underneath Mobile App Code.
   4. Under the Tools, find Develop and then click on Kudu in that section.
3. You should now be on the Kudu settings site mentioned in step 1. Click on Environment on the top navigation bar.
4. Search for “WEBSITE_AUTH_SIGNING_KEY” without quotes. It should be under the environment variable section.
5. Copy this value for the the next section.

Still in your Mobile Apps Service, in the [Project]/Web.config, add the following highlighted code making sure to replace the {} items with their appropriate values:

<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
...

  <appSettings>
    <add key="SigningKey" value="{value from above step}" />
    <add key="ValidAudience" value="https://{servicename}.azurewebsites.net/" />
    <add key="ValidIssuer" value="https://{servicename}.azurewebsites.net/" />
  </appSettings>

...
</configuration>

In your Mobile App using Azure Mobile Services (in my case, this is for a Xamarin Mobile App) you will need the following code where you are currently instantiating your MobileServiceClient:

#if DEBUG
  client = new MobileServiceClient("http://[localhost or ip]:[port]");
  client.AlternateLoginHost = new Uri("https://{servicename}.azurewebsites.net/");
#else
  client = new MobileServiceClient("https://{servicename}.azurewebsites.net/");
#endif

The key issue I was running into originally was that I did not set the

AlternateLoginHost

to the actual service. This had resulted in a 404 error being displayed on my mobile app when clicking an authentication provider. Setting the this value makes all authentication calls still hit your Azure Service while your data calls hit the local service for easy debugging.

Note: This does not allow you to debug your service with authentication without an internet connection. You will still need an active internet connection, especially if your service hits other services. An example would be calling 

GetAppServiceIdentityAsync<FacebookCredentials>

which calls out to the login provider service and requires an internet connection.

Being able to locally debug a service that uses authentication is an absolute timesaver. Hopefully this will help you get it up and running.