Integrating Auth0 with Azure Mobile Apps JavaScript client

I included a mechanism to get Auth0 working in my Webpack-based React application during my last article. Today I want to go one step further. I want to show how you can use the information you get back from Auth0 to authenticate to Azure Mobile Apps. Azure Mobile Apps has recently released azure-mobile-apps-client v2.0.0-beta4 for JavaScript and Apache Cordova. One of the neat things about this system is that you can use whatever library you like to authenticate a user as long as you get the original identity provider token. That means that you can, for instance, use a Facebook provided library to integrate with the Facebook app and then submit that token to Azure Mobile Apps to generate an Azure App Service token. This is called “client-directed authentication flow”.

It requires a little bit of setup though. In this article, I’m going to go through the process for generating a Microsoft Account, use Auth0 as the UI for the authentication and then integrate it into the Azure Mobile Apps JavaScript SDK.

Step 1: Set up a Microsoft Account Application

Log on to the Microsoft Developer Account. Click on Create Application, then click on API Settings and fill in the form like this:


Specifically, the Mobile or Desktop Client toggle should be set to No and the Redirect URLs should match your Auth0 callback, which is based on the Auth0 Domain for your application. Log onto Auth0, click on App / APIs and then click on your application to find this information. Click on Save, then click on App Settings. You need to cut-and-paste the Client ID and Client Secret as you will need those.

Step 2: Update your Auth0 Application

You need to set up the Microsoft Account in your application within Auth0. Log into your Auth0 dashboard, click on Connections, then Social and finally Windows Live.


Cut and paste your Client ID and Client Secret from Step 1 into the relevant boxes. If you want the users email address, make sure you have the right box checked. Click on Save, then close the box.

Step 3: Set up Authentication on Azure App Service

Log onto the Azure Portal, click on All Resources, then your Azure Mobile Apps application (if you don’t have one yet, follow their tutorial). Click on All Settings, then Authentication / Authorization. Now you are in the right place to be setting up authentication.

  • Turn App Service Authentication on
  • Set the action to take when the request is not authenticated to Allow request
  • Turn the Token Store to on (under Advanced Settings).

Now click on Microsoft Account. Cut and paste the Client ID and Client Secret from Step 1, and select the same boxes as you did in Step 2 – these are the claims you are requesting be provided to you.


This is a most important step. The Client ID and Client Secret MUST be unique to your application (you can’t “try it” in the Auth0 dashboard, for example) and they must match (don’t use two different client ID/secret combos). This will ensure that the token that is provided by Auth0 can be verified by Azure Mobile Apps.

Step 4: Load the Azure Mobile Apps SDK

When you npm install azure-mobile-apps-client, the actual library is in node_modules/azure-mobile-apps-client/dist/MobileServices.Web.min.js – you need to include this as a script reference in your HTML file. At this point, there is no CDN for this library and you can’t “require” the library into Webpack. Those facilities will come later. When it is loaded, you will be able to see a WindowsAzure.MobileServiceClient object within the global context of the browser.

I created a file to create the client like this:

/* global WindowsAzure */

const client = new WindowsAzure.MobileServiceClient(window.APPLICATION.base);
const table = client.getTable('TodoItem');

// Store the client so we can try things
window.APPLICATION.client = client;

export default {
    client: client,
    table: table

Now I can do something like:

import zumo from 'path/to/zumo';

This brings in the client and table reference. APPLICATION.base is set to my Azure Mobile Apps URL (in this case, Note that I store the resulting client in my global APPLICATION object – this aids in debugging later on if I need to check something on a live connection.

Step 5: Convert the Auth0 token into an Azure Mobile Apps token

The Auth0 profile that is returned by the callback contains an element called identities. There will only be one identity – your Microsoft Account one. In there is an access_token which is the token provided by the identity provider. You can use this as follows:

export function authenticate(profile, token) {
    return (dispatch) => {
        // Start the refresh process

        const loginSuccess = (data) => {
            // Store the original profile and the mobile service auth token
            dispatch(storeProfile(profile, data.mobileServiceAuthenticationToken));
            // Update the loading task to false
        // On failure, clear the authentication
        const loginFailed = (error) => {
            dispatch(storeProfile(null, null));

        // Trigger the process to swap the token for a zumo-token
        zumo.client.login('microsoftaccount', { access_token: profile.identities[0].access_token })
            .then(loginSuccess, loginFailed); // eslint-disable-line camelcase

Note that I’m passing the access token from the identity provider (NOT the auth0 token) to my Azure Mobile Apps client.login() method. If the call succeeds, I’m using Redux and dispatching an action to update my authentication profile. If an error occurs, I’m dispatching an action to set the error message. In my application, this pops up a dialog stating that an error occurred (and clears the login).

Some Common Errors

It’s best to get down to a network level when you are diagnosing problems in this flow – do this by running the application in Chrome and opening up the Developer Tools, then switching to the Network tab. Click the XHR button to only see AJAX requests. When you see a problem, click on the Response for the request that went wrong. Look at the status:

  • A 401 Unauthorized error indicates that you’ve configured Microsoft Account, but the Client ID or Client Secret doesn’t match what’s in Auth0
  • A 404 Not Found error indicates you did not set up the appropriate Identity Provider in Azure Mobile Apps

If you aren’t moving beyond the Sign In button, check out the APPLICATION.client.currentUser and ensure the user information is being filled in.

Auth0 supports many more Identity Providers than Azure Mobile Apps. You only get Facebook, Twitter, Google and Windows Live / Microsoft Account and Azure Active Directory in Azure App Service, so use one of those.

Wrap Up

Want to see the fully working example? I’ve got that on my GitHub repository. My intent is to provide a React for browser example of the Todo application that Azure Mobile Apps uses for their quickstarts. Now I’ve got authentication going, I’m going to move on to using the JavaScript library to cloud-connect this Todo app.