deepakaggarwal7 / react-social-login Goto Github PK

In the github SDK, user scope is pushed automatically, but user scope allows read/write access. I believe you should limit the default scope to read:user to only allow read access.

Can you plz push the updated package.json file

Hi,

The 'scope' property doesn't work for me. Maybe I'm doing something wrong ?

My code (the important bits):

import { OldSocialLogin as SocialLogin } from 'react-social-login';

class Login extends React.Component {
    response = (e) => {
        console.log(e._token.scope);
    }
    render() {
        return (
                        <SocialLogin
                        provider='google'
                        appId="appId"
                        scope="https://www.googleapis.com/auth/youtube"
                        callback={this.response}
                    >
                        <GoogleLoginButton text="Login with Google" />
                    </SocialLogin>
       );
   }
}

What I get in the console.log is:
https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/plus.me openid email profile

I even tried 'youtube', 'youtube.readonly', but I get the same 'default' scopes.

Thanks 👍

When I build my app using yarn build(=npm run lint && webpack ), a lint error raises and stops the build.

Lint Error

Expected space or tab after '//' in comment

File concerned

react-social-login-master/src/index.js, this line

I am getting the below warning sometimes

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the SocialLogin component.

not sure why but it seems to be thrown at this line

I'm trying to work with the Linkin Login. I get all of the data back which includes an access_token but when I try to make more API calls with that access_token LinkedIn is telling me that it is invalid. Any ideas?

Getting this with React 16. Not sure if it was already there when I was using React 15.

SocialLogin error: TypeError: this.updater.enqueueCallback is not a function
    at SocialLogin../node_modules/react-social-login/node_modules/react/lib/ReactBaseClasses.js.ReactComponent.setState (ReactBaseClasses.js:64)
    at social-login.js:1344
    at <anonymous>

On a SSR project, using the code in README I got this error in development (terminal output):

ReferenceError: document is not defined
    at Object.<anonymous> (/Users/ale/Repos/XYZ/node_modules/react-social-login/dist/social-login.js:1:77909)
    at e (/Users/ale/Repos/XYZ/node_modules/react-social-login/dist/social-login.js:1:419)
    at Object.e._id (/Users/ale/Repos/XYZ/node_modules/react-social-login/dist/social-login.js:1:101300)
    at e (/Users/ale/Repos/XYZ/node_modules/react-social-login/dist/social-login.js:1:419)
    at Object.<anonymous> (/Users/ale/Repos/XYZ/node_modules/react-social-login/dist/social-login.js:1:86775)
    at e (/Users/ale/Repos/XYZ/node_modules/react-social-login/dist/social-login.js:1:419)
    at Object.<anonymous> (/Users/ale/Repos/XYZ/node_modules/react-social-login/dist/social-login.js:1:96348)
    at e (/Users/ale/Repos/XYZ/node_modules/react-social-login/dist/social-login.js:1:419)
    at Object.t.__esModule.default (/Users/ale/Repos/XYZ/node_modules/react-social-login/dist/social-login.js:1:90868)
    at e (/Users/ale/Repos/XYZ/node_modules/react-social-login/dist/social-login.js:1:419)
    at Object.t.__esModule.default (/Users/ale/Repos/XYZ/node_modules/react-social-login/dist/social-login.js:1:89721)
    at e (/Users/ale/Repos/XYZ/node_modules/react-social-login/dist/social-login.js:1:419)
    at /Users/ale/Repos/XYZ/node_modules/react-social-login/dist/social-login.js:1:776
    at /Users/ale/Repos/XYZ/node_modules/react-social-login/dist/social-login.js:1:785
    at n.(anonymous function).i (/Users/ale/Repos/XYZ/node_modules/react-social-login/dist/social-login.js:1:84)
    at Object.<anonymous> (/Users/ale/Repos/XYZ/node_modules/react-social-login/dist/social-login.js:1:295)

Could you provide a demo code with SSR support in examples?

Hi @deepakaggarwal7,

Sorry to open this issue but there isn’t any way to contact you directly on your GitHub profile 😄

Can you update RSL to version 3 on npm please ? This way we could definitely close issues #9, #10 and #12 😉

Also, I think we should open a Gitter community (you can create a community from a repository) for better communication between contributors and providing help to users if they ask for 😃

Hello i am using this package in my nextjs app for google and facebook login. my login page and social components are as follow. On Client side it is working fine. but when i reload the page, it is giving me error like "window is not defined"

social_login.js

 import React from 'react';
 import SocialLogin from 'react-social-login'; 
 import { connect } from 'react-redux' ;
 import {
  FACEBOOK_APP_ID,
  GOOGLE_APP_ID,
 } from '../../config';
 
 const SocialButton = SocialLogin(({ children, triggerLogin, ...props }) => (
   <button onClick={triggerLogin} {...props}>
     { children }
   </button>
 ));

 export default class Social {
   constructor(props){
      super(props);
      this.success = this.success.bind(this);
      this.fail = this.fail.bind(this);
   }

   success(data){
     console.log('success',data)
   }

   fail(data){
     console.log('success',data)
   }
   render(){
     return (
      <div className="social-auth-links text-center">
        <p>- OR -</p>
        <SocialButton
          className="btn btn-block btn-primary flat-corner"
          provider='facebook'
          appId={FACEBOOK_APP_ID}
          onLoginSuccess={props.success}
          onLoginFailure={props.fail}
          >
            <i className="fa fa-facebook" /> Sign up using Facebook
        </SocialButton>
        <SocialButton
          className="btn btn-block btn-danger flat-corner"
          provider='google'
          appId={GOOGLE_APP_ID}
          onLoginSuccess={this.success}
          onLoginFailure={this.props.fail}
        >
          <i className="fa fa-google-plus" /> Sign up using Google+
        </SocialButton>
      </div>
    );
  }
}

login.js

import React,{Component, PropTypes} from 'react';
import Social from '../components/social';
import Loginform from '../components/loginform';

class Login extends Component{
  constructor(props){
    super(props);
  }

  render(){
     return (
        <Loginform />
        <Social />
     );
  }
}

export default Login;

Is there any solution to work it on server side also ?

Has anyone figured out a good strategy for handling the timeout of the access token here?

Hi, my code is

<SocialLogin 
	provider="Facebook" 
	appId="250312875135978" 
	callback={this.authCallBack}>
		FB-Login
</SocialLogin>

But the popup allway open with client_id 209060642824026 _url https://www.facebook.com/dialog/oauth?app_id=209060642824026&client_id=209060642824026...

and show error
App Not Setup: This app is still in development mode

I had an issue but that was my mistakes.

While I was coding the google loader, I had a thought about how login is triggered.

Actually, we don’t allow users to use any other event than the click… Because it is hardcoded!

Can’t we find a way to change this behaviour with a clever trick?

I thought about a list of events granted as an eventType prop which would be totally optional of course (click event being the default behavior).

What do you think of that?

I am using a snippet very similar to the one in the demo files but for some reason, I am getting this error

GET http://api-cdn.amazon.com/sdk/login1.js net::ERR_CONNECTION_REFUSED`.

I have http://localhost:3000 & https://localhost:3000 both added to my allowed origins on Amazon's Security Profile Management.
Browser used: Google Chrome Version 61.0.3163.100
react-social-login version: 3.2.0

<SocialButton
  provider='amazon'
  appId='amzn1.application-oa2-client.xxxxxxxxxxx'
  onLoginSuccess={handleSocialLogInSuccess}
  onLoginFailure={handleSocialLogInFailure}
>
  Login with Amazon
</SocialButton>

Any idea what might be the problem?

Closing decided to use something different than this component.

Thanks for awesome package. One thing want to know whether Will it work on mobile web ? how the pop window on mobile will be handled?

How come Google login is commented out in demo apps and doesn't work? The only one that could have worked was LinkedIn. Facebook had some sort of error (couldn't even log in) and Google doesn't work at all (I'm mostly interested in that one).

This could be good lib to use, provided that at least demos work :)

current is : http://api-cdn.amazon.com/sdk/login1.js
may be right is : https://api-cdn.amazon.com/sdk/login1.js

i use current address meet err on chrome : net::ERR_CONNECTION_REFUSED

Hi

very nice plugin and easy to set up in my experience. Are there any plans to support Slack as oauth provider? Would be quite to get group memberships.

Best,
Max.

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

I'm getting SDK not loaded

i have implemented G+, FB, Linkedin login and Code is working fine on my local machine, but after making production build, then on clicking on login button on hosted environment, no pop-up is opening and its giving error in onLoginFailure Fetching user... on 2nd time button click, on all social login.
Do have to implement something else on hosted env ?

is there any chance for twitter integration ?

Hi @deepakaggarwal7, thank you for open-sourcing it! It looks very promising.

I was wondering -

1. If you can share a more detailed explanation of how it works and/or the architecture as that will help better assess it compared to other options.
2. Do you plan to put up a demo link that once can test it more with?

Thanks!

Have been using your library, it's AWESOME 🥇 A humble request, can you please add Pinterest :-)

Hi,

Thank you for this package but I'm facing some issues with using it with Google:

I have a modal with 2 pages, each page contains 2 SocialButtons one for Facebook the other for Google. When I open the modal both buttons work but when I switch to the second page the Google one doesn't work and returns "SDK not loaded".

It seems like each time you are trying to insert a google button on a page it will try to load the sdk again while this is not happening for the facebook one.

EDIT : The easiest way to reproduce this bug is by adding 2 buttons on a page

Hi,

I have multiple Google login buttons on the same screen, but only the first button can work; the subsequent button produced SDK not loaded error.

I am implementing it the same way as stated in the documentation.

Is there something I should take note of?

After login success, I was not able to re-authenticate. I understand that this is by design but, facebook and I'm sure another social login providers have an expiration date for their generated token. Some sort of automatic re-login or auto log out would be great.

I am getting this warning when using SocialButton.js

Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail

Not really sure what this all means...
I am using React 16.1.1

Tried the demo, user id returned from Github login did not match my Github user id.

The user id for facebook login confused me as well.

Support to Github & AWS as providers.

Doesn't seem like there is a way to allow more scopes for Facebook so when I get my token back I have very limited access to the API. It would be nice if we could pass in allowed extra scopes for facebook so when I get the token I could for example post to my wall. Here is a reference of all the available scopes:

https://developers.facebook.com/docs/facebook-login/permissions/

When i click "login with linkedin" it opens popup for linkedin login, i close that popup and again click on button "login with linkedin" it displays error in console like - "SDK not loaded". in you demo there is also an error.

Please give me solution for this. thanks in advance !!

If I click on the social share button and internet connection is not there, I'm unable to handle this kinda exceptions.

Any Idea ?

Cheers

import React from 'react';
import SocialLogin from 'react-social-login'

class FacebookLogin extends React.Component {
 
	responseFacebook(user, err) {
		console.log(user);
		console.log(err);
	}
 
	render() {
	  return (
	    <SocialLogin provider='facebook' appId='xxxxxxxxxxxxx' callback={this.responseFacebook}>
	  		<button>Login with Facebook</button>
	    </SocialLogin>
	  )
	}
}

export default FacebookLogin;

This gets me an error

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `FacebookLogin`.

Any ideas why this is the case? Is it broken or is it me?

Hi,
Perhaps this is not the good place to ask, but I'm new to React and I don't how to style my buttons depending on providers. If I follow the sample, with a SocialButton component, where can I fetch the provider prop to make a conditionnal style on my button ?

Can we have a callback when a sdk is loaded?

Hi (and thank you for the repo!)

Got undefined accessToken and expiresAt on the returned user with Linkedin auth.

I tried with your demo, and in my app (not yet configured, but it works with google)
Will it work if the app is welled configured?

Thanks

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?

used something different

Hello,

Thanks for this package. Is there a possibility to include new callback for logout, i.e:

<SocialButton
provider='provider'
appId='YOUR_APP_ID'
onLoginSuccess={handleSocialLogin}
onLoginFailure={handleSocialLoginFailure}
onLogout ={handleSocialLogout}
>

Does RSL (react-social-login) really need to render an extraneous DOM node?

I don't think so.

I think it would be smarter to make RSL a HOC (Higher-Order Component) for the following reasons:

• its DOM node is completely useless
• it forces to wrap our component in a SocialLogin component
• it doesn't forward custom props (like style or className)
• it could even break the layout

The only cons that I can think of is that if you don't forward the onClick prop from HOC, it won't work (and no warning/error will be thrown)...

Just to be sure of my idea, I started a POC (proof of concept) on my fork along with updates on SDK concerns (I also think the SDK should handle more than just loading the provider SDK, it should also export other functions that are common to all SDKs).

@deepakaggarwal7: For now, only FB is working because that's the only provider I updated yet. I don't want to code anything else without your consent before.

Could you take a look at my branch and tell me your thoughts about this idea then? It would be great 😃

Cheers!

index_bundle.js:112752 Fetching user
handleSocialLoginFailure @ index_bundle.js:112752
value @ index_bundle.js:58460
boundFunc @ index_bundle.js:55014
ReactErrorUtils.invokeGuardedCallback @ index_bundle.js:55020
executeDispatch @ index_bundle.js:45626
executeDispatchesInOrder @ index_bundle.js:45649
executeDispatchesAndRelease @ index_bundle.js:38372
executeDispatchesAndReleaseTopLevel @ index_bundle.js:38383
forEachAccumulated @ index_bundle.js:90395
processEventQueue @ index_bundle.js:38583
runEventQueueInBatch @ index_bundle.js:195383
handleTopLevel @ index_bundle.js:195393
handleTopLevelImpl @ index_bundle.js:195473
perform @ index_bundle.js:46316
batchedUpdates @ index_bundle.js:195245
batchedUpdates @ index_bundle.js:26325
dispatchEvent @ index_bundle.js:195548

Everything was working fine. suddenly stopped working when I reinstalled the node modules.

Can close this, decided to use something different than this component.

I think it should be up to the user of the package to log information. It looks unprofessional if you are constantly logging stuff that the plain user's eye shouldn't see or have use of.
At your index file, line 111, "console.log(res)" should be removed.

I see Facebook and LinkedIn, also Google - but was it deprecated?

Seems like a nice project, a bit of a documentation cleanup would do it well!