I'm migrating react-script to vite dev server for corporate project, but the msalInstance redirects to uri which say refuse to connect

Question

I wanted to migrate react-script project to vite environment.

We are using msal-react package for authentication. This works fine and redirects to URI in react-script, but vite when redirects to same uri, the site is unable to connect.

Answer 1

When migrating from a react-script environment to a vite environment while using the msal-react package for authentication, you may encounter issues with redirection to a URI that refuses to connect. This could be related to the configuration of your application during the migration process.

Here are a few steps you can take to troubleshoot and resolve the issue:

1. Check Redirect URI Configuration: Ensure that the redirect URI you are using in your Azure App Registration is correctly configured for the Vite environment. The redirect URI must match the one specified in your application and should be registered as a Single-page application in the Azure portal.
2. CORS Configuration: If the site is unable to connect, it might be due to Cross-Origin Resource Sharing (CORS) issues. Make sure that your Vite server is set up to allow requests from the domains you are using.
3. Update MSAL Configuration: Review your MSAL configuration to ensure that it aligns with the requirements for Vite. This includes checking the clientId, authority, and any other relevant parameters.
4. Debugging Network Requests: Use the browser's developer tools to inspect the network requests being made during the authentication process. Look for any errors or blocked requests that could indicate misconfigurations.
5. Testing in Different Environments: If possible, test the application in different environments (e.g., local development vs. production) to see if the issue persists across all setups.

By following these steps, you should be able to identify the cause of the connection refusal and adjust your configuration accordingly.

---

References:

• Handle errors and exceptions in MSAL Node
• Errors