Button is calling Microsoft's auth on page load

[G4mingEdition]

Hi,

I have to create a react microsoft login so I used your library but I encoutered a bug.

My code: I'm using React class components with Redux.

Actual result: When loading the page, the library is automatically showing the Microsoft's popup and looping "Trying to sign you in" Then I got this error

Additional information: Package version : 1.15.0 If I use "withUserData", it's working but it's spamming my API and when I disconnect it's still spamming my API and connecting me again to the website. I'm using "react-facebook-login" and "react-google-login" and I haven't encountered this problem.

Any solution ? 😕

[alexandrtovmach]

I think you need to be more accurate when say "Library not working", because it seems more like bug on your side =) Anyway, I see core issue in this "When loading the page, the library is automatically showing the Microsoft's popup and looping". Auth process should be initiated by pressing button, not by page load, so please check why it's happen or provide reproducible example.

Good info to add to issue is:

• package version that you're using
• is it reproducing on demo website

[G4mingEdition]

I have fixed the issue on my project. I had to clear the session that contains all information about Microsoft. Without that, the library is spamming Microsoft (and my API) and call Microsoft's auth on page load.

[SamuelPinho]

@G4mingEdition thanks for the help man, it solved the same problem here.

@alexandrtovmach any ideia if this could be added by default on the lib?

[alexandrtovmach]

You not answered to my questions about package version, so I'm not sure about it

[G4mingEdition]

I've added the package version in "Additional information" (1.15.0)

[muyiwaoyeniyi]

@alexandrtovmach Thanks again for the package!! Definitely been helpful.

I'm also having the same issue after using 1.12.1. If I sign out within my app and revisit the sign in page, microsoft authentication immediately happens without clicking on the button. You have to clear the session store or close the tab and use another tab. Signing out a user (which I tried) doesn't clear the session data and I believe Microsoft said they won't clear the session data.

I see that you have a silent login option. It would be good to make this optional as on apps that use several login options, it will automatically force you to sign in with microsoft. I think react-google-login makes this optional. It could also be a security risk on a shared/public machine.

useEffect(() => {
    const clientToken = useLocalStorageCache
      ? localStorage.getItem("msal.idtoken")
      : sessionStorage.getItem("msal.idtoken");
    clientToken && getGraphAPITokenAndUser(forceRedirectStrategy || checkToIE());
  }, [msalInstance]);

@G4mingEdition @SamuelPinho You might want to avoid clobbering your sessionstorage (since other tools might be setting data in it) and just delete the msal.idtoken.

@alexandrtovmach Thanks again!!

[rafenasir]

@G4mingEdition .Can I stop the call to authHandler function on page reload?

[muyiwaoyeniyi]

@rafenasir just do this after successful authentication

sessionStorage.removeItem("msal.idtoken")

[rafenasir]

Thanks a lot!! :)

[alexandrtovmach]

looks like a hacky solution) will check if there a proper way to handle that

[rafenasir]

looks like a hacky solution) will check if there a proper way to handle that

@alexandrtovmach yes!! In the above scenario if I remove the msal.idToken it doesn't show the logout button :) I would highly appreciate if you can come up with a proper solution.

[muyiwaoyeniyi]

@alexandrtovmach I pasted the source of the issue here https://github.com/alexandrtovmach/react-microsoft-login/issues/84#issuecomment-895918353 ... it would be helpful to allow us send a prop to enable or disable this behavior in the useEffect

[ishwark7]

Hi @alexandrtovmach , Facing this issue in laster 1.15.0. Using sessionStorage.removeItem("msal.idtoken") as of now to avoid the loop. Please let us know if this can be handled in a better way. Thanks