title: Configuring adal.js for multiple applications/environments
body: <p>When setting up a new Azure Web App for a new environment (QA) of an already existing application (production), I'm trying to create a conditional logic that will authenticate against the QA app registration instead of the production app registration. The idea is to maintain a separation between which redirect URIs are allowed to maintain independence between the environments.</p>
  
  <p>It makes sense to me to not allow redirection across to a different app than the one the authorization targets, but perhaps a viable solution is to just allow redirection to the QA URI? However, this would create a cross-environment dependency I am not very fond of.</p>
  
  <p>Assuming the separation of allowed redirect URIs is maintained, conditional logic in the ADAL config is required so that a user trying to login to the QA app won't authenticate against the production app, since that app registration will not allow redirection to the QA URI.</p>
  
  <p>The QA Azure Web App is being set up on a different subscription but same tenant as our production web app.  I already separate (localhost) development config using <code>process.env.NODE_ENV</code> (which is set in <code>start.js</code>/<code>build.js</code>), but since the QA server is supposed to be production-like, <code>NODE_ENV</code> would be set to 'production' here and as such the same method cannot be used to differentiate between QA and production.</p>
  
  <p>With few other options in mind, I tried differentiating between QA and production based on <code>window.location.href</code> (see code sample below)</p>
  
  <pre><code>import { AuthenticationContext } from 'react-adal';
  
  var adalConfig = {
      tenant: 'tenant-id',
      endpoints: {
          api: 'https://graph.microsoft.com',
      },
      postLogoutredirectUri: window.location.origin,
      cacheLocation: 'localStorage'
  
  if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
    adalConfig.clientId = 'development-web-app-client-id';
  } else if (window.location.href === 'QA URI') {
    adalConfig.clientId = 'qa-web-app-client-id';
  } else
    adalConfig.clientId = 'production-web-app-client-id';
  }
  
  var authContext = new AuthenticationContext(adalConfig);
  
  if (authContext.isCallback(window.location.hash)) {
  
      authContext.handleWindowCallback();
      var err = authContext.getLoginError();
      if (err) {
          // TODO: Handle errors signing in and getting tokens
      }
  }
  
  export {adalConfig};
  export {authContext};
  export const getToken = () =&gt; {
      return authContext.getCachedToken(authContext.config.clientId);
  };
  </code></pre>
  
  <p>This caused an infinite loop of authentication attempts when trying to login to the QA web app, and for some reason also got the visitors of the production web app to authenticate against the QA app registration (authentication was actually successful once the QA app registration was updated to allow redirecting to the production URI).</p>
  
  <p>It was a shot in the dark and now I am unsure how to best proceed. A shortage of relevant search results leads me to think that there is a significant difference between what I am trying to achieve and what is best practice. A bump in the right direction would be much appreciated!</p>