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

andrijan commented 7 years ago

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 commented 7 years ago

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 commented 6 years ago

Same thing here.

nicolas-goudry commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

andrijan commented 6 years ago

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 commented 6 years ago

@andrijan Exactly! I have to click it twice.

nicolas-goudry commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

So what's the deal?

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

andrijan commented 6 years ago

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 commented 6 years ago

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

Amurmurmur commented 6 years ago

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

nicolas-goudry commented 6 years ago

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

I ran the following tests:

rsl@3.4.0 with react@15.6.1 and react-dom@15.6.1: working as expected
rsl@3.4.0 with react@16.0.0 and react-dom@16.0.0: working as expected
rsl@3.4.1 with react@15.6.1 and react-dom@15.6.1: working as expected
rsl@3.4.1 with react@16.0.0 and react-dom@16.0.0: 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 commented 6 years ago

@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 commented 6 years ago

Hi guys i have the following configuration and i cannot get it working. rsl@3.4.1 with react@16.0.0 and react-dom@16.0.0

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 commented 6 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

Getting the same Fetching User issue.

flolege commented 5 years ago

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

deepakaggarwal7 / react-social-login

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

Code

Screenshot