React page is loaded twice during adal login

[vasanthtt]

Category

• [x] Question
• [ ] Typo
• [ ] Bug
• [ ] Additional article idea

I am using Adal Angular (v1.0.17) with TypeScript to login to the AzureAD from my SPFx component using react that uses adal.js for calling external API. I’ve noticed a bad experience in my spfx page, the page reloaded twice during login. When I debugged, the first reload happens when login happened in adal. This returns the id_refresh token in URL fragment in the reply URL. The next reload is called when this token is handled by handleWindowCallback method. I can suppress the second reload by configuring adal with navigateToLoginRequestUrl: false. But I am afraid to use this because the original URL contains the query string which is lost due to this setting.

I need help to fix this multiple refreshes which actually gives a bad user experience.

ADAL Config

import * as AuthenticationContext from "adal-angular";
const adalConfig: AuthenticationContext.Options = {
  clientId: "rfdsfsd-dsfsdf-sdf-sdfsd",
  tenant: "microsoft.onmicrosoft.com",
  extraQueryParameter: "scope=openid+profile", 
  endpoints: {
    "https://graph.microsoft.com": "https://graph.microsoft.com",
    WebApiUri: "https://webapi.azurewebsites.net"
  },
  cacheLocation: "localStorage",
  navigateToLoginRequestUrl: false,
  redirectUri: window.location.href,
};

Handle id_refresh token

this.authCtx = new AuthenticationContext(this.config);
    var isCallback = this.authCtx.isCallback(window.location.hash);
    if (isCallback && !this.authCtx.getLoginError()) {
      this.authCtx.handleWindowCallback(window.location.hash);
    } else {
      var user = this.authCtx.getCachedUser();
      if (!user) {
        this.authCtx.login();
      }
      else {
        if (user.userName.toLowerCase() !== this.userName.toLowerCase()) {
          this.authCtx.clearCache();
        }
        this.userName = user.userName;
      }
    }

[vasanthtt]

@RamonPage @canoas Please help me on this

[opticyclic]

The react-adal package seems to address this and might be a better option for a react app.

https://github.com/salvoravida/react-adal

[vasanthtt]

The react-adal package seems to address this and might be a better option for a react app.

https://github.com/salvoravida/react-adal

Thanks. I will try this.