Why app react don't work in server dev? Using msal-react

Question

My page authentication works perfectly in localhost, but in the dev server the page is blank and in the console: Error in server dev: The above error occurred in the MsalProvider component.

Help me, please?

Image Console

//index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import Store from './redux/store';
import { pca } from './config/authConfig';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement,
);

root.render(
  <React.StrictMode>
    <Provider store={Store}>
      {window.top === window.self && <App instance={pca} />}
    </Provider>
  </React.StrictMode>,
);
reportWebVitals();

//App.tsx
/* eslint-disable import/extensions */
import React, { FC } from 'react';
import { MsalProvider } from '@azure/msal-react';
import Login from './pages/Login';
import ServicePage from './pages/Service';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Logout from './pages/Logout';
import { IPublicClientApplication } from '@azure/msal-browser';

type AppProps = {
  instance: IPublicClientApplication;
};

const App: FC<AppProps> = ({ instance }: AppProps) => {
  return (
    <MsalProvider instance={instance}>
      <BrowserRouter>
        <Routes>
          <Route path="/services" element={<ServicePage />} />
          <Route path="/logout" element={<Logout />} />
          <Route path="/" element={<Login />} />
        </Routes>
      </BrowserRouter>
    </MsalProvider>
  );
};

export default App;

I saw that it could be an error in the configuration file, I changed the file to not use variables, but it still didn't work.

Answer 1

I tried the below authCofig.ts code with your code App.tsx and index.tsx. It worked fine for logging in locally and with the Azure web app.

config/authConfig.ts :

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

export const pca = new PublicClientApplication({
  auth: {
    clientId: '<client_ID>',
    authority: 'https://login.microsoftonline.com/<tenant_ID>',
    redirectUri: window.location.origin,
  },
  cache: {
    cacheLocation: 'sessionStorage',
    storeAuthStateInCookie: false,
  },
  system: {
    loggerOptions: {
      loggerCallback(logLevel, message, containsPii) {
        if (containsPii) {
          return;
        }
        switch (logLevel) {
          case LogLevel.Error:
            console.error(message);
            return;
          case LogLevel.Info:
            console.info(message);
            return;
          case LogLevel.Warning:
            console.warn(message);
            return;
          default:
            return;
        }
      },
    },
  },
});

pages/Login.tsx :

import React from 'react';
import { useMsal } from '@azure/msal-react';

const Login: React.FC = () => {
  const { instance } = useMsal();

  const handleLogin = async () => {
    try {
      await instance.loginPopup();
    } catch (error) {
      console.error('Login failed:', error);
    }
  };

  return (
    <div>
      <h2>Login Page</h2>
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

export default Login;

Make sure to add the code output URL and web app URL

http://localhost:3000

https://<webapp_name>.azurewebsites.net/

in the app Web Redirect URI as below,

Output :

I was able to build and run the app successfully using the below commands,

npm run build

npm start

I got the below page with the port 3000. I clicked on Login button and then selected my Azure account for login as below,

I got my registered app kamappre and clicked on Accept as below,

Then, I deployed this to the web app successfully as below,

I was able to login with the web app as below.