deepakaggarwal7 / react-social-login Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
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
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.
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
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.
Has anyone figured out a good strategy for handling the timeout of the access token here?
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}
>
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.
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?
I'm getting SDK not loaded
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 !!
all.js:109
Uncaught TypeError: Cannot read property 'data' of undefined
at SocialLogin.handleSocialLoginInvokeSuccess (main.js:13831)
at main.js:13899
at v.__wrapper (all.js:109)
at ma (all.js:119)
at Object.w (all.js:117)
at Object.<anonymous>
Any Idea ?
Cheers
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 :)
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:
style
or className
)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!
Can you plz push the updated package.json file
If I click on the social share button and internet connection is not there, I'm unable to handle this kinda exceptions.
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?
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 ?
is there any chance for twitter integration ?
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?
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
Hi @deepakaggarwal7, thank you for open-sourcing it! It looks very promising.
I was wondering -
Thanks!
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?
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
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?
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 ๐
I had an issue but that was my mistakes.
Have been using your library, it's AWESOME ๐ฅ A humble request, can you please add Pinterest :-)
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?
Can we have a callback when a sdk is loaded?
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
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>
);
}
}
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 ?
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/
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
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!
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>
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 ?
Support to Github & AWS as providers.
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 ๐
used something different
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.
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
Can close this, decided to use something different than this component.
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?
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.
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
Closing decided to use something different than this component.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.