I'm working on an Outlook Add-in developed using React, and I've integrated MSAL React for authentication. However, I'm encountering an issue where a popup appears prompting the user to select their account when logging in.
Since the solution is already running inside Outlook, I want to avoid this popup and have the user seamlessly authenticated without needing to select their account. How can I achieve this?
Here’s the code I’m using for MSAL:`
import { PublicClientApplication } from '@azure/msal-browser';
public async getGraphToken(mode: string): Promise<string> {
return new Promise(async (resolve, reject) => {
try {
// Initialize MSAL PublicClientApplication
pca = new PublicClientApplication({
auth: {
clientId: Constants.AppRegistrationClientId,
authority: `https://login.microsoftonline.com/${Constants.TenantId}/oauth2/v2.0/authorize`,
redirectUri: `${window.location.origin}/login/login.html`
},
cache: {
cacheLocation: 'localStorage'
}
});
await pca.initialize();
const accounts = pca.getAllAccounts();
if (accounts.length === 0) {
throw new Error("No account found. Please sign in.");
}
const account = accounts[0];
let request;
if (mode === "graph") {
request = {
scopes: ['user.read', 'Mail.Send', 'Sites.ReadWrite.All'],
account: account
};
}
else if (mode === "sp") {
request = {
scopes: [${Constants.TenantUrl}/.default
],
account: account
}
}
else if (mode === "functionApp") {
request = {
scopes: Constants.FunctionAppScopes,
account: account
};
}
const response = await pca.acquireTokenSilent(request);
resolve(response.accessToken);
} catch (error) {
console.error("Error acquiring token silently", error);
try {
const interactiveResponse = await pca.acquireTokenPopup({
scopes: ['user.read', 'Sites.Read.All'],
});
resolve(interactiveResponse.accessToken);
} catch (interactiveError) {
reject(interactiveError);
}
}
});
}`