Adal angularjs - Azure active directory : hide id_token from URL/querystring

Question

I'm using adal-angular js library- adal-angular for authentication which generates token. When login is made and it redirects, the token is appended to querystring like this https://localhost:8800/Index.html#id_token=eyJ0eXAiOiJKV1QiLCJhb...

Why this is happening, what should I do to avoid token on URL?

I've checked this and tried the solution but it's not working for me. Anything I'm doing is wrong? Can anyone please help me?

Here is the code I'm using,

app.js

var app = angular.module('app', [
  'ngRoute', 
  'AdalAngular',
]);

app.config([
  "$routeProvider",
  "$locationProvider",
  "adalAuthenticationServiceProvider"
  function (
    $routeProvider,
    $locationProvider,
    adalProvider
  ) {
      $locationProvider.hashPrefix("");
      adalProvider.init(configuration_object, $httpProvider);
 
     $routeProvider
     .when("/abcd", {
        templateUrl: urlBase + "abcd.html" + version,
        controller: "abcdCtrl",
        requireADLogin: true,
      })
     .otherwise({
        redirectTo: "/login",
      });
}

loginCtrl.js

angular.module("app").controller("loginCtrl", [
  "adalAuthenticationService",
  function (
    adalService
  ) {
        adalService.login();
    }
  }

Answer 1

The token is returned in the query string because adal-angular uses the Implicit Grant, where the tokens are returned from the authorization endpoint directly instead of the app acquiring them from the token endpoint.

To hide them from the URLs, you will need to use the Authorization Code Grant with PKCE. This flow is supported only by the newer versions of MSAL.js, there is an Angular wrapper here: https://www.npmjs.com/package/@azure/msal-angular . You will also need to change your reply URLs to Single Page Application platform so that this newer flow is supported. If you want to know how this flow works, the documentation has some details: https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-auth-code-flow . Essentially, only an authorization code is passed in the URL, the tokens are acquired from the token endpoint with an HTTP request from your front-end.

Do note in both of these flows the tokens are still visible to the users of your app, since the code runs on their machines:)