{"_id":"@adaaugusta/react-google-login","name":"@adaaugusta/react-google-login","dist-tags":{"latest":"6.2.0"},"versions":{"6.2.0":{"name":"@adaaugusta/react-google-login","version":"6.2.0","description":"A Google Login Component for React","main":"dist/google-login.js","scripts":{"start":"webpack-dev-server --config webpack/webpack.config.dev.js","dev":"npm run start","bundle":"webpack --config webpack/webpack.config.prod.js","test":"jest","test:watch":"jest --watch","test:generate-output":"jest --json --outputFile=.jest-test-results.json","lint":"eslint ./src","lint:fix":"eslint ./src --fix","fresh":"rm -rf node_modules dist docs; rm package-lock.json; npm i","storybook":"start-storybook -p 8080","build-storybook":"npm run test:generate-output; build-storybook -c .storybook -o docs","deploy-storybook":"storybook-to-ghpages --out=docs/","release":"release-it --ci --no-git.requireCleanWorkingDir"},"pre-commit":["test","lint"],"repository":{"type":"git","url":"git+https://github.com/vijityannapon/react-google-login.git"},"keywords":["react","reactjs","react-component","google-login","google-oAuth2","google-oAuth"],"author":{"name":"William R. Moore","email":"william@nerderium.com"},"license":"MIT","bugs":{"url":"https://github.com/vijityannapon/react-google-login/issues"},"homepage":"https://github.com/vijityannapon/react-google-login","dependencies":{"@types/react":"*","prop-types":"^15.6.0"},"devDependencies":{"@babel/core":"^7.4.3","@babel/plugin-proposal-object-rest-spread":"^7.4.3","@babel/plugin-transform-runtime":"^7.4.3","@babel/preset-env":"^7.4.3","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^5.2.1","@storybook/addon-jest":"^5.2.1","@storybook/addon-knobs":"^5.2.1","@storybook/addon-links":"^5.2.1","@storybook/addon-notes":"^5.2.1","@storybook/addons":"^5.2.1","@storybook/react":"^5.2.1","@storybook/storybook-deployer":"^2.8.1","autoprefixer":"^9.7.1","babel-core":"7.0.0-bridge.0","babel-jest":"^24.7.1","babel-loader":"^8.0.5","babel-plugin-transform-react-constant-elements":"^6.23.0","babel-plugin-transform-react-inline-elements":"^6.22.0","babel-plugin-transform-react-remove-prop-types":"^0.4.24","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.11.2","eslint-config-ag":"^2.0.0","jest":"^24.7.1","pre-commit":"^1.2.2","react":"^16.0.0","react-dom":"^16.0.0","react-fontawesome":"^1.6.1","react-hot-loader":"^4.8.2","react-test-renderer":"^16.8.6","release-it":"^13.5.5","uglifyjs-webpack-plugin":"^2.1.2","webpack":"^4.29.6","webpack-cli":"^3.3.10","webpack-dev-server":"^3.2.1"},"peerDependencies":{"react":"^16 || ^17 || ^18","react-dom":"^16 || ^17 || ^18"},"types":"./index.d.ts","babel":{"presets":["@babel/preset-env","@babel/preset-react"]},"gitHead":"c3adeaad5bcb952a2511c692ebe3a003b0f14cd9","_id":"@adaaugusta/react-google-login@6.2.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-FfAYcdRXxIoeWhgQmCdULvTQzmDqI+cEa6tp6y88ieHI1S99QDjC2fuQUaMeFR/CQlIT7NMaWOmzuXQvYLTCnA==","shasum":"43cd36ed93b52815431e85844e00f61f56f4d54f","tarball":"https://registry.npmjs.org/@adaaugusta/react-google-login/-/react-google-login-6.2.0.tgz","fileCount":31,"unpackedSize":106398,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFsW81k00Q2jJJBlkWnjnRWnY7XBNClzvspBWJE/dgmWAiEAybYm4dch3aTBV4frl58pP05H0Bk4lcG3hGjXmWQOar4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqs5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpelg/9GHBEKH3OqrNJLToB6UfFFQUeGf+z1/SDPb3vkRrP4DxKZPOG\r\ngPzrQhr594d9jB0Oz4mpyUc/I1AlQ4vLp6qqe+FGW4ExHhqL/gTZMT3v2Q2t\r\nu1NbQ4AT7pv0tdBRotsCaZaIKNKpyC7xwMLN2GJ0TZqN6qlDM387D7qT6ajt\r\nrhRxbSD/ot8RSOml8IVbULbBu9gCnMI5Pa7mq9TXz7AAMgxr/vz4lI/YXTzE\r\nSrydvwhIu4LPlPIsGzI9h0uQnb5V9eQTjiRVJun0FdYF8UyditX9U8DzwS1D\r\nACrWjsmp2lOUTrkAQmZ5vWEvonMqBzXNs0LDXNAm5xuKQ5GmdY34eqI6W33A\r\npnBNIJdeJKSbA6TtKilepH26exjoaahRCWhDzrImRXEolLCVeByHHvG1w8kw\r\ngGGWu24BgXO8KSC6sOQqE8gGzOJjgo3qRgqOEdAEBirBzh7kKF+Vz13pSg2e\r\n5jPnC5b0Iny5IcnjCaU9fDDKZEIaKFD5t0STB39jgtX1FqF9aEmtbKXUkE5q\r\nmljlWJpVzvjfWCNg9t2qrBu5AJGDxKIHoQREnCTqqEFEaY07xE+DIjLfUHrD\r\nPCgnYfvfH2b+EmF29OR1FLKiOcc1WlkJynx33E+hea7/sYBeRtMSKWVxHAMM\r\nCZzp0QuWVqoH7RxOwajZJv4TbNvv70DUb8s=\r\n=j4xY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"adaaugusta","email":"vijityannapon@gmail.com"},"directories":{},"maintainers":[{"name":"adaaugusta","email":"vijityannapon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-google-login_6.2.0_1664527161287_0.4062036087117713"},"_hasShrinkwrap":false}},"time":{"created":"2022-09-30T08:39:21.163Z","6.2.0":"2022-09-30T08:39:21.558Z","modified":"2022-09-30T08:39:21.858Z"},"maintainers":[{"name":"adaaugusta","email":"vijityannapon@gmail.com"}],"description":"A Google Login Component for React","homepage":"https://github.com/vijityannapon/react-google-login","keywords":["react","reactjs","react-component","google-login","google-oAuth2","google-oAuth"],"repository":{"type":"git","url":"git+https://github.com/vijityannapon/react-google-login.git"},"author":{"name":"William R. Moore","email":"william@nerderium.com"},"bugs":{"url":"https://github.com/vijityannapon/react-google-login/issues"},"license":"MIT","readme":"# React Google Login\n\n> A Google oAUth Sign-in / Log-in Component for React\n\n## Storybook\n\n[Demo Link](https://anthonyjgrove.github.io/react-google-login/)\n\n## Install\n```\nnpm install react-google-login\n```\n\n## How to use\n```js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport GoogleLogin from 'react-google-login';\n// or\nimport { GoogleLogin } from 'react-google-login';\n\n\nconst responseGoogle = (response) => {\n  console.log(response);\n}\n\nReactDOM.render(\n  <GoogleLogin\n    clientId=\"your client id\"\n    buttonText=\"Login\"\n    onSuccess={responseGoogle}\n    onFailure={responseGoogle}\n    cookiePolicy={'single_host_origin'}\n  />,\n  document.getElementById('googleButton')\n);\n```\n\n## Google button without styling or custom button\n```js\nReactDOM.render(\n  <GoogleLogin\n    clientId=\"your client id\"\n    render={renderProps => (\n      <button onClick={renderProps.onClick} disabled={renderProps.disabled}>This is my custom Google button</button>\n    )}\n    buttonText=\"Login\"\n    onSuccess={responseGoogle}\n    onFailure={responseGoogle}\n    cookiePolicy={'single_host_origin'}\n  />,\n  document.getElementById('googleButton')\n);\n```\n\n## Stay Logged in\n`isSignedIn={true}` attribute will call `onSuccess` callback on load to keep the user signed in.\n```jsx\n<GoogleLogin\n  clientId=\"your client id\"\n  onSuccess={responseGoogle}\n  isSignedIn={true}\n/>\n```\n\n## Login Hook\n```js\nimport { useGoogleLogin } from 'react-google-login'\n\nconst { signIn, loaded } = useGoogleLogin({\n    onSuccess,\n    onAutoLoadFinished,\n    clientId,\n    cookiePolicy,\n    loginHint,\n    hostedDomain,\n    autoLoad,\n    isSignedIn,\n    fetchBasicProfile,\n    redirectUri,\n    discoveryDocs,\n    onFailure,\n    uxMode,\n    scope,\n    accessType,\n    responseType,\n    jsSrc,\n    onRequest,\n    prompt\n  })\n```\n## Logout Hook\n```js\nimport { useGoogleLogout } from 'react-google-login'\n\nconst { signOut, loaded } = useGoogleLogout({\n    jsSrc,\n    onFailure,\n    clientId,\n    cookiePolicy,\n    loginHint,\n    hostedDomain,\n    fetchBasicProfile,\n    discoveryDocs,\n    uxMode,\n    redirectUri,\n    scope,\n    accessType,\n    onLogoutSuccess\n  })\n```\n## onSuccess callback\n\nIf responseType is not 'code', callback will return the GoogleAuth object.\n\nIf responseType is 'code', callback will return the authorization code that can\nbe used to retrieve a refresh token from the server.\n\nIf you use the hostedDomain param, make sure to validate the id_token (a JSON web token) returned by Google on your backend server:\n 1. In the `responseGoogle(response) {...}` callback function, you should get back a standard JWT located at `response.tokenId` or `res.getAuthResponse().id_token`\n 2. Send this token to your server (preferably as an `Authorization` header)\n 3. Have your server decode the id_token by using a common JWT library such as [jwt-simple](https://github.com/hokaccha/node-jwt-simple) or by sending a GET request to `https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=YOUR_TOKEN_HERE`\n 4. The returned decoded token should have an `hd` key equal to the hosted domain you'd like to restrict to.\n\n\n## Logout\nUse GoogleLogout button to logout the user from google.\n\n```js\n    import { GoogleLogout } from 'react-google-login';\n    <GoogleLogout\n      clientId=\"your client id\"\n      buttonText=\"Logout\"\n      onLogoutSuccess={logout}\n    >\n    </GoogleLogout>\n  ```\n## Login Props\n\n|    params    |   value  |             default value            |   description    |\n|:------------:|:--------:|:------------------------------------:|:----------------:|\n|    clientId  |  string  |               REQUIRED               | You can create a clientID by creating a [new project on Google developers website.](https://developers.google.com/identity/sign-in/web/sign-in) |\n|    jsSrc     |  string  |https://apis.google.com/js/api.js|URL of the Javascript file normally hosted by Google|\n| hostedDomain |  string  |                   -                  |The G Suite domain to which users must belong to sign in|\n|     scope    |  string  |             profile email            |                  |\n| responseType |  string  |              permission              | Can be either space-delimited 'id_token', to retrieve an ID Token + 'permission' (or 'token'), to retrieve an Access Token, or 'code', to retrieve an Authorization Code.\n| accessType   |  string  |              online                  | Can be either 'online' or 'offline'. Use offline with responseType 'code' to retrieve an authorization code for fetching a refresh token  |\n|   onSuccess  | function |               REQUIRED               |                  |\n|   onFailure  | function |               REQUIRED               |                  |\n|   onScriptLoadFailure  | function |         -                  | If defined, will be called when loading the 'google-login' script fails (otherwise onFailure will be called) |\n|   onRequest  | function |                   -                  |                  |\n|   onAutoLoadFinished  | function |                   -         |                  |\n|   buttonText |  string  |             Login with Google        |                  |\n|   className  |  string  |                   -                  |                  |\n|    style     |  object  |                   -                  |                  |\n| disabledStyle|  object  |                   -                  |                  |\n|   loginHint  |  string  |                   -                  |                  |\n|    prompt    |  string  |                   -                  | Can be 'consent' to force google return refresh token.                |\n|     tag      |  string  |                button                |  sets element tag (div, a, span, etc     |\n|     type      |  string  |               button                |sets button type (submit || button)     |\n|   autoLoad   |  boolean |                 false                |                  |\n| fetchBasicProfile | boolean | true                            |                  |\n| disabled | boolean | false                            |                  |\n| discoveryDocs | - | https://developers.google.com/discovery/v1/using |\n| uxMode       |  string  |  popup   | The UX mode to use for the sign-in flow. Valid values are popup and redirect. |\n| theme | string | light | If set to `dark` the button will follow the Google brand guidelines for dark. Otherwise it will default to light (https://developers.google.com/identity/branding-guidelines) |\n| icon | boolean | true | Show (`true`) or hide (`false`) the Google Icon |\n| redirectUri       |  string  |  -   | If using ux_mode='redirect', this parameter allows you to override the default redirect_uri that will be used at the end of the consent flow. The default redirect_uri is the current URL stripped of query parameters and hash fragment. |\n| isSignedIn | boolean | false | If true will return GoogleUser object on load, if user has given your app permission |\n| render       | function | -                                     | Render prop to use a custom element, use renderProps.onClick |\nGoogle Scopes List: [scopes](https://developers.google.com/identity/protocols/googlescopes)\n\n## Logout Props\n\n|    params    |   value  |             default value            |   description    |\n|:------------:|:--------:|:------------------------------------:|:----------------:|\n|    clientId  |  string  |               REQUIRED               | You can create a clientID by creating a [new project on Google developers website.](https://developers.google.com/identity/sign-in/web/sign-in) |\n|    jsSrc     |  string  | https://apis.google.com/js/api.js | URL of the Javascript file normally hosted by Google |\n| hostedDomain |  string  |                   -                  | The G Suite domain to which users must belong to sign in |\n|     scope    |  string  |             profile email            |                  |\n| accessType   |  string  |              online                  | Can be either 'online' or 'offline'. Use offline with responseType 'code' to retrieve an authorization code for fetching a refresh token |\n|   onLogoutSuccess  | function |               REQUIRED               |                  |\n|   onFailure  | function |               REQUIRED               |                  |\n|   onScriptLoadFailure  | function |         -                  | If defined, will be called when loading the 'google-login' script fails (otherwise onFailure will be called) |\n|   buttonText |  string  |             Logout of Google        |                  |\n|   className  |  string  |                   -                  |                  |\n| disabledStyle|  object  |                   -                  |                  |\n|   loginHint  |  string  |                   -                  |                  |\n|     tag      |  string  |                button                |  sets element tag (div, a, span, etc     |\n|     type      |  string  |               button                |sets button type (submit || button)     |\n| fetchBasicProfile | boolean | true                            |                  |\n| disabled | boolean | false                            |                  |\n| discoveryDocs | - | https://developers.google.com/discovery/v1/using |\n| uxMode       |  string  |  popup   | The UX mode to use for the sign-in flow. Valid values are popup and redirect. |\n| theme | string | light | If set to `dark` the button will follow the Google brand guidelines for dark. Otherwise it will default to light (https://developers.google.com/identity/branding-guidelines) |\n| icon | boolean | true | Show (`true`) or hide (`false`) the Google Icon |\n| redirectUri       |  string  |  -   | If using ux_mode='redirect', this parameter allows you to override the default redirect_uri that will be used at the end of the consent flow. The default redirect_uri is the current URL stripped of query parameters and hash fragment. |\n| isSignedIn | boolean | false | If true will return GoogleUser object on load, if user has given your app permission |\n| render       | function | -                                     | Render prop to use a custom element, use renderProps.onClick |\nGoogle Scopes List: [scopes](https://developers.google.com/identity/protocols/googlescopes)\n\n## onSuccess callback ( w/ offline false)\n\nonSuccess callback returns a GoogleUser object which provides access\nto all of the GoogleUser methods listed here: https://developers.google.com/identity/sign-in/web/reference#users .\n\nYou can also access the returned values via the following properties on the returned object.\n\n| property name |  value   |             definition               |\n|:-------------:|:--------:|:------------------------------------:|\n|   googleId    |  string  |           Google user ID             |\n|   tokenId     |  string  |              Token Id                |\n|  accessToken  |  string  |            Access Token              |\n|   tokenObj    |  object  |        Token details object          |\n|  profileObj   |  object  |        Profile details object        |\n\n## onSuccess callback ( w/ offline true)\n\n| property name |  value   |             definition               |\n|:-------------:|:--------:|:------------------------------------:|\n|    code       |  object  |           offline token              |\n\nYou can also pass child components such as icons into the button component.\n```js\n  <GoogleLogin\n    clientId={'your client id'}\n    onSuccess={responseGoogle}\n    onFailure={responseGoogle}\n  >\n    <FontAwesome\n      name='google'\n    />\n    <span> Login with Google</span>\n  </GoogleLogin>\n\n```\n\n\n## onFailure callback\n\nonFailure callback is called when either initialization or a signin attempt fails.\n\n| property name |  value   |             definition               |\n|:-------------:|:--------:|:------------------------------------:|\n|   error       |  string  |           Error code                 |\n|   details     |  string  |      Detailed error description      |\n\n\n\nCommon error codes include:\n\n| error code | description |\n|:----------:|:-----------:|\n| `idpiframe_initialization_failed` | initialization of the Google Auth API failed (this will occur if a client doesn't have [third party cookies enabled](https://github.com/google/google-api-javascript-client/issues/260)) |\n| `popup_closed_by_user` | The user closed the popup before finishing the sign in flow.|\n| `access_denied` | The user denied the permission to the scopes required |\n| `immediate_failed` | No user could be automatically selected without prompting the consent flow. |\n\nMore details can be found in the official Google docs:\n * [GoogleAuth.then(onInit, onError)](https://developers.google.com/identity/sign-in/web/reference#googleauththenoninit-onerror)\n * [GoogleAuth.signIn(options)](https://developers.google.com/identity/sign-in/web/reference#googleauthsigninoptions)\n * [GoogleAuth.grantOfflineAccess(options)](https://developers.google.com/identity/sign-in/web/reference#googleauthgrantofflineaccessoptions)\n\n## Dev Server\n```\nnpm run start\n```\nDefault dev server runs at localost:8080 in browser.\nYou can set IP and PORT in webpack.config.dev.js\n\n## Run Tests\n```\nnpm run test:watch\n```\n\n## Production Bundle\n```\nnpm run bundle\n```\n\n## Deploy Storybook\n```\nnpm run deploy-storybook\n```\n\n##### Checkout my other login: [React Instagram Login](https://github.com/anthonyjgrove/react-instagram-login)\n\n##### Checkout keppelen's [React Facebook Login](https://github.com/keppelen/react-facebook-login)\n\n### Follow me on Twitter: [@anthonyjgrove](https://twitter.com/anthonyjgrove)\n","readmeFilename":"README.md"}