[FIXED] Why does my react app ask for MSAL login directly if i visit the site when hosted in azure as Static Web App but not in localhost

Issue

I have a react app that uses azure ad and msal for authentication.

Facing 2 problems in production environment: 1- When i visit the site on localhost it shows me the unauthenticated view as it should, and then i can log in to access my protected routes, but when i do the same to the application that is hosted on azure, i get asked to log in immediately and after logging in then it shows me the unauthenticated view and need to log in again to see the authenticated template. 2- Randomly when i try to login i get redirected to the main page showing the unauthenticated view and losing the URL parameters, so i need to log in again by pressing the login button for the second time, then i see the main page of the authenticated template but the url param is gone.

this is my authConfig.js file:

import { LogLevel } from '@azure/msal-browser'
export const msalConfig = {
  auth: {
    authority:
      'https://login.microsoftonline.com/xxxxxxxxxxxxxxxxxxx',
    clientId: 'xxxxxxxxxxxxxxxxxxxxxx',
    redirectUri: '/',
  },
  cache: {
    cacheLocation: 'localStorage',
    storeAuthStateInCookie: false,
  },
}

export const logInRequest = {
  scopes: ['api://xxxxxxxxx/access_as_user'],
}

And this is my SignIn func:

const handleLogin = (instance) => {
    instance.loginPopup(logInRequest).catch((e) => {
      console.log(e)
    })
  }

the signout func:

const handleLogout = (instance) => {
    instance.logoutRedirect({
      postLogoutRedirectUri: '/',
    })
  }

This is how i implement the library in app.js:

  const isAuthenticated = useIsAuthenticated()
  isAuthenticated && requestAccessToken(instance, accounts)

return (
      <>
         <AuthenticatedTemplate>
            <Routes>
               <Route path="/" element={<zzzz/>} />
               <Route
                 path="/xx"
                 element={<xxxx/>}
               />
               otherRoutes.....   
            </Routes>
         </AuthenticatedTemplate>
         <UnauthenticatedTemplate>
            <NotAuthenticatedView />
         </UnauthenticatedTemplate>
      </>

and lastly this is my index.js where i wrap the app with the provider:

import { msalConfig } from './authConfig'

const msalInstance = new PublicClientApplication(msalConfig)

ReactDOM.render(
  <React.StrictMode>
    <MsalProvider instance={msalInstance}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </MsalProvider>
  </React.StrictMode>,
  document.getElementById('root')
)

appreciate any help

I tried pop up and redirect for both login and out, expected the app in production to behave in the same way as in dev, but i'm getting asked to login directly when i visit the site aven before i see the unauthenticated view, then seeing it though i already logged in, and in sometimes the login pop up get stock where i see the same page in a pop up and cant press the login either, where i should close down the pop up and try the login button multiple times, and sometimes i login then it shows the unauthenticated view and the param in url is lost.

Solution

After many days of debugging it showed that i needed to remove the role for the route "*/" from webappconfig.json and add serve index.html.

Answered By - Essabarbar
Answer Checked By - - Clifford M. (ReactFix Volunteer)