React Azure AD returned blank page - reactjs

Question

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

Answer 1

I've followed the doc your provided and tested in my side, it worked indeed, but I made some changes which I think is wrong. In my opinion, it seems to have something wrong with the redirect url.
This is my config, pls note I used 'http://localhost:3000' rather than 'https' which is mentioned in the doc. And of course, I set the same redirect url in azure portal. Then it worked, I can redirect to the home page after login.
import { MsalAuthProvider, LoginType } from 'react-aad-msal';
// Msal Configurations
const config = {
auth: {
authority: 'https://login.microsoftonline.com/common',
clientId: '<client-id>',
redirectUri: 'http://localhost:3000'
},
cache: {
cacheLocation: "localStorage",
storeAuthStateInCookie: true
}
};
// Authentication Parameters
const authenticationParameters = {
scopes: [
// '<property (i.e. user.read)>',
// 'https://<your-tenant-name>.onmicrosoft.com/<your-application-name>/<scope (i.e. demo.read)>'
'user.read'
]
}
// Options
const options = {
loginType: LoginType.Popup,
tokenRefreshUri: window.location.origin + '/auth.html'
}
export const authProvider = new MsalAuthProvider(config, authenticationParameters, options)
Finally, I found a doc which said Microsoft is currently in process of building an official #azure/msal-react library which will replace react-aad-msal, so if you prepare to change your mind, I think the samples in this page could help you. It contains the one uses #azure/msal-react.