{"id":19972594,"url":"https://github.com/jpb06/gapi-oauth-react-hooks","last_synced_at":"2025-05-04T01:30:51.744Z","repository":{"id":43087558,"uuid":"300401533","full_name":"jpb06/gapi-oauth-react-hooks","owner":"jpb06","description":"Some hooks for SSO using Google sign in","archived":false,"fork":false,"pushed_at":"2024-02-07T18:30:43.000Z","size":687,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-08T01:01:42.655Z","etag":null,"topics":["gapi","react-hooks","sso","testing-library-react-hooks"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jpb06.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-01T19:34:14.000Z","updated_at":"2025-03-19T15:40:23.000Z","dependencies_parsed_at":"2023-02-14T00:55:21.779Z","dependency_job_id":null,"html_url":"https://github.com/jpb06/gapi-oauth-react-hooks","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpb06%2Fgapi-oauth-react-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpb06%2Fgapi-oauth-react-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpb06%2Fgapi-oauth-react-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpb06%2Fgapi-oauth-react-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jpb06","download_url":"https://codeload.github.com/jpb06/gapi-oauth-react-hooks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252276955,"owners_count":21722447,"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":["gapi","react-hooks","sso","testing-library-react-hooks"],"created_at":"2024-11-13T03:08:38.356Z","updated_at":"2025-05-04T01:30:51.122Z","avatar_url":"https://github.com/jpb06.png","language":"TypeScript","readme":"# gapi-oauth-react-hooks\n\n[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode\u0026label=\u0026message=Open%20in%20Visual%20Studio%20Code\u0026labelColor=2c2c32\u0026color=007acc\u0026logoColor=007acc)](https://github.dev/jpb06/gapi-oauth-react-hooks)\n![npm bundle size](https://img.shields.io/bundlephobia/min/gapi-oauth-react-hooks)\n![Github workflow](https://img.shields.io/github/actions/workflow/status/jpb06/gapi-oauth-react-hooks/tests-scan.yml?branch=master\u0026logo=github-actions\u0026label=last%20workflow)\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=jpb06_gapi-oauth-react-hooks\u0026metric=alert_status)](https://sonarcloud.io/summary/new_code?id=jpb06_gapi-oauth-react-hooks)\n[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=jpb06_gapi-oauth-react-hooks\u0026metric=sqale_rating)](https://sonarcloud.io/dashboard?id=jpb06_gapi-oauth-react-hooks)\n[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=jpb06_gapi-oauth-react-hooks\u0026metric=security_rating)](https://sonarcloud.io/dashboard?id=jpb06_gapi-oauth-react-hooks)\n[![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=jpb06_gapi-oauth-react-hooks\u0026metric=reliability_rating)](https://sonarcloud.io/dashboard?id=jpb06_gapi-oauth-react-hooks)\n[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=jpb06_gapi-oauth-react-hooks\u0026metric=coverage)](https://sonarcloud.io/dashboard?id=jpb06_gapi-oauth-react-hooks)\n![Coverage](./badges/coverage-jest%20coverage.svg)\n[![Lines of Code](https://sonarcloud.io/api/project_badges/measure?project=jpb06_gapi-oauth-react-hooks\u0026metric=ncloc)](https://sonarcloud.io/summary/new_code?id=jpb06_gapi-oauth-react-hooks)\n[![Technical Debt](https://sonarcloud.io/api/project_badges/measure?project=jpb06_gapi-oauth-react-hooks\u0026metric=sqale_index)](https://sonarcloud.io/summary/new_code?id=jpb06_gapi-oauth-react-hooks)\n[![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=jpb06_gapi-oauth-react-hooks\u0026metric=code_smells)](https://sonarcloud.io/dashboard?id=jpb06_gapi-oauth-react-hooks)\n[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=jpb06_gapi-oauth-react-hooks\u0026metric=bugs)](https://sonarcloud.io/summary/new_code?id=jpb06_gapi-oauth-react-hooks)\n[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=jpb06_gapi-oauth-react-hooks\u0026metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=jpb06_gapi-oauth-react-hooks)\n[![Duplicated Lines (%)](https://sonarcloud.io/api/project_badges/measure?project=jpb06_gapi-oauth-react-hooks\u0026metric=duplicated_lines_density)](https://sonarcloud.io/dashboard?id=jpb06_gapi-oauth-react-hooks)\n![Last commit](https://img.shields.io/github/last-commit/jpb06/gapi-oauth-react-hooks?logo=git)\n\nGoogle SSO hooks for react applications.\n\n\u003c!-- readme-package-icons start --\u003e\n\n\u003cp align=\"left\"\u003e\u003ca href=\"https://docs.github.com/en/actions\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/GithubActions-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://www.typescriptlang.org/docs/\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/TypeScript.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://nodejs.org/en/docs/\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/NodeJS-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://pnpm.io/motivation\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Pnpm-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://github.com/conventional-changelog\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/CommitLint.Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://eslint.org/docs/latest/\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Eslint-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://prettier.io/docs/en/index.html\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Prettier-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://reactjs.org/docs/getting-started.html\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/React-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://swc.rs/docs/getting-started\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Swc-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://testing-library.com/docs/\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/TestingLibrary-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://vitest.dev/guide/\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Vitest-Dark.svg\" /\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003c!-- readme-package-icons end --\u003e\n\n## ⚡ Purpose\n\nI needed SSO for google users and wasn't quite satisfied with what I found in the react eco system. Perhaps this will be useful for someone else, so here we go :rocket:\n\nThe package exposes its own declaration files; you won't need to install any @types/\\* if you use typescript.\n\n## ⚡ Installation\n\nTo install, use either yarn or npm:\n\n```bash\nyarn add gapi-oauth-react-hooks\n```\n\n```bash\nnpm i gapi-oauth-react-hooks\n```\n\n## ⚡ Typical use\n\nIt's best to setup the config early, perhaps in the index or app file:\n\n```Typescript\nimport { GapiConfig } from \"gapi-oauth-react-hooks\";\n\n// pulling from .env here\nGapiConfig.setup(\n  process.env.GOOGLE_AUTH_CLIENTID,\n  process.env.GOOGLE_AUTH_SCOPE,\n  process.env.GOOGLE_AUTH_REDIRECTURI\n);\n\nReactDOM.render(\u003cLogin /\u003e, document.getElementById(\"root\"));\n```\n\nNow, let's use the main hook in our Login component:\n\n```Typescript\nimport { useGoogleAuth, UserProfile } from \"gapi-oauth-react-hooks\";\n\nexport const Login = () =\u003e {\n  const auth = useGoogleAuth();\n\n  const display = {\n    Errored: \u003c\u003eOh no!\u003c/\u003e,\n    Loading: \u003c\u003eLoading ...\u003c/\u003e,\n    NotSignedIn: \u003cbutton onClick={auth.onSignIn} \u003eLogin\u003c/button\u003e,\n    SignedIn: \u003cSignedIn {...auth} /\u003e\n  };\n\n  return \u003c\u003e{display[auth.state]}\u003c/\u003e;\n};\n\ninterface SignedInProps {\n  onSignOut: () =\u003e Promise\u003cvoid\u003e;\n  signedUser?: UserProfile;\n  authResponse?: gapi.auth2.AuthResponse;\n}\n\nconst SignedIn: React.FC\u003cSignedInProps\u003e = ({ onSignOut, signedUser, authResponse }) =\u003e (\n  \u003c\u003e\n    \u003cdiv\u003euser {JSON.stringify(signedUser)}\u003c/div\u003e\n    \u003cdiv\u003eauth response {JSON.stringify(authResponse)}\u003c/div\u003e\n    \u003cbutton onClick={onSignOut} \u003eLogout\u003c/button\u003e\n  \u003c/\u003e\n);\n```\n\n## ⚡ Api\n\nThis package exposes two functions as well as two types:\n\n### 🔶 Types\n\n#### 🌀 `GapiState`\n\nThis type defines gapi state.\n\n| Value       | Description                            |\n| ----------- | -------------------------------------- |\n| Loading     | gapi is not ready yet                  |\n| Errored     | an error occured while loading gapi    |\n| SignedIn    | gapi is ready and a user is signed in  |\n| NotSignedIn | gapi is ready and no user is signed in |\n\n#### 🌀 `UserProfile`\n\nThis type defines user data properties.\n\n| Property   | Description          |\n| ---------- | -------------------- |\n| id         | the id of the user   |\n| email      | the user email       |\n| familyName | the user family name |\n| givenName  | the user given name  |\n| name       | the user name        |\n| imageUrl   | the user avatar      |\n\n#### 🌀 `GoogleAuthHookProps`\n\nThis type defines what returns the `useGoogleAuth` hook.\n\n| Property     | Description                  |\n| ------------ | ---------------------------- |\n| state        | The gapi state               |\n| signedUser   | The signer user (duh)        |\n| authResponse | The auth response            |\n| onSignIn     | A function initiating login  |\n| onSignOut    | A function initiating logout |\n\n### 🔶 Functions\n\n#### 🌀 `GapiConfig.setup`\n\nThis static class contains a config function that takes three parameters. Once called, `useGoogleAuth` can be used.\n\n```javascript\nimport { GapiConfig } from 'gapi-oauth-react-hooks';\n\nGapiConfig.setup(clientId, scope, redirectUri);\n```\n\n| Parameter   | Description         |\n| ----------- | ------------------- |\n| clientId    | The gapi client id  |\n| scope       | The requested scope |\n| redirectUri | The redirect Uri    |\n\n#### 🌀 `useGoogleAuth`\n\nThis react hook handles signin and signout using gapi auth2.\n\n```javascript\nimport { useGoogleAuth, GoogleAuthHookProps } from 'gapi-oauth-react-hooks';\n\nconst {\n  state,\n  signedUser,\n  authResponse,\n  onSignIn,\n  onSignOut,\n}: GoogleAuthHookProps = useGoogleAuth();\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpb06%2Fgapi-oauth-react-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjpb06%2Fgapi-oauth-react-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpb06%2Fgapi-oauth-react-hooks/lists"}