Configure Azure Mobile App Authentication Server-Side for Use With JavaScript Clients

Azure Mobile Apps offer a great way to secure your application using OAuth and known 3rd party providers like Twitter, Facebook, Microsoft, and Google. This takes a lot of the manual authorization implementation requirements and shits responsibilities to these providers. This is a great way to secure you JavaScript web application quickly and without a lot of work. 

The focus of this post is to talk about the server-side security configurations required to allow your JS App to authenticate with the 3rd party providers, and then redirect back to your application successfully. If you want an overall tutorial on setting up the providers and working with the JavaScript SDK, see the following links: 

• Authentication and Authorization in Azure Mobile Apps
• How to Use the JavaScript Client Library for Azure Mobile Apps

After the providers are configured for your Azure Mobile App instance, and you have the JavaScript SDK downloaded and being called from your JS Application there are (2) important server-side configurations required for allowing calling the the providers and redirecting back to your calling application successfully. Without these setting below, you'll probably get a HTTP 403 Forbidden error like the following after successfully authenticating:

You do not have permission to view this directory or page

1. Configure CORS

You'll need to whitelist your application URLs that are being called, so that after authenticating with the 3rd party provider it can callback successfully to your application with the user's information. This includes localhost values for testing on your dev machine. To configure CORS in Azure:

1. Navigate to the Azure Portal
2. Select your Azure Mobile App instance under Resources
3. In the Search box type in CORS and select it from the results
4. Enter in all of the applicable whitelist URLs including local dev values (note: no trailing slashes at the end or Azure will complain it is not a valid URL)
5. Click Save at the top to save the changes

Note: You can use the "*" value to allow all domains and URLs but this is NOT advised as it nullifies this security aspect. The only time this is recommended is for debugging security issues to widen the allowable URLs to see if this fixes the problem. If this works, it's recommended to then remove and determine the missing values.

2. Configure External Redirect URLs

You'll need to whitelist the same loopback URLs used in the step above for redirect. Without these values you might successfully authenticate with the provider, but your pop-up window will display the "You do not have permission to view this directory or page" error and not finish back to the caller.

1. Navigate to the Azure Portal
2. Select your Azure Mobile App instance under Resources
3. In the Search box type in Resource explorer, select it from the results and press "GO->" to launch the explorer (opens in a new tab/window)
4. Click the + to expand the config section and select authsettings
5. Click on the Edit button at the top
6. Modify the allowedExternalRedirectUrls to contain an array of string values with your whitelist URLs including local dev testing URLs
7. Click PUT at the top of the explorer to save the changes

To ensure my values were used, I preformed the additional step of selecting Restart from the Overview page of the Azure Mobile App instance since I was just in development (and not in prod). 

This may not be required, but I wanted to make sure everything was working as I had configured. Once these steps were completed, the authentication process worked successfully.