Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jpb06/gapi-oauth-react-hooks
Some hooks for SSO using Google sign in
https://github.com/jpb06/gapi-oauth-react-hooks
gapi react-hooks sso testing-library-react-hooks
Last synced: 3 months ago
JSON representation
Some hooks for SSO using Google sign in
- Host: GitHub
- URL: https://github.com/jpb06/gapi-oauth-react-hooks
- Owner: jpb06
- Created: 2020-10-01T19:34:14.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-02-07T18:30:43.000Z (12 months ago)
- Last Synced: 2024-10-11T20:49:21.313Z (4 months ago)
- Topics: gapi, react-hooks, sso, testing-library-react-hooks
- Language: TypeScript
- Homepage:
- Size: 671 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# gapi-oauth-react-hooks
[](https://github.dev/jpb06/gapi-oauth-react-hooks)
[](https://sonarcloud.io/summary/new_code?id=jpb06_gapi-oauth-react-hooks)
[](https://sonarcloud.io/dashboard?id=jpb06_gapi-oauth-react-hooks)
[](https://sonarcloud.io/dashboard?id=jpb06_gapi-oauth-react-hooks)
[](https://sonarcloud.io/dashboard?id=jpb06_gapi-oauth-react-hooks)
[](https://sonarcloud.io/dashboard?id=jpb06_gapi-oauth-react-hooks)
[](https://sonarcloud.io/summary/new_code?id=jpb06_gapi-oauth-react-hooks)
[](https://sonarcloud.io/summary/new_code?id=jpb06_gapi-oauth-react-hooks)
[](https://sonarcloud.io/dashboard?id=jpb06_gapi-oauth-react-hooks)
[](https://sonarcloud.io/summary/new_code?id=jpb06_gapi-oauth-react-hooks)
[](https://sonarcloud.io/summary/new_code?id=jpb06_gapi-oauth-react-hooks)
[](https://sonarcloud.io/dashboard?id=jpb06_gapi-oauth-react-hooks)
Google SSO hooks for react applications.
## ⚡ Purpose
I 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:
The package exposes its own declaration files; you won't need to install any @types/\* if you use typescript.
## ⚡ Installation
To install, use either yarn or npm:
```bash
yarn add gapi-oauth-react-hooks
```
```bash
npm i gapi-oauth-react-hooks
```
## ⚡ Typical use
It's best to setup the config early, perhaps in the index or app file:
```Typescript
import { GapiConfig } from "gapi-oauth-react-hooks";
// pulling from .env here
GapiConfig.setup(
process.env.GOOGLE_AUTH_CLIENTID,
process.env.GOOGLE_AUTH_SCOPE,
process.env.GOOGLE_AUTH_REDIRECTURI
);
ReactDOM.render(, document.getElementById("root"));
```
Now, let's use the main hook in our Login component:
```Typescript
import { useGoogleAuth, UserProfile } from "gapi-oauth-react-hooks";
export const Login = () => {
const auth = useGoogleAuth();
const display = {
Errored: <>Oh no!>,
Loading: <>Loading ...>,
NotSignedIn: Login,
SignedIn:
};
return <>{display[auth.state]}>;
};
interface SignedInProps {
onSignOut: () => Promise;
signedUser?: UserProfile;
authResponse?: gapi.auth2.AuthResponse;
}
const SignedIn: React.FC = ({ onSignOut, signedUser, authResponse }) => (
<>
user {JSON.stringify(signedUser)}
auth response {JSON.stringify(authResponse)}
Logout
>
);
```
## ⚡ Api
This package exposes two functions as well as two types:
### 🔶 Types
#### 🌀 `GapiState`
This type defines gapi state.
| Value | Description |
| ----------- | -------------------------------------- |
| Loading | gapi is not ready yet |
| Errored | an error occured while loading gapi |
| SignedIn | gapi is ready and a user is signed in |
| NotSignedIn | gapi is ready and no user is signed in |
#### 🌀 `UserProfile`
This type defines user data properties.
| Property | Description |
| ---------- | -------------------- |
| id | the id of the user |
| email | the user email |
| familyName | the user family name |
| givenName | the user given name |
| name | the user name |
| imageUrl | the user avatar |
#### 🌀 `GoogleAuthHookProps`
This type defines what returns the `useGoogleAuth` hook.
| Property | Description |
| ------------ | ---------------------------- |
| state | The gapi state |
| signedUser | The signer user (duh) |
| authResponse | The auth response |
| onSignIn | A function initiating login |
| onSignOut | A function initiating logout |
### 🔶 Functions
#### 🌀 `GapiConfig.setup`
This static class contains a config function that takes three parameters. Once called, `useGoogleAuth` can be used.
```javascript
import { GapiConfig } from 'gapi-oauth-react-hooks';
GapiConfig.setup(clientId, scope, redirectUri);
```
| Parameter | Description |
| ----------- | ------------------- |
| clientId | The gapi client id |
| scope | The requested scope |
| redirectUri | The redirect Uri |
#### 🌀 `useGoogleAuth`
This react hook handles signin and signout using gapi auth2.
```javascript
import { useGoogleAuth, GoogleAuthHookProps } from 'gapi-oauth-react-hooks';
const {
state,
signedUser,
authResponse,
onSignIn,
onSignOut,
}: GoogleAuthHookProps = useGoogleAuth();
```