How to use the cached tokens from Msal acquireTokenSilent

[fong1999]

Hi! @derisen I watched the youtube video https://www.youtube.com/watch?v=7oPSL5wWeS0. Very helpful!

I have some questions regarding how to use the token.

The way we are currently having is to call acquireTokenSilent (I attached the code below) on the page initial load at the beginning. What we need is to have all the users authenticated at the page loading time, so that the tokens are available. In parallel, we need to the id token to a process in order to call another API for different data besides calling Azure graph API. With those tokens are cached in sessionStorage (which we defined/ default to use sessionStorage for now), which way to use them for this purpose? I see in your code example, you get access token from useMsalAuthentication. (We don’t use pop up. We authenticate the users by redirect. ) Should I use the same way to get the id token? using useMsalAuthentication with setting up the InteractionType to redirect? Can this be done to achieve our goal?

The way we have now is to get the id token at the time that “acquireTokenSilent” is being called, but is it possible that we can use the id token afterwards? In other words, to get the token from sessionStorage by using sessionstorage getItem function?
—————————————————————————————-

export function getIdTokenFromAzure(): Promise<string> {
  return getTokenRedirect(loginRequest).then(response => {
    if (!response || !response.idToken) {
      console.log("MsalAuthService >>> getIdTokenFromAzure : Failed to get access token, no redirect response");
      return "";
    } else {
      return response.idToken;
    }
  })
}

———————————————————————————————
Another question: I noticed that if I make a call to via getIdTokenFromAzure function in App.tsx, I will get a warning message MsalAuthService.ts:85 MsalAuthService >>> getTokenRedirect : BrowserAuthError: no_account_error: No account object provided to acquireTokenSilent and no active account has been set. Please call setActiveAccount or provide an account on the request. The reason is I call it too early before the account is set.

And also, how to use the token from sessionStorage to serve other API calls that use it in parallel?

Any suggestions? Much appreciated! Thanks!

export const msalConfig = {
  auth: {
    clientId: EnvironmentService.getAzureClientId(),
    redirectUri: `${window.location.origin}`,
    authority: `https://login.microsoftonline.com/${EnvironmentService.getAzureTenantId()}`
  },
  cache: {
    cacheLocation: "sessionStorage", // This configures where your cache will be stored
    storeAuthStateInCookie: true, // Set this to "true" if you are having issues on IE11 or Edge
  },
  system: {
    loggerOptions: {
      loggerCallback: (level: any, message: any, containsPii: any) => {
        if (containsPii) {
          return;
        }
        switch (level) {
          case LogLevel.Error:
            console.error(message);
            return;
          case LogLevel.Info:
            console.info(message);
            return;
          case LogLevel.Verbose:
            console.debug(message);
            return;
          case LogLevel.Warning:
            console.warn(message);
            return;
          default:
            return;
        }
      }
    }
  }
}

const loginRequest = {
  scopes: ["openid", "profile", "User.Read"]
}

/**
 * Sets flag forceRefresh to true, the program will skip the cached id token in sessionStorage,
 * it will call the server directly to get a new id token and replace the catched one with this new
 * value to sessionStorage.
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/FAQ.md#how-do-i-renew-tokens-with-msaljs
 */
const tokenRequestForceRefresh = {
  scopes: ["User.Read"],
  forceRefresh: true,
}

export let myMSALObj = new PublicClientApplication(msalConfig);
export let username = "";

if (!BrowserUtils.isIframe()) {
  // Redirect: once login is successful and redirects with tokens, call Graph API
  myMSALObj.handleRedirectPromise().then(handleResponse).catch(err => {
    console.error(err);
  });
}

export function hasActiveMsalSession(): boolean {
  return !!username;
}

function handleResponse(resp) {
  if (resp !== null) {
    username = resp.account.username;
    myMSALObj.setActiveAccount(resp.account);
  } else {
    /**
     * See here for more info on account retrieval:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
     */
    const currentAccounts = myMSALObj.getAllAccounts();
    if (currentAccounts === null) {
      return;
    } else if (currentAccounts.length > 1) {
      // Add choose account code here
      console.warn("MsalAuthService >>> handleResponse >>> Multiple accounts detected.");
    } else if (currentAccounts.length === 0) {
      signIn();
    } else if (currentAccounts.length === 1) {
      username = currentAccounts[0].username;
      myMSALObj.setActiveAccount(currentAccounts[0]);
    }
  }
}

function signIn() {
  myMSALObj.loginRedirect(loginRequest);
}


function getTokenRedirect(request) {
  /**
   * See here for more info on account retrieval:
   * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
   */
  return myMSALObj.acquireTokenSilent(request).catch(error => {
    console.warn("MsalAuthService >>> getTokenRedirect : Silent token acquisition fails. acquiring token using redirect");
    if (error instanceof Msal.InteractionRequiredAuthError) {
      // fallback to interaction when silent call fails
      return myMSALObj.acquireTokenRedirect(request);
    } else {
      console.warn("MsalAuthService >>> getTokenRedirect : " + error);
    }
  });
}

export function getAccessToken(): Promise<string> {
  return getTokenRedirect(loginRequest).then(response => {
    if (!response || !response.accessToken) {
      console.log("MsalAuthService >>> getAccessToken : Failed to get access token, no redirect response");
      return "";
    } else {
      return response.accessToken;
    }
  })
}


export function getIdTokenFromAzure(): Promise<string> {
  return getTokenRedirect(loginRequest).then(response => {
    if (!response || !response.idToken) {
      console.log("MsalAuthService >>> getIdTokenFromAzure : Failed to get access token, no redirect response");
      return "";
    } else {
      return response.idToken;
    }
  })
}

Thanks so much!!

[derisen]

Hi @fong1999, sorry for the late response. I should warn you that ID tokens are not to be used for accessing protected APIs -they are only for your client application to use (for instance, to update the UI and etc.). You should also not access the msal cache in browser storage directly. Use the appropriate msal method to get the token -please have a look at the tutorial here for more. Sample 3-1 should cover what you need.

[fong1999]

@derisen Hi, Thank you for your reply. Appreciate it! I will check out the samples!

Thanks for the warning! We have a JIRA card to address the effort of changing to use access token instead id token when we call our vendor API. But I am not able to use the same MS PublicKey (JWK) to validate the access token the same way that we do for id token. Any suggestions?

Thanks!

[fong1999]

@derisen Hi! I am just following up on my question regarding to use JWK with access token. Are you able to validate access token using JWK? Thanks!

[derisen]

@fong1999 sorry I missed this! Can you tell me more about the token validation solution you are using? Is it one of our SDKs? Can you share a snippet? I'm guessing it's a configuration issue. Here's an example of what this might look like in JS.

[fong1999]

@derisen Hi! No worries. Please see the snippet below. When I used id token isValid = true, if I experiment to use access token, isValid = false. It does not pass the validation using JWK in function getAzurePublicKey. Any suggestions? Thanks very much!

/**
   * Retrieve a new access token from EUA
   * @param idToken JWT to use for requesting an access token
   */
  private static requestAccessToken(idToken: string, numberOfTries: number): Promise<void> {
    if (idToken) {

      return AuthService.tokenIsValid(idToken).then(isValid => {
        if (isValid) {
          return fetch(`${EnvironmentService.getApigeeConfig().domain}/security-processing/enterprise-user-auth/v2/token.oauth2`, {
            method: "post",
            headers: {
              "Content-Type": `application/x-www-form-urlencoded`,
            },
            body: AuthService.getAccessTokenRequestBody(idToken),
          })
            .then((response) => {
              if (!response.ok) {
                ErrorReportingService.reportErrorWithResponse(
                  response,
                  "AuthService.ts -> requestAccessToken",
                  `Attempted to retrieve: ${response.url}`
                );
              }
              return response;
            })
            .then(response => {
              if (response.ok) {
                return response.json();
              } else {
                throw new Error("AuthService >>> requestAccessToken : Got response other than 200 : " + response.status);
              }
            })
            .then((response: AccessTokenResponse) => {
              const expiresAt = moment().add(response.expires_in, "seconds"); // ttl;

              const accessTokenMsg: AccessTokenMessage = {
                access_token: response.access_token,
                expires_at: expiresAt.toISOString(),
                token_type: response.token_type,
                scope: response.scope,
                id_token: idToken.substring(0, 10),
                error: "",
                jwt: idToken
              };
              window.parent.postMessage(accessTokenMsg, window.location.origin);
              AuthService.ApigeeAuth.access_token = response.access_token;
              AuthService.ApigeeAuth.expires_at = expiresAt;
              AuthService.ApigeeAuth.token_type = response.token_type;
              AuthService.ApigeeAuth.scope = response.scope;
              AuthService.ApigeeAuth.jwt = idToken;
              //jwt time
              localStorage.setItem('end_time', moment().toString());
            })
            .catch(error => {
              AuthService.ApigeeAuth.error = JSON.stringify(error);
              const accessTokenMsg: AccessTokenMessage = {
                id_token: idToken.substring(0, 10),
                error: `ACCESS TOKEN ERROR: ${error}`,
              };

              window.parent.postMessage(accessTokenMsg, window.location.origin);
              // Unable to retrieve a new access token, retry in ten second
              if (numberOfTries < 5) {
                setTimeout(() => {
                  AuthService.requestAccessToken(idToken, numberOfTries + 1);
                }, 10000);
              }
              localStorage.setItem('end_time', moment().toString());
            })
            .finally(function () {
              var start: string = localStorage.getItem('start_time') || 'na';
              var end: string = localStorage.getItem('end_time') || 'na';
              var user: string = localStorage.getItem("currentUser");
              if (user !== "" && ((start !== "na") || (end !== "na"))) {
                ErrorReportingService.reportLogsWithMessage("Sending JWT logs", `AuthService.ts -> requestAccessToken -> Handling JWT Logs`, `JWTStartTime : ${start}  JWTEndTime: ${end}`);
              }
            });
        }
      });
    }
    return Promise.reject();
  }

  private static tokenIsValid(idToken: any): Promise<boolean> {
    let decodedToken: any = jwt.decode(idToken, { complete: true });
    return AuthService.getAzurePublicKey(decodedToken.header.kid)
      .then((resp: any) => {
        return AuthService.validateIdTokenByPublicKey(decodedToken, resp, idToken);
      })
      .catch(e => {
        // Remove the old public key from local storage
        localStorage.removeItem(AZURE_PUBLIC_KEY);
        // Fetch the public key and use it to validate idToken
        return AuthService.getAzurePublicKey(decodedToken.header.kid)
          .then((resp: any) => {
            return AuthService.validateIdTokenByPublicKey(decodedToken, resp, idToken);
          })
          .catch(e => {
            const accessTokenMsg: AccessTokenMessage = {
              id_token: idToken.substring(0, 10),
              error: `ID Token Error ${JSON.stringify(e)}`,
            };
            window.parent.postMessage(accessTokenMsg, window.location.origin);
            return false;
          });
      });
  }

  private static validateIdTokenByPublicKey(decodedToken: any, publicKey: any, idToken: string): boolean {
    decodedToken = jwt.verify(idToken, `-----BEGIN CERTIFICATE-----\n${publicKey}\n-----END CERTIFICATE-----`, {
      algorithms: ["RS256"],
    }) as object;

    return (
      decodedToken.tid === EnvironmentService.getAzureTenantId() &&
      decodedToken.aud === EnvironmentService.getAzureClientId() &&
      decodedToken.exp > Math.ceil(moment.now() / 1000)
    );
  }

  private static getAzurePublicKey(kid: string): Promise<string | void> {
    // Get the public key from local storage, returning matching key if found
    let storedKey: string = localStorage.getItem(AZURE_PUBLIC_KEY);
    if (storedKey) {
      return Promise.resolve(storedKey);
    }
    // If no key found in local storage, get keys from Azure, store new keys in local storage, and return correct key
    // Fetch Azure public key
    return fetch(`https://login.microsoftonline.com/${EnvironmentService.getAzureTenantId()}/discovery/v2.0/keys`)
      .then((resp: Response) => {
        if (resp.ok) {
          return resp.json();
        } else {
          ErrorReportingService.reportErrorWithResponse(
            resp,
            "AuthService.ts -> getAzurePublicKey",
            `Attempted to retrieve: ${resp.url}`);
          throw new Error("Failed to retrieve Azure public keys");
        }
      })
      .then((body: AzureKeyResponse) => {
        const keyObj: AzureKey = body.keys.find(possibleKey => possibleKey.kid === kid);
        let publicKey: string = keyObj && keyObj.x5c.length > 0 ? keyObj.x5c[0] : "";
        localStorage.setItem(AZURE_PUBLIC_KEY, publicKey);
        return publicKey;
      });
  }``

[fong1999]

@derisen Hi! I am just following up on the question that I have. I provided the code snippet above. Please let me know if you need more information! Thanks so much!

[derisen]

@fong1999 this looks fine on first glance, but I think you could do this better. Can you refer to this TokenValidator class here? There's a part it's using a dependency from msal-node to decode the token, but you replace it with jwks to do the decoding as well.

[fong1999]

@derisen Hi! Thank you for your comments. Let me check your sample. Thanks!