title: How to integrate azure ad into a react web app that consumes a REST API in azure too
body: <p>I have one web app which is React, and I already configured Azure AD Authentication for the web app itself.  Its 100% Client site app, no server side components.</p>
  
  <p>I used this component:
  <a href="https://github.com/salvoravida/react-adal" rel="noreferrer">https://github.com/salvoravida/react-adal</a></p>
  
  <p>My code is as follows:
  adalconfig.js</p>
  
  <pre><code>import { AuthenticationContext, adalFetch, withAdalLogin } from 'react-adal';
  
  export const adalConfig = {
    tenant: 'mytenantguid',
    clientId: 'myappguid',
    endpoints: {
      api: '14d71d65-f596-4eae-be30-27f079bf8d4b',
    },
    cacheLocation: 'localStorage',
  };
  
  export const authContext = new AuthenticationContext(adalConfig);
  
  export const adalApiFetch = (fetch, url, options) =&gt;
    adalFetch(authContext, adalConfig.endpoints.api, fetch, url, options);
  
  export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api);
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import DashApp from './dashApp';
  import registerServiceWorker from './registerServiceWorker';
  import 'antd/dist/antd.css';
  
  import { runWithAdal } from 'react-adal';
  import { authContext } from './adalConfig';
  
  const DO_NOT_LOGIN = false;
  
  runWithAdal(authContext, () =&gt; {
  
    ReactDOM.render(&lt;DashApp /&gt;, document.getElementById('root'));
  
    // Hot Module Replacement API
    if (module.hot) {
      module.hot.accept('./dashApp.js', () =&gt; {
        const NextApp = require('./dashApp').default;
        ReactDOM.render(&lt;NextApp /&gt;, document.getElementById('root'));
      });
    }
  
  },DO_NOT_LOGIN);
  
  
  registerServiceWorker();
  </code></pre>
  
  <p>dashapp.js</p>
  
  <pre><code>import React from "react";
  import { Provider } from "react-redux";
  import { store, history } from "./redux/store";
  import PublicRoutes from "./router";
  import { ThemeProvider } from "styled-components";
  import { LocaleProvider } from "antd";
  import { IntlProvider } from "react-intl";
  import themes from "./settings/themes";
  import AppLocale from "./languageProvider";
  import config, {
    getCurrentLanguage
  } from "./containers/LanguageSwitcher/config";
  import { themeConfig } from "./settings";
  import DashAppHolder from "./dashAppStyle";
  import Boot from "./redux/boot";
  
  const currentAppLocale =
    AppLocale[getCurrentLanguage(config.defaultLanguage || "english").locale];
  
  
  const DashApp = () =&gt; (
    &lt;LocaleProvider locale={currentAppLocale.antd}&gt;
      &lt;IntlProvider
        locale={currentAppLocale.locale}
        messages={currentAppLocale.messages}
      &gt;
        &lt;ThemeProvider theme={themes[themeConfig.theme]}&gt;
          &lt;DashAppHolder&gt;
            &lt;Provider store={store}&gt;
              &lt;PublicRoutes history={history} /&gt;
            &lt;/Provider&gt;
          &lt;/DashAppHolder&gt;
        &lt;/ThemeProvider&gt;
      &lt;/IntlProvider&gt;
    &lt;/LocaleProvider&gt;
  );
  Boot()
    .then(() =&gt; DashApp())
    .catch(error =&gt; console.error(error));
  
  export default DashApp;
  export { AppLocale };
  </code></pre>
  
  <p>Until that point everything works fine, when the user is not authenticated its redirected to login.live.com for authentication and then its redirected back.</p>
  
  <p>However I also created another azure webapp for hosting a REST API, that REST API is already configured in Azure AD, so that users that try to use the rest will need to be authenticated.</p>
  
  <p>Now the question is:  How do I setup my client side APP to consume REST API which is protected by Azure AD.?</p>
  
  <p>I found this and looks what I am looking for, but I am not sure how to integrate this into my existing code above</p>
  
  <p><a href="https://github.com/AzureAD/azure-activedirectory-library-for-js/issues/481" rel="noreferrer">https://github.com/AzureAD/azure-activedirectory-library-for-js/issues/481</a></p>
  
  <p>Update: 
  For potential readers</p>
  
  <p>This answer plus the instructions on this url to configure App registrations helped me to solve the problem: <a href="https://blog.ithinksharepoint.com/2016/05/16/dev-diary-s01e06-azure-mvc-web-api-angular-and-adal-js-and-401s/" rel="noreferrer">https://blog.ithinksharepoint.com/2016/05/16/dev-diary-s01e06-azure-mvc-web-api-angular-and-adal-js-and-401s/</a></p>