React Azure AD returned blank page

[wy10cheng]

trafficstars

I have a React application which wished to add an Azure login authentication.

The original code calling the App.js in index.js without Azure AD is as below:

import React from 'react';
import ReactDOM from 'react-dom';
import 'index.css';
import App from 'App';
import * as serviceWorker from 'serviceWorker';
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import reducer from 'store/reducer'

//, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    {/* <React.StrictMode> */}
    <App />
    {/* </React.StrictMode> */}
  </Provider>,
  document.getElementById('root')
);

serviceWorker.unregister();

After adding Azure AD:

import React from 'react';
import ReactDOM from 'react-dom';
import 'index.css';
import App from 'App';
import * as serviceWorker from 'serviceWorker';
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import reducer from 'store/reducer'

import { AzureAD } from 'react-aad-msal';
import { authProvider } from './authProvider';

ReactDOM.render(
  <AzureAD provider={authProvider} forceLogin={true}>
     <App />
   </AzureAD>,
   document.getElementById('root'),
 );
serviceWorker.unregister();

The above code can pass my organization Azure login. However, it would show a blank page after the login had been passed, even I tried to change <App /> to <h1>Hello World</h1> would still be blanked.

Do you have any insights on this? Many thanks!

Reference: https://medium.com/@pavelray/connect-your-react-app-with-azure-ad-using-3ddd39223d27 https://www.npmjs.com/package/react-aad-msal