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

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>

Identity Provider

Azure AD / MSA

Source

External (Customer)