I'm using react-adal for Azure AD single sign in. It's token expires in 1hr. Is there any way to refresh the session or extending session expiry time

Question

I've integrated Azure AD Single Sign in in my corporate react app using react-adal library for Azure AD single sign in. I've successfully implemented it but I'm facing one issue. It's token expires in 1hr because of which it logs out of the react web app. Is there any way to refresh the session or extending session expiry time.

import { AuthenticationContext } from 'react-adal';

const config = {
  apiUrl: 'someUrl/',
  graph_access_url: 'https://graph.microsoft.com',
  graph_access_token_key: 'User_Graph_Token',
  user_info_key: 'UserInfo'
};

const adalConfig = {
  tenant: 'someTenant',
  clientId: 'someclientId',
  clientSecret: 'someclientSecret',
  objectId: 'someObjectId',
  endpoints: { api: 'someAPI' },
  cacheLocation: 'localStorage',
  redirectUri: window.location.origin,
  azureRootUrl: 'https://login.microsoftonline.com',
  issuerUrl: 'https://sts.windows.net'
};

const authContext = new AuthenticationContext(adalConfig);

function graphAccessToken() {
  return localStorage[config.graph_access_token_key];
}

function azureRequest(url) {
  let token = graphAccessToken();
  const requestOptions = { method: 'GET', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token } };
  return fetch(url, requestOptions).then(response => response.json());
}

function getMe() {
  return azureRequest('https://graph.microsoft.com/v1.0/me');
}

function login() {
  authContext.login();
}

export function logout() {
  localStorage.setItem(config.user_info_key, '');
  localStorage.setItem(config.graph_access_token_key, '');
  localStorage.clear();
  authContext.logOut();
}

authContext.handleWindowCallback();

if (window === window.parent) {
  if (!authContext.isCallback(window.location.hash)) {
    if (authContext.getCachedToken(authContext.config.clientId) || authContext.getCachedUser()) {
      authContext.acquireToken('https://graph.microsoft.com', (error, id_token) => {
        if (id_token) {
          localStorage.setItem(config.graph_access_token_key, id_token);
          if (localStorage.getItem('adal.idtoken')) {
            // Some Logic Implemented here.
          }
        }
      });
    }
  }
}

Answer 1

The react-adal uses iframes for token silent refresh, you need to use the index.js as below.

The first token you generate has a 1 hour lifetime, when this token is near expiration, a refresh token will be retrieved by the library. By default, this library will try to refresh the token at least 5 minutes before the current token expiration date.

index.js:

import { runWithAdal } from 'react-adal';
import { authContext } from './adalConfig';
 
const DO_NOT_LOGIN = false;
 
runWithAdal(authContext, () => {
 
  require('./indexApp.js');
 
},DO_NOT_LOGIN);

For more details, see the The frontend part of the blog.