Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type

See original GitHub issue

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.28.2

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

1.4.6

Public or Confidential Client?

Confidential

Description

Hi guys, I’m getting this error while trying to login with ‘popup’ interaction.

Cross-origin token redemption is permitted only for the ‘Single-Page Application’ client-type. Request origin: ‘http://localhost:3000’.

Is there a way I can pass an extra property request origin to the request?

MSAL Configuration

export const b2cPolicies = {
    names: {
        signUpSignIn: "B2C_1_SISOPolicy",
        editProfile: "B2C_1_ProfileEditPolicy"
    },
    authorities: {
        signUpSignIn: {
            authority: "https://login.microsoftonline.com/tfp/msidlabb2c.onmicrosoft.com/B2C_1_SISOPolicy"
        },
        editProfile: {
            authority: "https://login.microsoftonline.com/tfp/msidlabb2c.onmicrosoft.com/B2C_1_ProfileEditPolicy"
        }
    },
    authorityDomain: "login.microsoftonline.com"
}

// Config object to be passed to Msal on creation
export const msalConfig = {
    auth: {
        clientId: process.env.REACT_APP_AZURE_CLIENT_ID,
        authority: b2cPolicies.authorities.signUpSignIn.authority,
        knownAuthorities: [b2cPolicies.authorityDomain],
        redirectUri: process.env.REACT_APP_AZURE_REDIRECT_URI,
        postLogoutRedirectUri: process.env.REACT_APP_AZURE_POSTLOGOUT_REDIRECT_URI
    },
    cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: isIE || isEdge || isFirefox
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {	
                    return;	
                }
                switch (level) {	
                    case LogLevel.Error:	
                        console.error(message);	
                        return;	
                    case LogLevel.Info:	
                        console.info(message);	
                        return;	
                    case LogLevel.Verbose:	
                        console.debug(message);	
                        return;	
                    case LogLevel.Warning:	
                        console.warn(message);	
                        return;	
                    default:
                        return;
                }
            }
        }
    }
};

Relevant Code Snippets

<MsalProvider instance={msalInstance}>
                <MsalAuthenticationTemplate 
                    interactionType={InteractionType.Popup} 
                    authenticationRequest={authRequest} 
                    errorComponent={ErrorComponent} 
                    loadingComponent={LoadingComponent}
                >
                    <div>Profile Content</div>
                </MsalAuthenticationTemplate>
            </MsalProvider>