{"_id":"@1nd/react-social-login","_rev":"1-be5659afef81ab1a2bb8af2a3aaa4fb5","name":"@1nd/react-social-login","dist-tags":{"latest":"4.0.0"},"versions":{"4.0.0":{"name":"@1nd/react-social-login","version":"4.0.0","description":"React Component for Login via Social Providers","main":"dist/social-login.js","engines":{"node":">=6.9.4"},"scripts":{"lint":"eslint src","test":"echo \"Error: no test specified\" && exit 1","build":"npm run lint && webpack","build:demo":"npm run lint && cd demo && webpack && cd ..","start":"bnr start","start:insecure":"bnr start:insecure","start:old":"cd demo.old && webpack-dev-server --progress --colors && cd ..","deploy":"bash \"deploy.sh\""},"betterScripts":{"start":{"command":"cd demo && webpack-dev-server --https --progress --colors && cd ..","env":{"NODE_ENV":"development","FB_APP_ID":"309479849514684","INSTAGRAM_REDIRECT":"https://localhost:8080"}},"start:insecure":{"command":"cd demo && webpack-dev-server --progress --colors && cd ..","env":{"NODE_ENV":"development","FB_APP_ID":"309479849514684","INSTAGRAM_REDIRECT":"https://localhost:8080"}}},"pre-commit":["lint"],"repository":{"type":"git","url":"git+https://github.com/deepakaggarwal7/react-social-login.git"},"keywords":["social","oauth"],"author":{"name":"Deepak Aggarwal","email":"deepakaggarwal7@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/deepakaggarwal7/react-social-login/issues"},"homepage":"https://github.com/deepakaggarwal7/react-social-login#readme","dependencies":{"bluebird":"^3.5.1","fetch-jsonp":"1.1.3","uuid":"3.1.0"},"devDependencies":{"babel-cli":"6.26.0","babel-core":"^6.0.0","babel-eslint":"8.0.2","babel-loader":"7.1.2","babel-plugin-transform-class-properties":"6.24.1","babel-plugin-transform-inline-environment-variables":"0.2.0","babel-plugin-transform-object-rest-spread":"6.26.0","babel-preset-env":"1.6.1","babel-preset-react":"6.24.1","better-npm-run":"0.1.0","eslint":"4.11.0","eslint-config-standard":"10.2.1","eslint-config-standard-jsx":"4.0.2","eslint-plugin-import":"2.8.0","eslint-plugin-node":"5.2.1","eslint-plugin-promise":"3.6.0","eslint-plugin-react":"7.4.0","eslint-plugin-standard":"3.0.1","html-webpack-plugin":"2.30.1","pre-commit":"1.2.2","react":"16.8.6","react-dom":"16.8.6","webpack":"3.8.1","webpack-dev-server":"2.9.4"},"peerDependencies":{"react":"^16.1.0","react-dom":"^16.1.0"},"gitHead":"bdadffccf1eba702d8769bb097184fe646239ff2","_id":"@1nd/react-social-login@4.0.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"1nd","email":"pradhana.indra@gmail.com"},"dist":{"integrity":"sha512-b67B6f8tDos1gsQNgEaqRduwJw+ReqN4Mochb7/vVGqAlnHds/LsV661zy2A+wqc1BT2rGllD1l+eZymTEwRVA==","shasum":"79eebc78112ae40b5cba361c5d510cf8717bbafc","tarball":"https://registry.npmjs.org/@1nd/react-social-login/-/react-social-login-4.0.0.tgz","fileCount":5,"unpackedSize":133277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7QPpCRA9TVsSAnZWagAAq0gP/01qQ/kRsRAzI67cpWw1\n+nO6N+eqBnKBHxx+acCSUaNj7irvj085ZIkaRXK0iZrPSVl8ymPjZlGNiHrG\ngyL9/YfgDRwnAp/VFBdcvIGu0raJfI2ax7imNfOMOw6v9umpyfApiSF0Uexj\nOnzBi1q2bz9kHt3cD/QFg/wtmyiMaLjv6ZYXZ0b0PyS/BZec7VVnuyTCJDAE\n2QNrGy9uaZNVYyTzmzHW3rioNiSGCB15Ex0p4yPLVbGhvCiOzyZJLsdLRa0d\n4bzJ12d+hpZBVKLHh3GexHLwS3UTj/IdYK2dlep+N28vR3g5A6UEEgNsx+IS\nJ/tVExbY84mJBzaajl8TEe3/EMofCnHCI/KzHtFeXCkUpKnW9ii591r+T4n/\nI1Q4n54VsEogK8GUoB8sxl1Eyy0qAXhLx8XLr0MqAUGjWUGWNyIgZAO8DPHm\ntDL/ZmjMiqAbG+fFkuw2C2/DYVnUnRcXtT/7WPBT2jKr2ohleQo6jrN7hwEE\n1k3FDMhs7ALnVCf5BAHWSgVSEHDt8NIXf5sGVGd2mEc6icvZ+PZddfiX8C8O\n46VrlrT9f+x01o2DKZMTmDLxsDz79/fmQJGpUtAPYMT9Di0EcyJI5yLQZEJ4\nY9m7vTX5q2sMUbRpNopwpWZetCy52HxB6e74dQbUDsTEh+76Yex40i9GE2oL\nBrIh\r\n=iG3k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpRbDJb/bMA9MGWl1k6RADNECjrOXjgcMXcl8R/Gr+DwIgaKp6V6V/vhGLtHe8fIxiy55/+E2xP8C2sontly+AEeg="}]},"maintainers":[{"name":"1nd","email":"pradhana.indra@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-social-login_4.0.0_1559036905121_0.25890099088131646"},"_hasShrinkwrap":false}},"time":{"created":"2019-05-28T09:48:25.091Z","4.0.0":"2019-05-28T09:48:25.289Z","modified":"2022-04-04T10:33:50.771Z"},"maintainers":[{"name":"1nd","email":"pradhana.indra@gmail.com"}],"description":"React Component for Login via Social Providers","homepage":"https://github.com/deepakaggarwal7/react-social-login#readme","keywords":["social","oauth"],"repository":{"type":"git","url":"git+https://github.com/deepakaggarwal7/react-social-login.git"},"author":{"name":"Deepak Aggarwal","email":"deepakaggarwal7@gmail.com"},"bugs":{"url":"https://github.com/deepakaggarwal7/react-social-login/issues"},"license":"MIT","readme":"[npm:img]: https://img.shields.io/npm/v/react-social-login.svg?style=flat-square\n[npm:url]: https://www.npmjs.org/package/react-social-login\n\n[standard:img]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\n[standard:url]: http://standardjs.com\n\n[dependencies:img]: https://david-dm.org/deepakaggarwal7/react-social-login.svg?style=flat-square\n[dependencies:url]: https://github.com/deepakaggarwal7/react-social-login/blob/master/package.json#L33\n\n[license:img]: https://img.shields.io/badge/License-MIT-brightgreen.svg?style=flat-square\n[license:url]: https://opensource.org/licenses/MIT\n\n# React Social Login &middot; [![NPM version][npm:img]][npm:url] &middot; [![Standard - JavaScript Style Guide][standard:img]][standard:url] &middot; [![Dependencies][dependencies:img]][dependencies:url] &middot; [![License: MIT][license:img]][license:url]\n\nReact Social Login is an HOC which provides social login through multiple providers.\n\n**Currently supports Amazon, Facebook, GitHub, Google, Instagram and LinkedIn as providers (more to come!)**\n\n##### We aren't using Google+ Api. Library will work fine even after Google+ deprecation.\n\n## Motivation\n\n * Having a component that doesn't dictates the HTML\n * All-in-One login component for different social providers\n * Takes care of warnings from provider's SDKs when multiple instances are placed\n * Kind of re-birth of my previous .Net driven similar open source - SocialAuth.NET\n\n## Scopes\n\nWhile this library does a good job of fetching basic profile, at times you might need to get additional attributes from providers like DateOfBirth, HomeTowm, etc. which aren't returned by default. Scopes are purely provider dependent and their documentation is the best place to look for supported scopes and literal to be passed as argument. You can pass those scopes using the scope tag. For example, if you want birth date from Facebook (which isn't returned by default), you'd add following scope to your tag:\n```js\n scope='user_birthday,user_hometown'\n ```\n Below are some links to official scopes guide for a few providers:\n  * [FACEBOOK](https://developers.facebook.com/docs/facebook-login/permissions/)\n  * [GOOGLE](https://developers.google.com/identity/protocols/googlescopes)\n\n\n## Online demo\n\nSee [https://deepakaggarwal7.github.io/react-social-login](https://deepakaggarwal7.github.io/react-social-login).\n\n## Demo\n\nEdit `appId` props with your own ones in `demo/index.js` file and build demo:\n\n```shell\n$ npm start\n```\n\nYou can then view the demo at [https://localhost:8080][demo].\n\nFor GitHub provider, see [GitHub specifics][githubspecifics] first.\n\n## Install\n\n```shell\n$ npm install --save react-social-login\n```\n\n## Usage\n\nCreate the component of your choice and transform it into a SocialLogin component.\n\n**SocialButton.js**\n\n```js\nimport React from 'react'\nimport SocialLogin from 'react-social-login'\n\nconst Button = ({ children, triggerLogin, ...props }) => (\n  <button onClick={triggerLogin} {...props}>\n    { children }\n  </button>\n)\n\nexport default SocialLogin(Button)\n```\n\nThen, use it like a normal component.\n\n**index.js**\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nimport SocialButton from './SocialButton'\n\nconst handleSocialLogin = (user) => {\n  console.log(user)\n}\n\nconst handleSocialLoginFailure = (err) => {\n  console.error(err)\n}\n\nReactDOM.render(\n  <div>\n    <SocialButton\n      provider='facebook'\n      appId='YOUR_APP_ID'\n      onLoginSuccess={handleSocialLogin}\n      onLoginFailure={handleSocialLoginFailure}\n    >\n      Login with Facebook\n    </SocialButton>\n  </div>,\n  document.getElementById('app')\n)\n```\n\n### Reference\n\nRaw component props (before transform):\n\n| Prop  | Default  | Type / Values  | Description  |\n|---|---|---|---|\n| appId  | —  | string  | Your app identifier (see [find my appId][findmyappid])  |\n| autoCleanUri  | false  | boolean  | Enable auto URI cleaning with OAuth callbacks  |\n| autoLogin  | false  | boolean  | Enable auto login on `componentDidMount`  |\n| gatekeeper  | —  | string  | Gatekeeper URL to use for GitHub OAuth support (see [GitHub specifics][githubspecifics])  |\n| getInstance  | —  | function  | Return node ref like `ref` function would normally do ([react known issue](https://github.com/facebook/react/issues/4213))  |\n| onLoginFailure  | —  | function  | Callback on login fail  |\n| onLoginSuccess  | —  | function  | Callback on login success  |\n| onLogoutFailure  | —  | function  | Callback on logout fail (`google` only)  |\n| onLogoutSuccess  | —  | function  | Callback on logout success  |\n| provider  | —  | `amazon`, `facebook`, `github`, `google`, `instagram`, `linkedin`  | Social provider to use  |\n| redirect  | -  | string  | URL to redirect after login (available for `github` and `instagram` only)  |\n| scope  | -  | array, string  | An array or string of scopes to be granted on login.  |\n| any other prop  | —  | —  | Any other prop will be forwarded to your component  |\n\n*Note about `redirect`: if you are redirecting on root (eg: https://localhost:8080), you **have** to omit the trailing slash.*\n\nTransformed component props:\n\n| Prop  | Type  | Description  |\n|---|---|---|\n| triggerLogin  | function  | Function to trigger login process, usually attached to an event listener  |\n| triggerLogout  | function  | Function to trigger logout process, usually attached to a container handling login state  |\n| all your props  | —  | All props from your original component, minus SocialLogin specific props  |\n\n### Logout\n\nTo implement logout, we need a container handling login state and triggering logout function from a `ref` to `SocialLogin` component.\n\nAs it is implemented in the demo, we have two components working together to trigger logout:\n\n * [`Demo` container][democontainer]\n * [`UserCard` component][usercardcomponent]\n \nHere is how they work together:\n\n 1. [`Demo` is displaying `UserCard` only if user is logged][logoutstep1]\n 2. [`UserCard` gets forwarded a `logout` function][logoutstep2]\n 3. [`UserCard` calls forwarded `logout` prop on click on the logout button][logoutstep3]\n 4. [`logout` function triggers `triggerLogout` prop from a ref to SocialLogin component][logoutstep4]\n\n### Old component support\n\nWe decided to keep the old behavior as a fallback, it only supports `facebook`, `google` and `linkedin` providers and is available as a named export:\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { OldSocialLogin as SocialLogin } from 'react-social-login'\n\nconst handleSocialLogin = (user, err) => {\n  console.log(user)\n  console.log(err)\n}\n\nReactDOM.render(\n  <div>\n    <SocialLogin\n      provider='facebook'\n      appId='YOUR_APP_ID'\n      callback={handleSocialLogin}\n    >\n      <button>Login with Google</button>\n    </SocialLogin>\n  </div>,\n  document.getElementById('app')\n)\n```\n\n## Build\n\nThough not mandatory, it is recommended to use latest npm5 to match lockfile versions.\n\n```shell\n$ npm install\n$ npm run build\n```\n\n## Miscellaneous\n\n### Find my appId\n\n#### Amazon\n\nSee [Amazon developers documentation][amazondoc].\n\n#### Facebook\n\nSee [facebook for developers documentation][fb4devdoc].\n\n#### GitHub (see [GitHub specifics][githubspecifics])\n\n* Basic authentication method using personal access tokens: see [GitHub Help][githubhelp].\n* OAuth authentication: see [GitHub Developer guide][githubdoc].\n\n#### Google\n\nSee [Google Sign-In for Websites guide][gsignindoc].\n\n#### Instagram\n\nSee [Instagram developers documentation][instadoc].\n\n#### LinkedIn\n\nSee `Where can I find my API key?` section on the [FAQ][linkedinfaq].\n\n### GitHub specifics\n\nGitHub provider is implemented in two different modes:\n\n* One using [GitHub Personal Tokens][ghpersonaltokens]\n* Another using GitHub OAuth\n\n#### GitHub Personal Tokens mode\n\nActually, this one is more a hacky way to get user profile than a way to really *connect* your app like OAuth does.\n\nPlus, it requires from users to create their personal token from their GitHub account, which is not a good experience for them.\n\nThis mode is the default if you do not provide `gatekeeper` prop and will try to use the `appId` prop to get user data. Anyway, we **strongly advise you to use the GitHub OAuth authentication flow**.\n\n#### GitHub OAuth\n\nIf you provide a `gatekeeper` prop, this mode will be active and will use a server of your own to fetch GitHub OAuth access token. This is a [know issue of GitHub][ghoauthwebflowissue].\n\nThe simplest way to setup this mode is to use the [Gatekeeper project][gatekeeper]. Just follow setup instructions then tell RSL to use it:\n\n```\n<SocialLogin\n  provider='github'\n  gatekeeper='http://localhost:9999'\n  appId='YOUR_GITHUB_CLIENT_ID'\n  redirect='http://localhost:8080'\n>\n  Login with GitHub OAuth\n</SocialLogin>\n```\n\nYou can also implement it your own way but you must use the same routing than `Gatekeeper` (`/authenticate/:code`) and return a JSON response containing a `token` or `error` property (it will also throw if it doesn't find `token`).\n\n#### Special instructions to run demo\n\nRSL demo is served over https with `webpack-dev-server`. This is a requirement of Amazon Login SDK. `Gatekeeper` is served over insecure http so you will have to serve the demo through http also to work with GitHub (but it will break Amazon):\n\n```shell\n$ npm run start:insecure\n```\n\n## Tests\n\nTBD\n\n## Main contributors\n* [Deepak Aggarwal][ghdeepak]\n* [Nicolas Goudry][ghngoudry]\n\n## Kind contributors\n* Kamran Ahmed : custom Google scopes\n* Adrien Cohen : multiple Google buttons\n* Jason Loo : full google auth response\n* Andri Janusson : LinkedIn public profile URL\n* Adrien Pascal : SSR support\n\n[demo]: https://localhost:8080\n[findmyappid]: #find-my-appid\n[fb4devdoc]: https://developers.facebook.com/docs/apps/register\n[githubhelp]: https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line\n[githubdoc]: https://developer.github.com/apps/building-integrations/setting-up-and-registering-oauth-apps/registering-oauth-apps\n[gsignindoc]: https://developers.google.com/identity/sign-in/web/devconsole-project\n[instadoc]: https://www.instagram.com/developer\n[linkedinfaq]: https://developer.linkedin.com/support/faq\n[ghpersonaltokens]: https://github.com/blog/1509-personal-api-tokens\n[ghoauthwebflowissue]: https://github.com/isaacs/github/issues/330\n[gatekeeper]: https://github.com/prose/gatekeeper\n[githubspecifics]: #github-specifics\n[amazondoc]: https://developer.amazon.com/public/apis/engage/login-with-amazon/docs/register_web.html\n[googlescopes]: https://developers.google.com/identity/protocols/googlescopes\n[ghngoudry]: https://github.com/nicolas-goudry\n[ghdeepak]: https://github.com/deepakaggarwal7\n[democontainer]: https://github.com/deepakaggarwal7/react-social-login/blob/master/demo/containers/demo.js\n[usercardcomponent]: https://github.com/deepakaggarwal7/react-social-login/blob/master/demo/components/userCard.js\n[logoutstep1]: https://github.com/deepakaggarwal7/react-social-login/blob/master/demo/containers/demo.js#L73\n[logoutstep2]: https://github.com/deepakaggarwal7/react-social-login/blob/master/demo/containers/demo.js#L62\n[logoutstep3]: https://github.com/deepakaggarwal7/react-social-login/blob/master/demo/components/userCard.js#L121\n[logoutstep4]: https://github.com/deepakaggarwal7/react-social-login/blob/master/demo/containers/demo.js#L66\n","readmeFilename":"README.md"}