react-social-login
react-social-login copied to clipboard
deepakaggarwal7
status Fetching user... after closing with X
Hi guys i have the following configuration and i cannot get it working. [email protected] with [email protected] and [email protected]
Steps:
Click on the login button and it opens the pop-up Click on the X(close window) and it closes the pop-up Buy now on any click on login button will log an error "Fetching user...." and the pop-up does not show
Any idea about this guys?
@Traibuls I had same error. SocialLogin wrapper has bug with inner state. I did a dirty hack for recreate button by setting key={Math.random()} after onLoginFailure called.
Same issue... Tried @dmansurov83 solution, but onLoginFailure isn't fired right after I close the popup, only when I click again on the login btn, so right now the user needs to click twice on the btn in order for it to work.
Anyone else having this issue??
Actually I have the solution. Not yet PR here. But from our component its possible to adding. onFailureLogin, adding this:
this.setState({isFailure: true}, () => { this.setState({isFailure: false}) )
Walla, on your render, just reMount SosialLogin component... I know this one coz I see there is the react sosial login handle Promise call sdk in didMount. So when we want to recall sdk fail or other else. We need to remount haha... Will update PR for this issue as soon as possible...
@prakasa1904 Thanks for the quick response! But I didn't quit understand your solution... Right now I have two problems -
-
onLoginFailure isn't fired when a user clicks 'X' or 'cancel', only when the user clicks again on the login btn (and then onLoginFailure fires with an error "Fetching user")
-
after a user clicks 'X' or 'cancel' and returns to my page, he can't click again on 'login'. To solve this, I tried rerendering SocialButton component on failure (like @dmansurov83 suggested), but I can't do it because of problem number 1 - this event is not firing :(
Got solution
One thing you should do is wrap your login component with div and provide "key" to that attribute. Where key should come from state. And from "onLoginFailure" function update that key value so it'll make your buttons re-render and then popup can be open multi times.
To continue on Rajnish'es answer:
Generate random number:
const rnd = (len, chars='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789') => [...Array(len)].map(() => chars.charAt(Math.floor(Math.random() * chars.length))).join('')
Use it in state:
const [randomDivKey, setRandomDivKey] = useState(rnd(24))
Use it in the outer div:
<div className={App ${provider && profile ? 'hide' : ''}} key={randomDivKey}>
works like a charm
