Azure Access Token react-aad-msal

Question

I am trying to use the following library "react-aad-msal" to authenticate my user in Azure and retrieve the access token. And once retrieve I will be passing it to my secure api. The problem is I cannot get the access token every time I log in. Somehow the access token is not showing up

Here is my authProvider file:

// authProvider.js
import { MsalAuthProvider, LoginType } from 'react-aad-msal';
    
// Msal Configurations
const config = {
      auth: {
        authority:
        // cannot use https://login.microsoftonline.com/common because my tenant doesnt allow it
          'https://login.microsoftonline.com/b8630d64-c577-438b-9b8a-8c2d51da77d4/',
        clientId: '5ea2d3b2-ea57-4648-b05a-6dea685333f8',
        redirectUri: 'https://myWebsite.azurewebsites.net',
      },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: true,
      },
    };
    
    // Authentication Parameters
    const authenticationParameters = {
      scopes: ['user.read'],
    };
    
    // Options
    const options = {
      loginType: LoginType.Redirect,
      tokenRefreshUri: window.location.origin + '/auth.html',
    };
    
    export const authProvider = new MsalAuthProvider(
      config,
      authenticationParameters,
      options
    );

And on my App.jsx I use this:

/* eslint-disable react/jsx-no-comment-textnodes */
import React, { Component } from 'react';

import { AzureAD, AuthenticationState } from 'react-aad-msal';
import { authProvider } from './constant/authProvider';
import Inside from './Inside';

class App extends Component {
  render() {
    return (
      <div className="App">
        <AzureAD provider={authProvider} forceLogin={true}>
          <React.Fragment>
            <AzureAD provider={authProvider} forceLogin={true}>
              <Inside provider={authProvider}></Inside>
              <span>Only authenticated users can see me.</span>
            </AzureAD>

            <AzureAD provider={authProvider} forceLogin={true}>
              {({ login, logout, authenticationState, error, accountInfo }) => {
                // eslint-disable-next-line default-case
                switch (authenticationState) {
                  case AuthenticationState.Authenticated:
                    return (
                      <p>
                        <p>
                          <span style={{ fontWeight: 'bold' }}>ID Token:</span>{' '}
                          {accountInfo.jwtIdToken}
                        </p>
                        <p>
                          <span style={{ fontWeight: 'bold' }}>Username:</span>{' '}
                          {accountInfo.account.userName}
                        </p>
                        <p>
                          <span style={{ fontWeight: 'bold' }}>
                            Access Token:
                          </span>{' '}
                          {accountInfo.jwtAccessToken}
                        </p>
                        <p>
                          <span style={{ fontWeight: 'bold' }}>Name:</span>{' '}
                          {accountInfo.account.name}
                        </p>
                        <button onClick={logout}>Logout</button>
                      </p>
                    );
                  case AuthenticationState.Unauthenticated:
                    return (
                      <div>
                        {error && (
                          <p>
                            <span>
                              An error occured during authentication, please try
                              again!
                            </span>
                          </p>
                        )}
                        <p>
                          <span>Hey stranger, you look new!</span>
                          <button onClick={login}>Login</button>
                        </p>
                      </div>
                    );
                  case AuthenticationState.InProgress:
                    return <p>Authenticating...</p>;
                }
              }}
            </AzureAD>
          </React.Fragment>
        </AzureAD>

        <div> Page Tests</div>
      </div>
      // <div className="App">
      //   <MainTable />
      // </div>
    );
  }
}

export default App;

I was able to retrieve accountInfo.userName but not accountInfo.jwtAccessToken. For the inside.jsx I have the following:

    import React, { useState, useEffect } from 'react';

import PropTypes from 'prop-types';

const Inside = ({ provider }) => {
  useEffect(() => {
    const request = (url) => {
      provider.getAccessToken().then((token) => {
        console.log('token', token);
      });
    };

    request();
  }, []);
  return <div>Inside</div>;
};

Inside.propTypes = {};

export default Inside;

Answer 1

You can get the access token in this way authProvider['_accountInfo'].jwtIdToken as authProvider is an array and _accountInfo is the key with which you will get the jwtIdToken.