MSAL Authentication not working on browser applications

[SirMixalotMixalot]

Hey!

I just wanted to ask what the recommended way of using the msal package was on browser applications? On desktop, it opens a browser and lets you sign in but on browser, after using some JS Interop to open the popup, what should the redirect URL be set to?

Here's the js code I use to login on browser. The redirect just leads to the whole application being reloaded. My current navigation uses a CurrentPage property on the main view model to render the selected page from a navbar. Is there a way to incorporate URLs into this?

// msalAuthModule.mjs
let pca = null;

export function initialize(clientId, tenantId) {
    if (!window.msal) {
        throw new Error("MSAL library not loaded");
    }
    pca = new window.msal.PublicClientApplication({
        auth: {
            clientId: clientId,
            authority: `https://login.microsoftonline.com/${tenantId}`,
            redirectUri: `${window.location.origin}/callback`
        }
    });
}

export async function signIn(scopes) {
    if (!pca) {
        throw new Error("MSAL client not initialized. Call initialize() first.");
    }
    try {
        const loginResponse = await pca.loginPopup({ scopes: scopes });
        return loginResponse.accessToken;
    } catch (error) {
        console.error(error);
        throw error;
    }
}

Are there any samples I can use to learn more?

[ecke101]

Did you get this to work? I have the same problem that the redirect causes the app to load in the small popup and it gets cancelled in the main window.

[maxkatz6]

This issue is better to be reported or asked at MSAL repository. It doesn't seems to be related to Avalonia, we can't help with that.

[stevemonaco]

Redirect callbacks can't be used here, AFAIK. They typically require an HttpListener and TCP isn't possible on WASM. You can use JS broadcast channels instead to send messages (with the token) across tabs. There might be some way to make it work with an iframe added to your WASM app's HTML/JS wrapper, too. Either way, you almost certainly need to start listener (even a TaskCompletionSource could work) on the C# side and have some JS that receives the token and calls into C#.