New Jan 6, 2025

How to avoid MSAL Popup for Account Selection in Outlook Add-in with React

Libraries, Frameworks, etc. All from Newest questions tagged reactjs - Stack Overflow View How to avoid MSAL Popup for Account Selection in Outlook Add-in with React on stackoverflow.com

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); } } }); }`

Scroll to top