Why does my react app ask for MSAL login directly if i visit the site when hosted in azure as Static-CodePudding

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.

CodePudding user response：

Since you mentioned hosted in Azure, I believe you are hosting it in an Azure App Service, right?

If that is the case, make sure you have nothing configured on the Authentication tab of the App Service.

The Authentication tab is used as an out of the box authentication solution for the app service. Since you are already handling the authentication on your code, you can disable it.

Reference: https://learn.microsoft.com/en-us/azure/app-service/configure-authentication-provider-aad

CodePudding user response：

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.