Azure AD authentication login redirect not working on react app hosted on S3

Question

I am trying to authenticate a webapp using Azure AD with the MSAL react and browser libraries. This code works fine on localhost:3000 dev server but when I deploy it to the web the redirect never happens and only the UnAuthenticatedTemplate html is visible. How do I fix this? It seems like I have tried everything. My first thought would be the specified redirect URI in the azure AD app registration but im not so sure this will work.

I am using the msal react 'useMsalAuthentication' hook to initiate login and token aquisition. Note when I change the interaction type to popup the interaction window opens for a slit second then closes. app.js

export function App() {

  // //auth login hook
  const {login, result,error} =useMsalAuthentication(InteractionType.Redirect,loginRequest);
  
  console.log("login Initiated")
  
  
  useEffect(() => {

    if (error instanceof InteractionRequiredAuthError) {
        login(InteractionType.Redirect, loginRequest);
    }

    console.log("hello from useEffect hook - retry login if failure")
  }, [error]);

 
  console.log(result)
  return (
    <React.Fragment>
      
        <UnauthenticatedTemplate>
          <h1>you are unauthenticated!</h1>
          
        </UnauthenticatedTemplate>
      
        <AuthenticatedTemplate>
          <div className="App">
            <div id="container">
                <div id="content-center px-96">
                  <img id='logo' alt="logo" src={logo}></img>  
                  
                </div>
            </div>
            <Dropdown/>
          </div>
        </AuthenticatedTemplate>
      
    </React.Fragment>
  );

index.js

const msalInstance = new PublicClientApplication(msalConfig);

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

root.render(
  <React.StrictMode>
    <MsalProvider instance={msalInstance}>
      <App />
    </MsalProvider>
  </React.StrictMode>
);

authConfig.js

export const msalConfig = {
    auth: {
      clientId: "<client_id>",
      authority: "https://login.microsoftonline.com/<tenant>", 
      redirectUri: "http://localhost:3000/",
      
      
    },
    cache: {
      cacheLocation: "localStorage", // This configures where your cache will be stored
      storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    }
  };
  
  // Add scopes here for ID token to be used at Microsoft identity platform endpoints.
  export const loginRequest = {
   scopes: ["User.Read"]
  };
  
  // Add the endpoints here for Microsoft Graph API services you'd like to use.
  export const graphConfig = {
      graphMeEndpoint: "Enter_the_Graph_Endpoint_Here/v1.0/me"
  };
  

Answer 1

Azure AD authorization redirects or popups only work when HTTPS is enabled for an S3 bucket. Azure AD makes an exception for local host for development purposes.