gapi-oauth-react-hooks v3.4.10

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.

🌀 UserProfile

This type defines user data properties.

🌀 GoogleAuthHookProps

This type defines what returns the useGoogleAuth hook.

🔶 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);

🌀 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();