How to use Conveyor when developing an Azure AD B2C web application on localhost

Introduction

If you are developing an application that uses Azure AD B2C for authentication then you will already have sign-in working for localhost. However if you wish to connect and authenticate in the application from an external device (eg. phone or remote computer) then it will fail because IIS Express does not accept remote connections and because your Azure Application is most likely setup to reply to localhost only.

Starting Assumption

This article will assume that you already have Azure B2C integrated with your application - if however you have not done this successfully yet, please follow a sample such as https://github.com/Azure-Samples/active-directory-b2c-dotnet-webapp-and-webapi

Configuration Changes

Usually Conveyor tries to intercept redirects to localhost and change them to the Remote URL or Internet URL that Conveyor proxies. However, with Azure AD B2C this is not possible because the browser is redirected from the hosted login page to localhost directly, so Conveyor cannot peek at the headers.

To add Conveyor's URL as an acceptable Reply URL:

  1. Open the Azure management console and choose the directory with the Azure AD B2C tenant
  2. Go to the Azure AD B2C resource editor (eg. by searching for B2C in the resource search bar)
  3. Under Manage on the left, click "Applications" and then click your application in the list (this application should have the same ID as specified in the ida:ClientId field in your application settings)
  4. In the Reply URL section add the Conveyor URL that you wish to use, eg. the Remote URL (for LAN testing) or Internet URL if you are using Conveyor tunnelling (you can point to a specific page but the host and port should be as provided by Conveyor)

Next your application needs to be told to request the login redirect to the Conveyor URL instead of localhost:

  1. Open the web.config in the application (or for ASP.NET Core, the appropriate appSettings json file)
  2. Change the redirect URI, to use the Conveyor URL (you can point to a specific page but the host and port should be as provided by Conveyor) eg. 
         <add key="ida:RedirectUri" value="https://10.0.0.228:45507/" />