React bindings for gapi.auth2 (Google's OAuth 2.0 JavaScript client)
npm install react-gapi-auth2React bindings for gapi.auth2 (Google's OAuth 2.0 JavaScript client)
gapi.auth2 is Google's OAuth2.0 client side library. It's great for implementing "Sign in with Google" in a non-framework "vanilla" JS app. However, using it in a React app is has some rough edges,
- It involves loading tags manually
- The gapi.auth2 api has _some_ imperative code, which is awkward to integrate with declarative code
There are already other React libraries that attempt solve these problems, however, they tend to create unnecessary abstractions on top of an already simple api. The entire gapi.auth2 libarary only exposes two javascript classes
- GoogleAuth: a "singleton class that provides methods to allow the user to sign in with a Google account"
- GoogleUser: an "object represents one user account"
This library provides two hooks useGoogleAuth and useGoogleUser that provide easier access to those objects. The majority of the api provided by gapi.auth2 is intentionally left unchanged. Anything you can do with the existing gapi.auth2 library, you can do with react-gapi-auth2.
``bash
npm install --save react-gapi-auth2
$3
Wrap your application with the provider, which manages loading the
library`jsx
// App.jsx
import React from 'react';
import { GApiProvider } from 'react-gapi-auth2';// Same config object passed to
gapi.auth2.init
// https://developers.google.com/identity/sign-in/web/reference#gapiauth2initparams
const clientConfig = {
client_id: '.apps.googleusercontent.com'
cookie_policy: 'single_host_origin'
scope: 'https://www.googleapis.com/auth/'
// etc...
};const App = ({ children }) => (
{children}
);
export default App;
Then you can use the provided hooks
jsx
// SignIn.jsx
import React from 'react';
import { useGoogleAuth, useGoogleUser } from 'react-gapi-auth2';const SignIn = ({ children }) => {
// The
GoogleAuth object described here:
// https://developers.google.com/identity/sign-in/web/reference#authentication
const { googleAuth } = useGoogleAuth();
// The GoogleUser object described here:
// https://developers.google.com/identity/sign-in/web/reference#users
const { currentUser } = useGoogleUser(); if (googleAuth.isSignedIn) {
return (
<>
Welcome user {currentUser.getBasicProfile().getName()}
)
}
return (
<>
Click here to sign in:
)
};export default SignIn;
`Or use the built in
provided by this library, which is simply a wrapper around gapi.signin2.render
jsx
import React from 'react';
import { SignInButton } from 'react-auth2-gapi';// The same options object in the signature of
gapi.signin2.render
// https://developers.google.com/identity/sign-in/web/reference#gapisignin2renderid_options
const options = {
width: 200,
height: 50,
theme: 'dark',
onsuccess: () => console.log('Successfully logged in'),
onfailure: () => console.error('Error logging in'),
};const MySignInButton = () => (
);
export default MySignInButton;
$3
This library also provides a hook called
, which is a wrapper around gapi.auth2.authroize. This method should only be used in advanced use cases, such as those described by GApi's documentation`
- Your application only needs to requests a Google API endpoint once, for instance to load the user's favorite YouTube videos the first time they sign in.
- Your application has its own session management infrastructure, and it only requires the ID Token once to identify the user in your backend.
- Several Client IDs are used within the same page.
You cannot use
while using useGoogleAuth or useGoogleUser because of conflicts that arise when using both gapi.auth2.authorize and gapi.auth2.init/signIn`.