I am using Azure MSAL library in a vanilla js application running in localhost and I step up with a problem in the login flow with Twitter.
I am using the loginPopup() approach and it seems to work fine. When I choose to sign in with Twitter it asks for my credentials and if I enter them right, the popup closes and the login works.
The problem is when I type the wrong credentials
It redirects me (inside the popup) to another Twitter page
Then if I enter the right credentials I get redirected to my page inside the popup window and it does not close itself. And on the original page, I am not logged in.
This the URL generated after the wrong redirect that stays in the popup and does not close itself.
https://localhost:3001/#state=asdasdasd...&client_info=asdasdasd....&code=asdasdasd...
This is my msalConfig:
export const msalConfig = {
auth: {
clientId: process.env.B2C_CLIENTID,
authority: process.env.B2C_AUTHORITY,
knownAuthorities: [process.env.B2C_KNOWN_AUTHORITIES],
redirectUri: process.env.B2C_REDIRECT_URL
},
cache: {
cacheLocation: "localStorage",
storeAuthStateInCookie: false
}
};
And my login method:
constructor() {
this.account = null;
this.myMSALObj = new msal.PublicClientApplication(msalConfig);
this.myMSALObj.handleRedirectPromise()
.then((resp) => { this.handleResponse(resp); })
.catch(console.error);
}
loginWithTwitter() {
this.myMSALObj.loginPopup()
.then(response => {
utils.setSocialId(response.uniqueId);
utils.setSocialApplication(Constants.SOCIAL_APPLICATION.TWITTER);
const socialIdentity = {
email: response.idTokenClaims.emails[0],
name: response.idTokenClaims.name,
socialApplication: Constants.SOCIAL_APPLICATION.TWITTER,
userId: response.uniqueId
};
login.loginPlayerWithSocialIdentity(socialIdentity);
})
.catch(error => {
console.log(`Error signing in with Twitter: ${error}`);
});
}

