msal-react acquiring tokens prior to API calls

Library

• @azure/msal-react@1.0.0-alpha.3

Description

I’m facing some issues with the way tokens have to be acquired in msal-react.

In short: I have all my async data fetch logic written in Redux actions (thunks to be more precise), my components only dispatch actions to trigger the data fetch and the data flows in once it’s retrieved from the server. Those async actions require a valid access token and as stated in the docs I should retrieve a fresh token for every API call, meaning that I’d have to bloat every component with access token logic and pass the the token to the action that fetches the data. I could put this logic in a hook and call the hook in every component, but the logic that acquires the token (IPublicClientApplication.acquireTokenSilent) is async, meaning that I’d have to return some kind of promise or state object from the hook and wait for it to complete, before I can fetch my data.

Ideally I’d like to have a valid token in my Redux store at all times and keep my components “clean” from token logic OR have the ability to retrieve a token outside of a React component (but this won’t be possible since it’s based on React Context) Any ideas on how to achieve a clean and scalable solution?

Thanks in advance!

Source

• Internal (Microsoft)
• Customer request

[Seddy24]

@richardrobberse This worked perfectly, thank you for your help!

[richardrobberse]

@Seddy24 Here you go, my configuration is stored in Redux and the graphToken parameter just determines which scopes to request a token for.

import { Configuration, PublicClientApplication } from '@azure/msal-browser'
import { store } from 'store'

const getToken = async (graphToken: boolean = false): Promise<string> => {
  const appCfg = store.getState().app.configuration
  const cfg: Configuration = {
    auth: {
      clientId: appCfg.msalClientId,
      redirectUri: appCfg.msalRedirectUri,
    },
  }

  const pca = new PublicClientApplication(cfg)
  const accounts = pca.getAllAccounts()
  const account = accounts[0]

  const resp = await pca.acquireTokenSilent({
    scopes: graphToken ? appCfg.graphScopes : appCfg.apiScopes,
    account,
  })

  return resp.accessToken
}