MSALAuthWithProviderForGraph

App.tsx

import React from 'react';

import { Providers, ProviderState, SimpleProvider } from '@microsoft/mgt-element';
import { acquireGraphAccessToken } from 'authConfig';
import { authProvider } from 'index';

const provider = new SimpleProvider(() => acquireGraphAccessToken(authProvider));
Providers.globalProvider = provider;
Providers.globalProvider.setState(ProviderState.SignedIn);

function App() {
    return (
        <>
            App
        </>
    );
}

export default App;

AppAuth.tsx

import React from 'react';

import App from 'App';

import RedirectAuthentication from 'Common/Auth/RedirectAuthentication';
import ErrorComp from 'Common/Components/Core/AppAuth/AppAuthError';
import LoadingComp from 'Common/Components/Core/AppAuth/LoadingAuth';

const AppAuth: React.VFC = () => (
    <RedirectAuthentication
        errorComponent={ErrorComp}
        loadingComponent={LoadingComp}
    >
        <App />
    </RedirectAuthentication>
);

export default AppAuth;

authConfig.ts

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

import Constants from 'Common/Constants';
import parseJwt from 'Common/Utils/parseJwt';

export const authConfig: Configuration = {
    auth: {
        authority: process.env.REACT_APP_AUTH_AUTHORITY,
        clientId: process.env.REACT_APP_AUTH_CLIENT_ID ?? '',
        redirectUri: '/',
        postLogoutRedirectUri: '/',
    },
    cache: {
        cacheLocation: 'sessionStorage',
        storeAuthStateInCookie: true,
    },
};

export const graphScopes = ['User.Read.All', 'User.ReadBasic.All', 'User.Read', 'People.Read'];

export const acquireGraphAccessToken = async (msalInstance: PublicClientApplication) => {
    const account = msalInstance.getAllAccounts()[0];

    if (!account) {
        /**
        * User is not signed in. Throw error or wait for user to login.
        * Do not attempt to log a user in outside of the context of MsalProvider
        */
        throw Error('No active account! Verify a user has been signed in.');
    }
    const request = {
        scopes: graphScopes,
        account,
    };

    const authResult = await msalInstance.acquireTokenSilent(request);

    return authResult.accessToken;
};

/**
 * Getting accessToken in a hook context
import { useAccount, useMsal } from '@azure/msal-react';
import { AuthenticationResult } from '@azure/msal-browser';

const { instance, accounts } = useMsal();
const account = useAccount(accounts[0] || {});
const [accessToken, setAccessToken] = React.useState<AuthenticationResult['accessToken']>();

React.useEffect(() => {
    const scopes = {
        scopes: apiScopes,
        account: account ?? undefined,
    };
    if (account) {
        instance.acquireTokenSilent(scopes).then((response) => {
            if (response) {
                setAccessToken(response.accessToken);
                console.log(response.accessToken);
            }
        });
    }
}, [account, instance]);
 */

/**
 * Getting accessToken in a non hook context
import auth, { acquireAccessToken } from 'authConfig';

acquireAccessToken(auth).then((value) => console.log(value));
 */

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';

import { PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';
import { authConfig } from 'authConfig';

import AppAuth from 'Common/Components/Core/AppAuth/AppAuth';

import reportWebVitals from './reportWebVitals';

const ApplicationLoader = () => (
    <div>
        Application loading...
    </div>
);

// eslint-disable-next-line import/prefer-default-export
export const authProvider = new PublicClientApplication(authConfig);

ReactDOM.render(
    <React.StrictMode>
        <React.Suspense fallback={<ApplicationLoader />}>
            <MsalProvider instance={authProvider}>
                <AppAuth />
            </MsalProvider>
        </React.Suspense>
    </React.StrictMode>,
    document.getElementById('root'),
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

RedirectAuthentication.tsx

import React from 'react';

import { InteractionType } from '@azure/msal-browser';
import { MsalAuthenticationProps, MsalAuthenticationTemplate } from '@azure/msal-react';

type Props = Partial<MsalAuthenticationProps>;

/**
 * Attempts to authenticate user if not already authenticated, then renders child components
 */
const RedirectAuthentication: React.FC<Props> = ({ children, ...rest }: Props) => (
    <MsalAuthenticationTemplate
        interactionType={InteractionType.Redirect}
        {...rest}
    >
        {children}
    </MsalAuthenticationTemplate>
);

export default RedirectAuthentication;