App reloading inside iFrame when renewing token - Solution 1

app.js

'use strict';
if (window !== window.parent) {
  angular.module('todoApp', ['AdalAngular'])
    .config(['$httpProvider', 'adalAuthenticationServiceProvider', function ($httpProvider, adalProvider) {
        adalProvider.init(
          {
              clientId: 'Enter your client ID here e.g. e9a5a8b6-8af7-4719-9821-0deef255f68e',
          },
          $httpProvider
          );
    }]);
}
else {
  angular.module('todoApp', ['ngRoute','AdalAngular'])
  .config(['$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', function ($routeProvider, $httpProvider, adalProvider) {
      $routeProvider.when("/Home", {
          controller: "homeCtrl",
          templateUrl: "/App/Views/Home.html",
      }).when("/TodoList", {
          controller: "todoListCtrl",
          templateUrl: "/App/Views/TodoList.html",
          requireADLogin: true,
      }).when("/UserData", {
          controller: "userDataCtrl",
          templateUrl: "/App/Views/UserData.html",
      }).otherwise({ redirectTo: "/Home" });
  
      adalProvider.init(
          {
              instance: 'https://login.microsoftonline.com/', 
              tenant: 'Enter your tenant name here e.g. contoso.onmicrosoft.com',
              clientId: 'Enter your client ID here e.g. e9a5a8b6-8af7-4719-9821-0deef255f68e',
              extraQueryParameter: 'nux=1',
              //cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost.
          },
          $httpProvider
          );
     
  }]);
}

If your app is structured similarly to the sample here: https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp, where there is one app.js file that does all the heavy lifting, you could use something like to avoid your app getting loaded inside the iframe.

Another solution is described here: https://gist.github.com/tushargupta51/5fa6d000357120adbc8fd1d5c68853c4

I do not know how that is going to work. with ui-router where the main app is named 'app' and every other module is 'app.name' and every file is enclosed in an IIFE. Does this mean that every app.### module needs to be inside the else of if (window !== window.parent) {
?

@fairmutex Is the main module and all the other app.### modules in same file? If so, you can put the if () {...} at the top and everything else in the "else" block. It will only impact whats get loaded in the iframe and should not affect your main app experience.

That is going to be tedious to do an If statement around every file but if it works, It would worth the effort. I will let you know if it works.

@fairmutex If you have multiple js files, maybe you are better off with the other solution: specifying a frameRedirect.html (https://gist.github.com/tushargupta51/5fa6d000357120adbc8fd1d5c68853c4), you can use the dev bits to test that this solution works for you. 1.0.11 is scheduled to be release soon.

@tushargupta51 how auth context will know the url to navigate to in iframe? As I know it is taken from AD according your client id and actually it equals to what you register through Azure AD Portal. There is no extra setting for it so far.

For me it looks like loop, you go to frameRedirect.html and it redirects you to the same page

@tushargupta51, can you please update the https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp sample with one of your solutions. That will save a lot of people, first by preventing them from running into this issue and thus by avoid searching for solutions on the web.

How will this work if my SPA is actually loaded within an iframe of another application?

@nandun5, Have you resolved this issue? I am facing the same challenge that our application is loaded in another iframe and I am getting CORS error while getting access token.

For me this goes into infinite looping reloading