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:

yarn add gapi-oauth-react-hooks

npm i gapi-oauth-react-hooks

⚡ Typical use

It's best to setup the config early, perhaps in the index or app file:

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(<Login />, document.getElementById("root"));

Now, let's use the main hook in our Login component:

import { useGoogleAuth, UserProfile } from "gapi-oauth-react-hooks";

export const Login = () => {
  const auth = useGoogleAuth();

  const display = {
    Errored: <>Oh no!</>,
    Loading: <>Loading ...</>,
    NotSignedIn: <button onClick={auth.onSignIn} >Login</button>,
    SignedIn: <SignedIn {...auth} />
  };

  return <>{display[auth.state]}</>;
};

interface SignedInProps {
  onSignOut: () => Promise<void>;
  signedUser?: UserProfile;
  authResponse?: gapi.auth2.AuthResponse;
}

const SignedIn: React.FC<SignedInProps> = ({ onSignOut, signedUser, authResponse }) => (
  <>
    <div>user {JSON.stringify(signedUser)}</div>
    <div>auth response {JSON.stringify(authResponse)}</div>
    <button onClick={onSignOut} >Logout</button>
  </>
);

⚡ 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.

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.

import { useGoogleAuth, GoogleAuthHookProps } from 'gapi-oauth-react-hooks';

const {
  state,
  signedUser,
  authResponse,
  onSignIn,
  onSignOut,
}: GoogleAuthHookProps = useGoogleAuth();