CODEWITHSUNDEEP
reactjsazurereact-reduxazure-active-directory
wyche04
wyche04

Reputation: 23

React Azure AD returned blank page

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

Upvotes: 1

Views: 1377

Answers (1)

Tiny Wang
Tiny Wang

Reputation: 16076

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.

enter image description here

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.

Upvotes: 1

Related Questions