{"id":13404036,"url":"https://github.com/anthonyjgrove/react-google-login","last_synced_at":"2025-03-14T08:32:29.110Z","repository":{"id":37458125,"uuid":"52837407","full_name":"anthonyjgrove/react-google-login","owner":"anthonyjgrove","description":"A React Google Login Component","archived":true,"fork":false,"pushed_at":"2023-03-04T02:25:48.000Z","size":4848,"stargazers_count":1845,"open_issues_count":204,"forks_count":426,"subscribers_count":20,"default_branch":"master","last_synced_at":"2024-10-17T16:51:29.691Z","etag":null,"topics":["googe","google-api","google-authentication","google-login","googleapiclient","googleauth","googleuser","react","react-google-login"],"latest_commit_sha":null,"homepage":"https://anthonyjgrove.github.io/react-google-login","language":"JavaScript","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/anthonyjgrove.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"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":"2016-03-01T01:12:19.000Z","updated_at":"2024-10-10T10:57:36.000Z","dependencies_parsed_at":"2024-06-13T14:26:29.415Z","dependency_job_id":"6bdba64f-765a-4427-afdf-ac8b9d301e63","html_url":"https://github.com/anthonyjgrove/react-google-login","commit_stats":{"total_commits":358,"total_committers":91,"mean_commits":3.934065934065934,"dds":0.6843575418994414,"last_synced_commit":"a38c7b6c5d44fa01354ae37c6e1a5e807ff36259"},"previous_names":[],"tags_count":62,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonyjgrove%2Freact-google-login","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonyjgrove%2Freact-google-login/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonyjgrove%2Freact-google-login/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonyjgrove%2Freact-google-login/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anthonyjgrove","download_url":"https://codeload.github.com/anthonyjgrove/react-google-login/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221449575,"owners_count":16823619,"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","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":["googe","google-api","google-authentication","google-login","googleapiclient","googleauth","googleuser","react","react-google-login"],"created_at":"2024-07-30T19:01:38.026Z","updated_at":"2025-03-14T08:32:29.079Z","avatar_url":"https://github.com/anthonyjgrove.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"```diff\n- This package is no longer maintained.\n```\n\n# React Google Login\n\n\u003e 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) =\u003e {\n  console.log(response);\n}\n\nReactDOM.render(\n  \u003cGoogleLogin\n    clientId=\"658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com\"\n    buttonText=\"Login\"\n    onSuccess={responseGoogle}\n    onFailure={responseGoogle}\n    cookiePolicy={'single_host_origin'}\n  /\u003e,\n  document.getElementById('googleButton')\n);\n```\n\n## Google button without styling or custom button\n```js\nReactDOM.render(\n  \u003cGoogleLogin\n    clientId=\"658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com\"\n    render={renderProps =\u003e (\n      \u003cbutton onClick={renderProps.onClick} disabled={renderProps.disabled}\u003eThis is my custom Google button\u003c/button\u003e\n    )}\n    buttonText=\"Login\"\n    onSuccess={responseGoogle}\n    onFailure={responseGoogle}\n    cookiePolicy={'single_host_origin'}\n  /\u003e,\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\u003cGoogleLogin\n  clientId=\"658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com\"\n  onSuccess={responseGoogle}\n  isSignedIn={true}\n/\u003e\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    \u003cGoogleLogout\n      clientId=\"658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com\"\n      buttonText=\"Logout\"\n      onLogoutSuccess={logout}\n    \u003e\n    \u003c/GoogleLogout\u003e\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  \u003cGoogleLogin\n    clientId={'658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com'}\n    onSuccess={responseGoogle}\n    onFailure={responseGoogle}\n  \u003e\n    \u003cFontAwesome\n      name='google'\n    /\u003e\n    \u003cspan\u003e Login with Google\u003c/span\u003e\n  \u003c/GoogleLogin\u003e\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonyjgrove%2Freact-google-login","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanthonyjgrove%2Freact-google-login","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonyjgrove%2Freact-google-login/lists"}