A React wrapper for Azure AD using the Microsoft Authentication Library (MSAL). The easiest way to integrate AzureAD with your React for authentication.
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.
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:
After adding Azure AD:
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