App.tsx

import { BrowserRouter } from "react-router-dom";

import { MsalAuthenticationTemplate, MsalProvider } from "@azure/msal-react";
import { PublicClientApplication, InteractionType } from '@azure/msal-browser';

import { loginRequest } from "./msalConfig";

interface AppProps {
  instance: PublicClientApplication;
}

const authRequest = {
  ...loginRequest
};

/**
 * All parts of the application that require authentication must be wrapped in the MsalProvider component.
 * The MsalAuthenticationTemplate component will render its children if a user is authenticated or attempt to sign a user in. 
 */
const App = ({ instance }: AppProps) => {
  return (
    <BrowserRouter>
      <MsalProvider instance={instance}>
        <MsalAuthenticationTemplate interactionType={InteractionType.Redirect} authenticationRequest={authRequest}>
           {/* Content that is visible only to authenticated users */} 
        </MsalAuthenticationTemplate>
      </MsalProvider>
    </BrowserRouter>
  );
}

export default App;