alexandrtovmach / react-microsoft-login

Microsoft services authorization with React.
https://alexandrtovmach.github.io/react-microsoft-login
MIT License
81 stars 38 forks source link

Infinite loop on MS popup login #92

Open urdaneta88 opened 2 years ago

urdaneta88 commented 2 years ago

When i try to login the popup from MS start looping and the page make an infinity number of request to openid-configuration.

Here is the button with a child component just to have a custom style and icon

  <MicrosoftLogin
    useLocalStorageCache={false}
    clientId={MICROSOFT_OAUTH_CLIENT_ID}
    authCallback={authHandler}
    buttonTheme="light_short"
    debug={true}
  >
    <LoginIconButton
      text={i18nMicrosoft}
      iconUrl={iconMicrosoft}
    />
  </MicrosoftLogin>

This is the callBack

const authHandler = (error, data: { accessToken: string }) => {
  if (error.errorCode && error.errorCode === 'user_cancelled') {
    handlePopupClosing();
  } else {
    handleResponseMicrosoft(error, data);
  }
};

Ifi the user close the popup we handle that like this (we are using redux and the Store.dispatch is needed to call any action)

export const handlePopupClosing = () => {
  Store.dispatch(clearLoginErrors());
  Store.dispatch(setLoginPopupClosedByUserGoogleMicrosoft(true));
  Store.dispatch(toggleLoadingGoogleMicrosoft(false));
};

Otherwise we call this function and make a request to our server with the token and confirm that the user is in our DB

export const handleResponseMicrosoft = (err, data: { accessToken: string }) => {
  Store.dispatch(toggleLoadingGoogleMicrosoft(true));
  if (!err) {
    // If err is falsy we make the resquest to the server
    // and if the response is OK we set the required states to give the user access to the page
  } else {
    handleFailure(err);
  }
};

Video evidence of the bug Infinity requests

https://user-images.githubusercontent.com/6945968/147596207-fe825758-efd5-4067-b3a8-718a6b2d5048.mp4

Infinity popup

https://user-images.githubusercontent.com/6945968/147596221-a1cf3f0e-a726-4d81-a4df-2efb1bc01d9a.mp4

dependencies

"react": "^16.12.0",
"react-app-polyfill": "0.2.2",
"react-dates": "^21.8.0",
"react-dom": "^16.12.0",
"react-google-login": "^5.2.2",
"react-i18next": "^11.11.0",
"react-microsoft-login": "^1.15.0",
"react-redux": "7.1.0",
"react-router-dom": "5.0.1",
"react-scripts": "^3.4.0",
"react-use": "^13.27.0",
"react-virtuoso": "^0.13.2",
"react-with-direction": "^1.3.1",
"redux": "4.0.4",
"redux-devtools-extension": "2.13.8",
"redux-thunk": "2.3.0",
"reselect": "^4.0.0",
"styled-components": "^4.0.0",
"typeface-asap": "0.0.69",
"wade": "^0.3.3"
parthsavaliya1 commented 2 years ago

Hii same issue replicate for me in version 1.15.0. any update on this?

klendi commented 2 years ago

Any updates on this ?