CODEWITHSUNDEEP
reactjsazureazure-active-directoryazure-ad-b2c
rjjdv
rjjdv

Reputation: 415

Trouble deploying a React app to Azure Static Website

I have created a React UI with some auth stuff using MSAL. Now locally everything works, but for some reason when I deploy to the SWA it doesn't. I'm using Azure AD B2C for my users. When a user lands on the UI and is not authenticated he/she will be redirected to the default login page from Azure. This works when I am local, but when it's deployed it doesn't. The error in the URL says something about the URI not being recognised as a redirect URI, but I have added that to the app registration. I also end up at localhost:3000 which seems strange since that shouldn't be the redirectURI.

This is the code in React:

const App: FC<AppProps> = ({ msalInstance }) => {
  return (
    <MsalProvider instance={msalInstance}>
      <MsalAuthenticationTemplate
        interactionType={InteractionType.Redirect}
        authenticationRequest={authRequest}
        errorComponent={ErrorComponent}
        loadingComponent={LoadingComponent}
      >
        <PrimaryLayout>
          <Router />
        </PrimaryLayout>
      </MsalAuthenticationTemplate>
    </MsalProvider>
  );
};

I have defined the redirectURI in my authConfig, which is passed to the instance here:

const msalInstance = new PublicClientApplication(msalConfig);

root.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <BrowserRouter>
        <GlobalStyles />
        <App msalInstance={msalInstance} />
      </BrowserRouter>
    </ThemeProvider>
  </React.StrictMode>
);

I double checked the configuration in my project, and inside the React project. It doesn't refer to localhost:3000 anywhere anymore. Even removed it as a redirectURI in Azure AD B2C.

Does anyone know where I should look?

Upvotes: 0

Views: 305

Answers (1)

rjjdv
rjjdv

Reputation: 415

I needed to set the setting "navigateToLoginRequestUrl" to true.

Upvotes: 1

Related Questions