AngularJS SPA Application Azure AD refresh during Authentication

Question

We are trying to build an Angular SPA application that utilizes adal.js to authenticate with Azure AD. However unlike the sample application which contains a static route the does not require authentication we would like to determine if a user is authenticated and route the user accordingly based on 'userInfo.isAuthenticated', however when taking this approach by using an ng-if on the index page we are redirected to the login correctly, but after entering you login credentials we have what appears to be a loop that occurs one to three times while the application is in the process of logging in. does anyone have a solution using ADAL.js and ADAL-angular.js to intercept the 'IsAuthenticating' property at the scope level to avoid this issue?

Thank you,

Answer 1

Can you provide some example code? It is not clear to me about your scenario. Are you just trying to show/hide links on the page? Sample app uses ng-show using userInfo.isAuthenticated. Are you using ng-if on this page and not working? I expect them to work similar for ng-show and ng-if since it checks boolean value.

<div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li ng-class="{ active: isActive('/Home') }"><a href="#/Home">Home</a></li>
                    <li ng-class="{ active: isActive('/TodoList') }"><a href="#/TodoList">Todo List</a></li>
                    <li ng-class="{ active: isActive('/UserData') }"><a href="#/UserData" ng-show="userInfo.isAuthenticated">User</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a class="btn btn-link" ng-show="userInfo.isAuthenticated" ng-click="logout()">Logout</a></li>
                    <li><a class="btn btn-link" ng-hide=" userInfo.isAuthenticated" ng-click="login()">Login</a></li>
                </ul>
            </div>

Sample: https://github.com/AzureADSamples/SinglePageApp-AngularJS-DotNet/blob/master/TodoSPA/index.html