"Unknown prop `triggerLogout` on <button> tag" after updating from 3.2.1 to 3.4.0

[andrijan]

Code

class Linkedin extends Component {
  constructor(props) {
    super();
    this.state = {
      authenticated: false
    };
  }

  handleLogin = user => {
    this.setState({ authenticated: true });
    window.IN.pictureUrl = user.profile.profilePicURL;
    window.IN.profileUrl = user.profile.publicProfileURL;
  };

  handleLogout = user => {
    this.setState({ authenticated: false });
    window.IN.pictureUrl = '';
    window.IN.profileUrl = '';
  };

  handleError(err) {
    console.error(err);
  }

  render() {
    return (
      <div>
        <FormEntryWrapper center>
          <FormLabel>{this.props.required && '*'} Linkedin</FormLabel>

          <SocialButton
            provider="linkedin"
            appId={process.env.REACT_APP_IN_ID}
            onLoginSuccess={this.handleLogin}
            onLoginFailure={this.handleError}
            onLogoutSuccess={this.handleLogout}
            onLogoutFailure={this.handleError}
            disabled={this.props.disabled}
          >
            <LinkedinContainer filled={this.state.authenticated}>
              <LinkedinWrapper
                filled={this.state.authenticated}
                src={this.state.authenticated ? liNeg : liPos}
                alt="linkedin logo"
              />
              {this.state.authenticated ? (
                <div>Linkedin connected</div>
              ) : (
                <div>
                  Connect with <strong>Linkedin</strong>
                </div>
              )}
            </LinkedinContainer>
          </SocialButton>
        </FormEntryWrapper>
      </div>
    );
  }
}

Screenshot

[andrijan]

Also, don't know if it's related, but I also don't get the popup after the update.

I click once and nothing happens, I click again and the error logged out (by handleError(err) is

[axhamre]

Same thing here.

[nicolas-goudry]

@andrijan Yeah this happens because you didn’t implement triggerLogout, I will make a check for onLogoutSuccess or onLogoutFailure before forwarding this prop.

About the second bug, I don’t understand, which provider is concerned and how can I reproduce it?

[axhamre]

Thanks for the fast reaction 🙏

Regarding the first issue, I just copied the sample code from the readme - could you please give an example how triggerLogout should be implemented?

[nicolas-goudry]

Oh yeah, this sample didn’t took account of triggerLogout being forwarded so that’s it... Sorry. Will be fixed soon, as well as README.md :+1:

Regarding logout process implementation, you will need a container handling login state. You should look at new demo files, specifically demo/components/demo.js.

As I implemented it, we have a container handling login state and forwarding a logout function to a UserCard component which have the logout button. This function will trigger the triggerLogout prop from a ref to SocialButton component.

Also, ref handling here is tricky because I handle multiple providers in one login state manager but it could be easier/simpler to make a container per provider.

[axhamre]

Unfortunately I'm still too much of a beginner to understand all these ins and outs. Especially with HOC.

Thanks a lot for your explanation, but I'll wait patiently until the readme perhaps have a simpler example 😅

[andrijan]

About the second bug, I don’t understand, which provider is concerned and how can I reproduce it?

It's LinkedIn, I'll find the code to reproduce it.

[Amurmurmur]

Facebook doesnt work for me after the upgrade. getting that: "Fetching user..."

[andrijan]

Facebook doesnt work for me after the upgrade. getting that: "Fetching user..."

Do you have to click twice to get the Fetching user... ?

It seems like it's triggering something after the first click, then when you click again, you get the error, because it's still processing the first click.

[Amurmurmur]

@andrijan Exactly! I have to click it twice.

[nicolas-goudry]

@andrijan @Amurmurmur When you call triggerLogin, HOC component will have it’s internal state prop isFetching set to true before calling SDK’s login function. Therefore if you call once again triggerLogin, a check to isFetching not being true will fail and throw this error Fetching user....

[andrijan]

I cloned the repo and used the SocialLogin wrapper from that code, instead of release 3.4.0 and that seems to work, I at least get the popup.

[nicolas-goudry]

So what's the deal?

Can you show us both code samples please? See what's causing this, thx

[andrijan]

I believe I've figured it out, I was using React 15.6.1, but it seems it needs 16.0.0 at least now.

[nicolas-goudry]

Huh, weird. I'll have to dig into this.

[Amurmurmur]

@andrijan Yep thats right. Just upgraded to react 16 and it works now, dialog pops up. Thank you 👍

[nicolas-goudry]

@andrijan @Amurmurmur Just tried to run the demo in a separate context with its own package.json.

I ran the following tests:

• [email protected] with [email protected] and [email protected]: working as expected
• [email protected] with [email protected] and [email protected]: working as expected
• [email protected] with [email protected] and [email protected]: working as expected
• [email protected] with [email protected] and [email protected]: working as expected

I really can’t say what is the matter here… Could you give it another try or setup a repo reproducing the error please?

[Amurmurmur]

@nicolas-goudry Honestly, I tried with the older version of React, the window doesn't pop up with the exact same code. :/ Maybe try to reset cache ?

[Traibuls]

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 button and it opens the pop-up
• Click on the x and close the pop-up
• Buy now on any click on the button will log an error "Fetching user...."

Any idea about this guys?

[rolme]

I am running into the same issue. Steps:

• Click on the button and it opens the pop-up
• Clock on the x and close the pop-up
• Clicking on button results in "Fetching user"

Suggestions on work around?

[Ashar2shahid]

I am running into the above issue as well, from what i understand is after any succesful or unsucesful login, if you click the button again this "Fetching user" error message is displayed .

  handleSocialLogin = user => {
    console.log(user);
  };

  handleSocialLoginFailure = err => {
    console.error(err);
  };

After any one of these function executes, clicking the button again results in "Fetching User"

[protolabz]

Hi, I am getting error Fetching User after second click on button (Google login) I am using "react": "^15.6.1", "react-dom": "^15.6.1", "react-social-login": "^3.2.1", I've simply installed the function and created Social button component

import React from 'react'
import SocialLogin from 'react-social-login'
 
const Button = ({ children, triggerLogin, ...props }) => (
  <button onClick={triggerLogin} {...props}>
    { children }
  </button>
)
 
export default SocialLogin(Button)

---

    handleSocialLogins = (user) => {
        console.log("Success");
        console.log(user)
    }
    
    handleSocialLoginFailures = (err) => {
        console.log("Failure");
        console.error(err)
    }

<SocialButtons
  provider='google'
  appId='APP_ID'
  onLoginSuccess={this.handleSocialLogins}
  onLoginFailure={this.handleSocialLoginFailures}>
   Login with Google
  </SocialButtons>

[flolege]

Getting the same Fetching User issue.

[flolege]

I solved the problem for me. Here is what I did: Since I am still developing my app locally, I am using localhost as domain. So I just went to the facebook developer site and added "localhost" to the "App Domains" in Settings-Basics: Now instead getting the nasty "Fetching User" error, I get an "Authentication failed" error and the Login Button is responsive again!

I think "Fetching User" is an intermediate state, something unfinished. It is connected to the error message you get in the console: "Refused to display '' in a frame because it set 'x-frame-options' to 'deny'." I guess facebook just sends this response with x-frame-options set to deny because they do not know your domain. If you open this url in a new tab, you see it is a message from facebook that the authentication failed. react-social-buttons does not manage this scenario, I guess this can be improved?

EDIT: And don't make your social button a functional component!! I used the given example on this page when I first run into the "Fetching user" issue. I tried many things, also making the function a class. After solving the issue, I set it back to a function but it did not work 100%: I got the "better" exception but the button was not clickable twice, getting again the "Fetching user" error. I changed it back to a class and voila it is working now. Here is my code:

` import React from "react"; import SocialLogin from "react-social-login"; import { FacebookLoginButton } from "react-social-login-buttons";

class Button extends React.Component { constructor(props) { super(props); }

login = () => {
this.props.triggerLogin(); }

render() {
	return (		
			<FacebookLoginButton onClick={this.login} {...this.props}>
				{this.props.children}
			</FacebookLoginButton>			
	);
}

}

export default SocialLogin(Button); `

EDIT2: "Fetching user" Still happens when user clicks on other buttons in the facebook login window, e.g. Forgot account? or Create New Account