{"id":31027629,"url":"https://github.com/cuongdevjs/reactjs-social-login","last_synced_at":"2025-09-13T19:49:22.440Z","repository":{"id":38086366,"uuid":"321103396","full_name":"cuongdevjs/reactjs-social-login","owner":"cuongdevjs","description":"Group Hook ReactJS components for login social network ","archived":false,"fork":false,"pushed_at":"2024-07-29T06:46:05.000Z","size":85603,"stargazers_count":181,"open_issues_count":39,"forks_count":83,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-09-11T08:10:52.929Z","etag":null,"topics":["amazon","apple","apple-login","facebook","github","google","instagram","linkedin","login","microsoft","oauth","pinterest","react","reactjs","single-sign-on","social-login","social-network","sso","twitter"],"latest_commit_sha":null,"homepage":"https://react-social-login.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cuongdevjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-13T16:01:39.000Z","updated_at":"2025-08-27T12:25:38.000Z","dependencies_parsed_at":"2024-06-18T13:42:45.671Z","dependency_job_id":"91e26f5a-e6aa-422b-9045-feca033fe6d6","html_url":"https://github.com/cuongdevjs/reactjs-social-login","commit_stats":{"total_commits":60,"total_committers":7,"mean_commits":8.571428571428571,"dds":"0.15000000000000002","last_synced_commit":"03578acb5b4b39ee10d4b0231bff4cae8f693c54"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/cuongdevjs/reactjs-social-login","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuongdevjs%2Freactjs-social-login","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuongdevjs%2Freactjs-social-login/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuongdevjs%2Freactjs-social-login/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuongdevjs%2Freactjs-social-login/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cuongdevjs","download_url":"https://codeload.github.com/cuongdevjs/reactjs-social-login/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuongdevjs%2Freactjs-social-login/sbom","scorecard":{"id":312709,"data":{"date":"2025-08-11","repo":{"name":"github.com/cuongdevjs/reactjs-social-login","commit":"24b29fe5cda1316eb176ad14711cc3dc84edad5d"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":1,"reason":"Found 4/26 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":1,"reason":"0 commit(s) and 2 issue activity found in the last 90 days -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":0,"reason":"Project has not signed or included provenance with any releases.","details":["Warn: release artifact v2.6.3 not signed: https://api.github.com/repos/cuongdevjs/reactjs-social-login/releases/118833139","Warn: release artifact v2.6.2 not signed: https://api.github.com/repos/cuongdevjs/reactjs-social-login/releases/90296197","Warn: release artifact v2.6.1 not signed: https://api.github.com/repos/cuongdevjs/reactjs-social-login/releases/82181711","Warn: release artifact v2.6.0 not signed: https://api.github.com/repos/cuongdevjs/reactjs-social-login/releases/81567275","Warn: release artifact v2.5.5 not signed: https://api.github.com/repos/cuongdevjs/reactjs-social-login/releases/74371146","Warn: release artifact v2.6.3 does not have provenance: https://api.github.com/repos/cuongdevjs/reactjs-social-login/releases/118833139","Warn: release artifact v2.6.2 does not have provenance: https://api.github.com/repos/cuongdevjs/reactjs-social-login/releases/90296197","Warn: release artifact v2.6.1 does not have provenance: https://api.github.com/repos/cuongdevjs/reactjs-social-login/releases/82181711","Warn: release artifact v2.6.0 does not have provenance: https://api.github.com/repos/cuongdevjs/reactjs-social-login/releases/81567275","Warn: release artifact v2.5.5 does not have provenance: https://api.github.com/repos/cuongdevjs/reactjs-social-login/releases/74371146"],"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 8 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"93 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-xwcq-pm8m-c4vf","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-r6rj-9ch6-g264","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442","Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc","Warn: Project is vulnerable to: GHSA-rqff-837h-mm52","Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2","Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j","Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-17T23:28:13.736Z","repository_id":38086366,"created_at":"2025-08-17T23:28:13.736Z","updated_at":"2025-08-17T23:28:13.736Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274771522,"owners_count":25346427,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-12T02:00:09.324Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["amazon","apple","apple-login","facebook","github","google","instagram","linkedin","login","microsoft","oauth","pinterest","react","reactjs","single-sign-on","social-login","social-network","sso","twitter"],"created_at":"2025-09-13T19:49:17.609Z","updated_at":"2025-09-13T19:49:22.415Z","avatar_url":"https://github.com/cuongdevjs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# reactjs-social-login\n\n\u003e Group social login for ReactJS\n\u003e\n\u003e 1. Facebook\n\u003e 2. Google\n\u003e 3. Linkedin\n\u003e 4. Github\n\u003e 5. Microsoft\n\u003e 6. Amazon\n\u003e 7. Instagram\n\u003e 8. Pinterest\n\u003e 9. Twitter\n\u003e 10. Apple\n\u003e 11. Tiktok\n\nThis repository is all in one, includes multiple platform for social login, is written by TypeScript and React Hooks, tree-shakeable, zero dependencies, extremely lightweight.\nYou can customize any style UI as you like.\n\nReactjs Social Login is an HOC which provides social login through multiple providers.\n\n## **Currently supports Amazon, Facebook, GitHub, Google, Instagram, Linkedin, Pinterest, Twitter, Microsoft, Apple, Tiktok as providers (more to come!)**\n\n[![npm download](https://img.shields.io/npm/dm/reactjs-social-login.svg?style=flat)](https://www.npmjs.com/package/reactjs-social-login)\n[![npm bundle zip](https://img.shields.io/bundlephobia/minzip/reactjs-social-login?style=flat)](https://www.npmjs.com/package/reactjs-social-login)\n[![node version](https://img.shields.io/badge/node.js-%3E=_6-green.svg?style=flat)](http://nodejs.org/download/)\n[![NPM](https://img.shields.io/npm/v/reactjs-social-login.svg)](https://www.npmjs.com/package/reactjs-social-login)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n![img-description](./screenshot.png)\n\u003c!-- ![img-description](./gif.gif) --\u003e\n\n## Install\n\n```bash\nnpm install --save reactjs-social-login\n```\n\n\u003cbr/\u003e\n\n## Demo\n\n[Online Demo](https://react-social-login.netlify.app)\n\n\u003cbr/\u003e\n\n## Example code\n\n[Code Demo](https://github.com/cuongdevjs/reactjs-social-login/blob/master/example/src/App.tsx)\n\n\u003cbr /\u003e\n\n## Contribute / Testing\n\nClone project, open terminal and type these commands\n\n```bash\nnpm install\n```\n\n```bash\nnpm run start\n```\n\nthen go to directory /example, add .env.development by following format\n\n````bash\nNODE_ENV=development\nREACT_APP_FB_APP_ID=\nREACT_APP_GG_APP_ID=\nREACT_APP_AMAZON_APP_ID=\nREACT_APP_INSTAGRAM_APP_ID=\nREACT_APP_INSTAGRAM_APP_SECRET=\nREACT_APP_MICROSOFT_APP_ID=\nREACT_APP_LINKEDIN_APP_SECRET=\nREACT_APP_LINKEDIN_APP_ID=\nREACT_APP_GITHUB_APP_ID=\nREACT_APP_GITHUB_APP_SECRET=\nREACT_APP_PINTEREST_APP_ID=\nREACT_APP_PINTEREST_APP_SECRET=\nREACT_APP_TWITTER_APP_ID=\nREACT_APP_TWITTER_V2_APP_KEY=\nREACT_APP_TWITTER_V2_APP_SECRET=\nREACT_APP_APPLE_ID=\nREACT_APP_TIKTOK_CLIENT_KEY=\n````\n\nand on directory /example, then open another terminal, type these commands\n\n```shell\nnpm run start\n```\n\nYou can then view the demo at \u003chttps://localhost:3000\u003e.\n\n\u003cbr/\u003e\n\n## How to use\n\n\u003cdetails\u003e\n \u003csummary\u003eTypescript Version\u003c/summary\u003e\n\n ````tsx\n import React, { useCallback, useState } from 'react'\n import './app.css'\n import { User } from './User' // component display user (see detail on /example directory)\n import {\n LoginSocialGoogle,\n LoginSocialAmazon,\n LoginSocialFacebook,\n LoginSocialGithub,\n LoginSocialInstagram,\n LoginSocialLinkedin,\n LoginSocialMicrosoft,\n LoginSocialPinterest,\n LoginSocialTwitter,\n LoginSocialApple,\n LoginSocialTiktok,\n IResolveParams,\n } from 'reactjs-social-login'\n\n // CUSTOMIZE ANY UI BUTTON\n import {\n FacebookLoginButton,\n GoogleLoginButton,\n GithubLoginButton,\n AmazonLoginButton,\n InstagramLoginButton,\n LinkedInLoginButton,\n MicrosoftLoginButton,\n TwitterLoginButton,\n AppleLoginButton,\n } from 'react-social-login-buttons'\n\n import { ReactComponent as PinterestLogo } from './assets/pinterest.svg'\n import { ReactComponent as TiktokLogo } from './assets/tiktok.svg'\n\n // REDIRECT URL must be same with URL where the (reactjs-social-login) components is locate\n // MAKE SURE the (reactjs-social-login) components aren't unmounted or destroyed before the ask permission dialog closes\n const REDIRECT_URI = window.location.href;\n\n const App = () =\u003e {\n const [provider, setProvider] = useState('')\n const [profile, setProfile] = useState\u003cany\u003e()\n\n const onLoginStart = useCallback(() =\u003e {\n alert('login start')\n }, [])\n\n const onLogoutSuccess = useCallback(() =\u003e {\n setProfile(null)\n setProvider('')\n alert('logout success')\n }, [])\n\n return (\n \u003c\u003e\n {provider \u0026\u0026 profile ? (\n \u003cUser provider={provider} profile={profile} onLogout={onLogoutSuccess} /\u003e\n ) : (\n \u003cdiv className={`App ${provider \u0026\u0026 profile ? 'hide' : ''}`}\u003e\n \u003ch1 className='title'\u003eReactJS Social Login\u003c/h1\u003e\n \u003cLoginSocialFacebook\n isOnlyGetToken\n appId={process.env.REACT_APP_FB_APP_ID || ''}\n onLoginStart={onLoginStart}\n onResolve={({ provider, data }: IResolveParams) =\u003e {\n setProvider(provider)\n setProfile(data)\n }}\n onReject={(err) =\u003e {\n console.log(err)\n }}\n \u003e\n \u003cFacebookLoginButton /\u003e\n \u003c/LoginSocialFacebook\u003e\n\n \u003cLoginSocialGoogle\n isOnlyGetToken\n client_id={process.env.REACT_APP_GG_APP_ID || ''}\n onLoginStart={onLoginStart}\n onResolve={({ provider, data }: IResolveParams) =\u003e {\n setProvider(provider)\n setProfile(data)\n }}\n onReject={(err) =\u003e {\n console.log(err)\n }}\n \u003e\n \u003cGoogleLoginButton /\u003e\n \u003c/LoginSocialGoogle\u003e\n\n \u003cLoginSocialApple\n client_id={process.env.REACT_APP_APPLE_ID || ''}\n scope={'name email'}\n redirect_uri={REDIRECT_URI}\n onLoginStart={onLoginStart}\n onResolve={({ provider, data }: IResolveParams) =\u003e {\n setProvider(provider);\n setProfile(data);\n }}\n onReject={err =\u003e {\n console.log(err);\n }}\n \u003e\n \u003cAppleLoginButton /\u003e\n \u003c/LoginSocialApple\u003e\n\n \u003cLoginSocialAmazon\n isOnlyGetToken\n client_id={process.env.REACT_APP_AMAZON_APP_ID || ''}\n redirect_uri={REDIRECT_URI}\n onResolve={({ provider, data }: IResolveParams) =\u003e {\n setProvider(provider)\n setProfile(data)\n }}\n onReject={(err: any) =\u003e {\n console.log(err)\n }}\n onLoginStart={onLoginStart}\n \u003e\n \u003cAmazonLoginButton /\u003e\n \u003c/LoginSocialAmazon\u003e\n\n \u003cLoginSocialInstagram\n isOnlyGetToken\n client_id={process.env.REACT_APP_INSTAGRAM_APP_ID || ''}\n client_secret={process.env.REACT_APP_INSTAGRAM_APP_SECRET || ''}\n redirect_uri={REDIRECT_URI}\n onLoginStart={onLoginStart}\n onResolve={({ provider, data }: IResolveParams) =\u003e {\n setProvider(provider)\n setProfile(data)\n }}\n onReject={(err: any) =\u003e {\n console.log(err)\n }}\n \u003e\n \u003cInstagramLoginButton /\u003e\n \u003c/LoginSocialInstagram\u003e\n\n \u003cLoginSocialMicrosoft\n isOnlyGetToken\n client_id={process.env.REACT_APP_MICROSOFT_APP_ID || ''}\n redirect_uri={REDIRECT_URI}\n onLoginStart={onLoginStart}\n onResolve={({ provider, data }: IResolveParams) =\u003e {\n setProvider(provider)\n setProfile(data)\n }}\n onReject={(err: any) =\u003e {\n console.log(err)\n }}\n \u003e\n \u003cMicrosoftLoginButton /\u003e\n \u003c/LoginSocialMicrosoft\u003e\n\n \u003cLoginSocialLinkedin\n isOnlyGetToken\n client_id={process.env.REACT_APP_LINKEDIN_APP_ID || ''}\n client_secret={process.env.REACT_APP_LINKEDIN_APP_SECRET || ''}\n redirect_uri={REDIRECT_URI}\n onLoginStart={onLoginStart}\n onResolve={({ provider, data }: IResolveParams) =\u003e {\n setProvider(provider)\n setProfile(data)\n }}\n onReject={(err: any) =\u003e {\n console.log(err)\n }}\n \u003e\n \u003cLinkedInLoginButton /\u003e\n \u003c/LoginSocialLinkedin\u003e\n\n \u003cLoginSocialGithub\n isOnlyGetToken\n client_id={process.env.REACT_APP_GITHUB_APP_ID || ''}\n client_secret={process.env.REACT_APP_GITHUB_APP_SECRET || ''}\n redirect_uri={REDIRECT_URI}\n onLoginStart={onLoginStart}\n onResolve={({ provider, data }: IResolveParams) =\u003e {\n setProvider(provider)\n setProfile(data)\n }}\n onReject={(err: any) =\u003e {\n console.log(err)\n }}\n \u003e\n \u003cGithubLoginButton /\u003e\n \u003c/LoginSocialGithub\u003e\n \u003cLoginSocialPinterest\n isOnlyGetToken\n client_id={process.env.REACT_APP_PINTEREST_APP_ID || ''}\n client_secret={process.env.REACT_APP_PINTEREST_APP_SECRET || ''}\n redirect_uri={REDIRECT_URI}\n onLoginStart={onLoginStart}\n onResolve={({ provider, data }: IResolveParams) =\u003e {\n setProvider(provider)\n setProfile(data)\n }}\n onReject={(err: any) =\u003e {\n console.log(err)\n }}\n className='pinterest-btn'\n \u003e\n \u003cdiv className='content'\u003e\n \u003cdiv className='icon'\u003e\n \u003cPinterestLogo /\u003e\n \u003c/div\u003e\n \u003cspan className='txt'\u003eLogin With Pinterest\u003c/span\u003e\n \u003c/div\u003e\n \u003c/LoginSocialPinterest\u003e\n\n \u003cLoginSocialTwitter\n isOnlyGetToken\n client_id={process.env.REACT_APP_TWITTER_V2_APP_KEY || ''}\n redirect_uri={REDIRECT_URI}\n onLoginStart={onLoginStart}\n onResolve={({ provider, data }: IResolveParams) =\u003e {\n setProvider(provider)\n setProfile(data)\n }}\n onReject={(err: any) =\u003e {\n console.log(err)\n }}\n \u003e\n \u003cTwitterLoginButton /\u003e\n \u003c/LoginSocialTwitter\u003e\n\n \u003cLoginSocialTiktok\n client_key={process.env.REACT_APP_TIKTOK_CLIENT_KEY}\n redirect_uri={REDIRECT_URI}\n onLoginStart={onLoginStart}\n onResolve={({ provider, data }) =\u003e {\n setProvider(provider);\n setProfile(data);\n }}\n onReject={(err) =\u003e {\n console.log(err);\n }}\n className=\"pinterest-btn\"\n \u003e\n \u003cdiv className=\"content\"\u003e\n \u003cdiv className=\"icon\"\u003e\n \u003cTiktokLogo /\u003e\n \u003c/div\u003e\n \u003cspan className=\"txt\"\u003eLogin With Tiktok\u003c/span\u003e\n \u003c/div\u003e\n \u003c/LoginSocialTiktok\u003e\n \u003c/div\u003e\n )}\n \u003c/\u003e\n )\n }\n\n export default App\n ````\n\u003c/details\u003e\n\n\u003cbr /\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003eJavaScript Version\u003c/summary\u003e\n\n ````jsx\n import React, { useCallback, useState } from 'react'\n import './app.css'\n import { User } from './User' // component display user (see detail on /example directory)\n import {\n LoginSocialGoogle,\n LoginSocialAmazon,\n LoginSocialFacebook,\n LoginSocialGithub,\n LoginSocialInstagram,\n LoginSocialLinkedin,\n LoginSocialMicrosoft,\n LoginSocialPinterest,\n LoginSocialTwitter,\n LoginSocialApple,\n LoginSocialTiktok,\n } from 'reactjs-social-login'\n\n // CUSTOMIZE ANY UI BUTTON\n import {\n FacebookLoginButton,\n GoogleLoginButton,\n GithubLoginButton,\n AmazonLoginButton,\n InstagramLoginButton,\n LinkedInLoginButton,\n MicrosoftLoginButton,\n TwitterLoginButton,\n AppleLoginButton,\n } from 'react-social-login-buttons'\n\n import { ReactComponent as PinterestLogo } from './assets/pinterest.svg'\n import { ReactComponent as TiktokLogo } from './assets/tiktok.svg'\n\n // REDIRECT URL must be same with URL where the (reactjs-social-login) components is locate\n // MAKE SURE the (reactjs-social-login) components aren't unmounted or destroyed before the ask permission dialog closes\n const REDIRECT_URI = window.location.href;\n\n const App = () =\u003e {\n const [provider, setProvider] = useState('')\n const [profile, setProfile] = useState(null)\n\n const onLoginStart = useCallback(() =\u003e {\n alert('login start')\n }, [])\n\n const onLogoutSuccess = useCallback(() =\u003e {\n setProfile(null)\n setProvider('')\n alert('logout success')\n }, [])\n\n return (\n \u003c\u003e\n {provider \u0026\u0026 profile ? (\n \u003cUser provider={provider} profile={profile} onLogout={onLogoutSuccess} /\u003e\n ) : (\n \u003cdiv className={`App ${provider \u0026\u0026 profile ? 'hide' : ''}`}\u003e\n \u003ch1 className='title'\u003eReactJS Social Login\u003c/h1\u003e\n \u003cLoginSocialFacebook\n isOnlyGetToken\n appId={process.env.REACT_APP_FB_APP_ID || ''}\n onLoginStart={onLoginStart}\n onResolve={({ provider, data }) =\u003e {\n setProvider(provider)\n setProfile(data)\n }}\n onReject={(err) =\u003e {\n console.log(err)\n }}\n \u003e\n \u003cFacebookLoginButton /\u003e\n \u003c/LoginSocialFacebook\u003e\n\n \u003cLoginSocialGoogle\n isOnlyGetToken\n client_id={process.env.REACT_APP_GG_APP_ID || ''}\n onLoginStart={onLoginStart}\n onResolve={({ provider, data }) =\u003e {\n setProvider(provider)\n setProfile(data)\n }}\n onReject={(err) =\u003e {\n console.log(err)\n }}\n \u003e\n \u003cGoogleLoginButton /\u003e\n \u003c/LoginSocialGoogle\u003e\n\n \u003cLoginSocialApple\n client_id={process.env.REACT_APP_APPLE_ID || ''}\n scope={'name email'}\n redirect_uri={REDIRECT_URI}\n onLoginStart={onLoginStart}\n onResolve={({ provider, data }) =\u003e {\n setProvider(provider);\n setProfile(data);\n }}\n onReject={err =\u003e {\n console.log(err);\n }}\n \u003e\n \u003cAppleLoginButton /\u003e\n \u003c/LoginSocialApple\u003e\n\n \u003cLoginSocialAmazon\n isOnlyGetToken\n client_id={process.env.REACT_APP_AMAZON_APP_ID || ''}\n redirect_uri={REDIRECT_URI}\n onResolve={({ provider, data }) =\u003e {\n setProvider(provider)\n setProfile(data)\n }}\n onReject={(err) =\u003e {\n console.log(err)\n }}\n onLoginStart={onLoginStart}\n \u003e\n \u003cAmazonLoginButton /\u003e\n \u003c/LoginSocialAmazon\u003e\n\n \u003cLoginSocialInstagram\n isOnlyGetToken\n client_id={process.env.REACT_APP_INSTAGRAM_APP_ID || ''}\n client_secret={process.env.REACT_APP_INSTAGRAM_APP_SECRET || ''}\n redirect_uri={REDIRECT_URI}\n onLoginStart={onLoginStart}\n onResolve={({ provider, data }) =\u003e {\n setProvider(provider)\n setProfile(data)\n }}\n onReject={(err) =\u003e {\n console.log(err)\n }}\n \u003e\n \u003cInstagramLoginButton /\u003e\n \u003c/LoginSocialInstagram\u003e\n\n \u003cLoginSocialMicrosoft\n isOnlyGetToken\n client_id={process.env.REACT_APP_MICROSOFT_APP_ID || ''}\n redirect_uri={REDIRECT_URI}\n onLoginStart={onLoginStart}\n onResolve={({ provider, data }) =\u003e {\n setProvider(provider)\n setProfile(data)\n }}\n onReject={(err) =\u003e {\n console.log(err)\n }}\n \u003e\n \u003cMicrosoftLoginButton /\u003e\n \u003c/LoginSocialMicrosoft\u003e\n\n \u003cLoginSocialLinkedin\n isOnlyGetToken\n client_id={process.env.REACT_APP_LINKEDIN_APP_ID || ''}\n client_secret={process.env.REACT_APP_LINKEDIN_APP_SECRET || ''}\n redirect_uri={REDIRECT_URI}\n onLoginStart={onLoginStart}\n onResolve={({ provider, data }) =\u003e {\n setProvider(provider)\n setProfile(data)\n }}\n onReject={(err) =\u003e {\n console.log(err)\n }}\n \u003e\n \u003cLinkedInLoginButton /\u003e\n \u003c/LoginSocialLinkedin\u003e\n\n \u003cLoginSocialGithub\n isOnlyGetToken\n client_id={process.env.REACT_APP_GITHUB_APP_ID || ''}\n client_secret={process.env.REACT_APP_GITHUB_APP_SECRET || ''}\n redirect_uri={REDIRECT_URI}\n onLoginStart={onLoginStart}\n onResolve={({ provider, data }) =\u003e {\n setProvider(provider)\n setProfile(data)\n }}\n onReject={(err) =\u003e {\n console.log(err)\n }}\n \u003e\n \u003cGithubLoginButton /\u003e\n \u003c/LoginSocialGithub\u003e\n\n \u003cLoginSocialPinterest\n isOnlyGetToken\n client_id={process.env.REACT_APP_PINTEREST_APP_ID || ''}\n client_secret={process.env.REACT_APP_PINTEREST_APP_SECRET || ''}\n redirect_uri={REDIRECT_URI}\n onLoginStart={onLoginStart}\n onResolve={({ provider, data }) =\u003e {\n setProvider(provider)\n setProfile(data)\n }}\n onReject={(err) =\u003e {\n console.log(err)\n }}\n className='pinterest-btn'\n \u003e\n \u003cdiv className='content'\u003e\n \u003cdiv className='icon'\u003e\n \u003cPinterestLogo /\u003e\n \u003c/div\u003e\n \u003cspan className='txt'\u003eLogin With Pinterest\u003c/span\u003e\n \u003c/div\u003e\n \u003c/LoginSocialPinterest\u003e\n\n \u003cLoginSocialTwitter\n isOnlyGetToken\n client_id={process.env.REACT_APP_TWITTER_V2_APP_KEY || ''}\n redirect_uri={REDIRECT_URI}\n onLoginStart={onLoginStart}\n onResolve={({ provider, data }) =\u003e {\n setProvider(provider)\n setProfile(data)\n }}\n onReject={(err) =\u003e {\n console.log(err)\n }}\n \u003e\n \u003cTwitterLoginButton /\u003e\n \u003c/LoginSocialTwitter\u003e\n\n \u003cLoginSocialTiktok\n client_key={process.env.REACT_APP_TIKTOK_CLIENT_KEY}\n redirect_uri={REDIRECT_URI}\n onLoginStart={onLoginStart}\n onResolve={({ provider, data }) =\u003e {\n setProvider(provider);\n setProfile(data);\n }}\n onReject={(err) =\u003e {\n console.log(err);\n }}\n className=\"pinterest-btn\"\n \u003e\n \u003cdiv className=\"content\"\u003e\n \u003cdiv className=\"icon\"\u003e\n \u003cTiktokLogo /\u003e\n \u003c/div\u003e\n \u003cspan className=\"txt\"\u003eLogin With Tiktok\u003c/span\u003e\n \u003c/div\u003e\n \u003c/LoginSocialTiktok\u003e\n \u003c/div\u003e\n )}\n \u003c/\u003e\n )\n }\n\n export default App\n ````\n\u003c/details\u003e\n\n\u003cbr/\u003e\n\n\u003e ### Loading more information like: user info, access_token on client side is discouraged and causes slow response, this should be done on server side, you can pass suggestion `isOnlyGetCode={true}` if you just want the code and don't need the access_token or `isOnlyGetToken={true}` if you just want the access_token and don't need the user's profile\n\n\u003cbr/\u003e\n\n### 1. Google Props\n\n| Prop | Type | Default | Description |\n| :----------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------- |\n| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info \u0026 access_token,...) |\n| onReject | `function(err) { // } (required)` | `-` | Return error |\n| onLoginStart | `function() { // } (optional)` | `-` | Called when click login |\n| client_id | `string (required)` | `-` | ID application |\n| typeResponse | `accessToken / idToken (optional)` | `accessToken` | whether get idToken or accessToken |\n| auto_select | `boolean (optional)` | `false` | if an ID token is automatically returned without any user interaction when there's only one Google session that has approved your app before |\n| scope | `string (optional)` | `https://www.googleapis.com/auth/userinfo.profile` | Scope application |\n| className | `string (optional)` | `-` | Class container |\n| isOnlyGetToken | `boolean (optional)` | `false` | Only get access_token without get user's info (server-side) |\n| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialGoogle/index.tsx#L11) |\n\n\u003cbr/\u003e\n\n### 2. Facebook Props\n\n| Prop | Type | Default | Description |\n| :------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :------------------------------------------------------------------------------------: | :---------------------------------------------------------------- |\n| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info \u0026 access_token,...) |\n| onReject | `function(err) { // } (required)` | `-` | Return error |\n| appId | `string (required)` | `-` | ID application |\n| fields | `string (optional)` | `id,first_name,last_name,middle_name,name,name_format,picture,short_name,email,gender` | User's fields |\n| onLoginStart | `function() { // } (optional)` | `-` | Called when click login | className | `string (optional)` | `-` | Class for button |\n| scope | `string (optional)` | `email,public_profile` | Scope application |\n| className | `string (optional)` | `-` | Class container |\n| isOnlyGetToken | `boolean (optional)` | `false` | Only get access_token without get user's info (server-side) |\n| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialFacebook/index.tsx#L10) |\n\n\u003cbr/\u003e\n\n### 3. Microsoft Props\n\n| Prop | Type | Default | Description |\n| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :--------------------: | :---------------------------------------------------------------- |\n| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info \u0026 access_token,...) |\n| onReject | `function(err) { // } (required)` | `-` | Return error |\n| client_id | `string (required)` | `-` | ID application |\n| onLoginStart | `function() { // } (optional)` | `-` | Called when click login |\n| scope | `string (optional)` | `profile openid email` | Scope application |\n| className | `string (optional)` | `-` | Class for button |\n| isOnlyGetToken | `boolean (optional)` | `false` | Only get access_token without get user's info (server-side) |\n| isOnlyGetCode | `boolean (optional)` | `false` | Only get code without access_token (server-side) |\n| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialMicrosoft/index.tsx#L10) |\n\n\u003cbr/\u003e\n\n### 4. Amazon Props\n\n| Prop | Type | Default | Description |\n| :----------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :-------: | :---------------------------------------------------------------- |\n| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info \u0026 access_token,...) |\n| onReject | `function(err) { // } (required)` | `-` | Return error |\n| client_id | `string (required)` | `-` | ID application |\n| onLoginStart | `function() { // } (optional)` | `-` | Called when click login |\n| scope | `string (optional)` | `profile` | Scope application |\n| className | `string (optional)` | `-` | Class for button |\n| isOnlyGetToken | `boolean (optional)` | `false` | Only get access_token without get user's info (server-side) |\n| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialAmazon/index.tsx#L10) |\n\n\u003cbr/\u003e\n\n### 5. Instagram Props\n\n| Prop | Type | Default | Description |\n| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :------------------------------------: | :---------------------------------------------------------------- |\n| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info \u0026 access_token,...) |\n| onReject | `function(err) { // } (required)` | `-` | Return error |\n| client_id | `string (required)` | `-` | App ID application |\n| client_secret | `string (required)` | `-` | App Secret application |\n| onLoginStart | `function() { // } (optional)` | `-` | Called when click login |\n| scope | `string (optional)` | `user_profile,user_media` | Scope application |\n| fields | `string (optional)` | `id,username,account_type,media_count` | Fields return |\n| className | `string (optional)` | `-` | Class for button |\n| isOnlyGetToken | `boolean (optional)` | `false` | Only get access_token without get user's info (server-side) |\n| isOnlyGetCode | `boolean (optional)` | `false` | Only get code without access_token (server-side) |\n| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialInstagram/index.tsx#L11) |\n\n\u003cbr/\u003e\n\n### 6. Linkedin Props\n\n| Prop | Type | Default | Description |\n| :------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :-------------: | :---------------------------------------------------------------- |\n| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info \u0026 access_token,...) |\n| onReject | `function(err) { // } (required)` | `-` | Return error |\n| client_id | `string (required)` | `-` | App ID application |\n| client_secret | `string (required)` | `-` | App Secret application |\n| onLoginStart | `function() { // } (optional)` | `-` | Called when click login |\n| scope | `string (optional)` | `r_liteprofile` | Scope application |\n| className | `string (optional)` | `-` | Class for button |\n| isOnlyGetToken | `boolean (optional)` | `false` | Only get access_token without get user's info (server-side) |\n| isOnlyGetCode | `boolean (optional)` | `false` | Only get code without access_token (server-side) |\n| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialLinkedin/index.tsx#L11) |\n\n\u003cbr/\u003e\n\n### 7. Github Props\n\n| Prop | Type | Default | Description |\n| :----------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :---------: | :---------------------------------------------------------------- |\n| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info \u0026 access_token,...) |\n| onReject | `function(err) { // } (required)` | `-` | Return error |\n| client_id | `string (required)` | `-` | App ID application |\n| client_secret | `string (required)` | `-` | Secret ID application |\n| onLoginStart | `function() { // } (optional)` | `-` | Called when click login |\n| scope | `string (optional)` | `repo,gist` | Scope application |\n| className | `string (optional)` | `-` | Class for button |\n| isOnlyGetToken | `boolean (optional)` | `false` | Only get access_token without get user's info (server-side) |\n| isOnlyGetCode | `boolean (optional)` | `false` | Only get code without access_token (server-side) |\n| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialGithub/index.tsx#L11) |\n\n\u003cbr/\u003e\n\n### 8. Pinterest Props\n\n| Prop | Type | Default | Description |\n| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :-----: | :---------------------------------------------------------------- |\n| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info \u0026 access_token,...) |\n| onReject | `function(err) { // } (required)` | `-` | Return error |\n| client_id | `string (required)` | `-` | App ID application |\n| client_secret | `string (required)` | `-` | Secret ID application |\n| onLoginStart | `function() { // } (optional)` | `-` | Called when click login |\n| scope | `string (optional)` | `-` | Scope application |\n| className | `string (optional)` | `-` | Class for button |\n| isOnlyGetToken | `boolean (optional)` | `false` | Only get access_token without get user's info (server-side) |\n| isOnlyGetCode | `boolean (optional)` | `false` | Only get code without access_token (server-side) |\n| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialPinterest/index.tsx#L11) |\n\n\u003cbr/\u003e\n\n### 9. Twitter Props\n\n| Prop | Type | Default | Description |\n| :------------------------------------------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------- |\n| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info \u0026 access_token,...) |\n| onReject | `function(err) { // } (required)` | `-` | Return error |\n| client_id | `string (required)` | `-` | API Key |\n| fields | `string (optional)` | `created_at,description,entities,id,location,name,pinned_tweet_id,profile_image_url,protected,public_metrics,url,username,verified,withheld` | User's fields |\n| state | `string (optional)` | `state` | A random string you provide to verify against CSRF attacks. |\n| scope | `string (optional)` | `users.read%20tweet.read` | Application's scope |\n| onLoginStart | `function() { // } (optional)` | `-` | Called when click login |\n| className | `string (optional)` | `-` | Class for button |\n| isOnlyGetToken | `boolean (optional)` | `false` | Only get access_token without get user's info (server-side) |\n| isOnlyGetCode | `boolean (optional)` | `false` | Only get code without access_token (server-side) |\n| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialTwitter/index.tsx#L12) |\n\n\u003cbr/\u003e\n\n### 10. Apple Props\n\n| Prop | Type | Default | Description |\n| :---------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :----------: | :---------------------------------------------------------------- |\n| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info \u0026 access_token,...) |\n| onReject | `function(err) { // } (required)` | `-` | Return error |\n| client_id | `string (required)` | `-` | API Key |\n| scope | `string (optional)` | `name email` | Application's scope |\n| onLoginStart | `function() { // } (optional)` | `-` | Called when click login |\n| className | `string (optional)` | `-` | Class for button |\n| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialApple/index.tsx#L10) |\n\n\u003cbr/\u003e\n\n### 11. Tiktok Props\n\n| Prop | Type | Default | Description |\n| :----------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :----------: | :---------------------------------------------------------------- |\n| onResolve | `function({provider, data}) { // } (required)` | `-` | Return provider and data (include user's info \u0026 access_token,...) |\n| onReject | `function(err) { // } (required)` | `-` | Return error |\n| client_key | `string (required)` | `-` | API Key |\n| scope | `string (optional)` | `name email` | Application's scope |\n| onLoginStart | `function() { // } (optional)` | `-` | Called when click login |\n| className | `string (optional)` | `-` | Class for button |\n| [other_props...](https://github.com/cuongdevjs/reactjs-social-login/blob/ae89f1cb931a338b8aed24f94064ff07bda48f9f/src/LoginSocialTiktok/index.tsx#L11) |\n\n\u003cbr/\u003e\n\n### How get client_id, client_secret_id\n\n\u003e Create application developer and you can get detail id \u0026 secret_id on these link\n\n1. [Facebook](https://developers.facebook.com/apps/)\n2. [Instagram](https://developers.facebook.com/apps/)\n3. [Github](https://github.com/settings/developers)\n4. [Linkedin](https://www.linkedin.com/developers/apps/)\n5. [Google](https://console.developers.google.com/apis/credentials)\n6. [Microsoft](https://portal.azure.com/)\n7. [Amazon](https://developer.amazon.com/loginwithamazon/console/site/lwa/overview.html)\n8. [Pinterest](https://developers.pinterest.com/docs/api/v5/)\n9. [Twitter](https://developer.twitter.com/en/docs/authentication/)\n10. [Apple](https://developer.apple.com/account/resources/)\n11. [Tiktok](https://developers.tiktok.com/apps/)\n\n## License\n\nMIT © [Nguyen-Manh-Cuong](https://github.com/cuongdevjs )\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuongdevjs%2Freactjs-social-login","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcuongdevjs%2Freactjs-social-login","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuongdevjs%2Freactjs-social-login/lists"}