While testing my implementation of msal on localhost, everything runs smoothly. However, once deployed to an Azure App Service, the clientId or tenantID values appear to become undefined. I even attempted hardcoding the id strings into the file but still encountered issues. The error that occurs when trying to click the login button in production is:
GET https://login.microsoftonline.com/undefined/v2.0/.well-known/openid-configuration 400 (Bad Request)Uncaught (in promise) ClientAuthError: endpoints_resolution_error: Error: could not resolve endpoints. Please check network and try again. Detail: ClientAuthError: openid_config_error: Could not retrieve endpoints. Check your authority and verify the .well-known/openid-configuration endpoint returns the required endpoints. Attempted to retrieve endpoints from: https://login.microsoftonline.com/undefined/v2.0/.well-known/openid-configuration
at t [as constructor] (_app-3866deb516d5bf6f9628.js:1)
at new t (_app-3866deb516d5bf6f9628.js:1)
at Function.t.createEndpointDiscoveryIncompleteError (_app-3866deb516d5bf6f9628.js:1)
at Function.<anonymous> (_app-3866deb516d5bf6f9628.js:1)
at _app-3866deb516d5bf6f9628.js:1
at Object.throw (_app-3866deb516d5bf6f9628.js:1)
at s (_app-3866deb516d5bf6f9628.js:1)
Here is how the msal implementation looks:
import * as msal from "@azure/msal-browser";
function redirUri() {
if (process.env.NODE_ENV == "development") {
return "/"
} else {
return "https://somewebsitename.azurewebsites.net/"
}
}
const msalConfig = {
auth: {
clientId: process.env.NEXT_PUBLIC_AZURE_AD_CLIENT_ID,
authority: `https://login.microsoftonline.com/${process.env.NEXT_PUBLIC_AZURE_AD_TENANT_ID}`,
redirectUri: redirUri()
}
};
const msalInstance = new msal.PublicClientApplication(msalConfig);
export { msalInstance }
How should I properly tackle this issue?