React hook abstracting over usage of MSAL.js APIs to acquire an access token (silently first, then with a redirect)

useMsalAuthentication.tsx

import { BrowserAuthError, BrowserAuthErrorMessage, InteractionRequiredAuthError, type RedirectRequest, type SilentRequest } from '@azure/msal-browser'
import { useMsal } from '@azure/msal-react'
import { useCallback } from 'react'

export const useMsalAuthentication = ({
  silentRequest,
  redirectRequest,
}: {
  silentRequest: SilentRequest
  redirectRequest: RedirectRequest
}): {
  acquireAccessToken: () => Promise<string>
} => {
  const { instance, accounts } = useMsal()

  const acquireAccessToken = useCallback(
    () =>
      instance
        .acquireTokenSilent({
          ...silentRequest,
          // TODO: maybe we can delegate to MSAL library to infer this
          account: accounts[0],
        })
        .then(({ accessToken }) => accessToken)
        .catch((e) => {
          if (
            e instanceof InteractionRequiredAuthError ||
            (e instanceof BrowserAuthError && e.errorCode === BrowserAuthErrorMessage.noAccountError.code)
          ) {
            // NOTE: in reality the return type is never, since this redirects the page
            return instance.acquireTokenRedirect(redirectRequest) as never
          }

          throw e
        }),
    [accounts, instance],
  )

  return {
    acquireAccessToken,
  }
}

using.tsx

const WebApiInterface = () => {
  const {
    acquireAccessToken,
  } = useMsalAuthentication({
    silentRequest: {},
    redirectRequest: {},
  })

  return (
    <Button onClick={acquireAccessToken().then((accessToken) => makeWebApiCall(accessToken)).catch((e) => console.error(e))}>
      Call Web API
    </Button>
  )
}

It's recommended not to store the access token as React state, since it will eventually become stale. Instead, every attempt to use the access token should use the function to acquire it.