@react-oauth/google

What is @react-oauth/google?

@react-oauth/google is an npm package that provides a set of React components and hooks to easily integrate Google OAuth authentication into your React applications. It simplifies the process of authenticating users with their Google accounts and handling OAuth tokens.

What are @react-oauth/google's main functionalities?

Google Login Button

This feature allows you to add a Google Login button to your React application. When the user clicks the button, they can log in with their Google account. The `onSuccess` and `onFailure` callbacks handle the login response.

import { GoogleOAuthProvider, GoogleLogin } from '@react-oauth/google';

function App() {
  const handleLoginSuccess = (response) => {
    console.log('Login Success:', response);
  };

  const handleLoginFailure = (error) => {
    console.log('Login Failed:', error);
  };

  return (
    <GoogleOAuthProvider clientId="YOUR_GOOGLE_CLIENT_ID">
      <GoogleLogin
        onSuccess={handleLoginSuccess}
        onFailure={handleLoginFailure}
      />
    </GoogleOAuthProvider>
  );
}

export default App;

Google Logout Button

This feature allows you to add a Google Logout button to your React application. When the user clicks the button, they will be logged out of their Google account. The `onLogoutSuccess` callback handles the logout response.

import { GoogleOAuthProvider, GoogleLogout } from '@react-oauth/google';

function App() {
  const handleLogoutSuccess = () => {
    console.log('Logout Success');
  };

  return (
    <GoogleOAuthProvider clientId="YOUR_GOOGLE_CLIENT_ID">
      <GoogleLogout
        onLogoutSuccess={handleLogoutSuccess}
      />
    </GoogleOAuthProvider>
  );
}

export default App;

Fetching User Profile

This feature allows you to fetch the user's profile information after they have logged in with their Google account. The `useGoogleLogin` hook is used to initiate the login process, and the user's profile information is fetched using the access token.

import { GoogleOAuthProvider, useGoogleLogin } from '@react-oauth/google';
import axios from 'axios';

function App() {
  const login = useGoogleLogin({
    onSuccess: async (tokenResponse) => {
      const userInfo = await axios.get('https://www.googleapis.com/oauth2/v3/userinfo', {
        headers: {
          Authorization: `Bearer ${tokenResponse.access_token}`,
        },
      });
      console.log('User Info:', userInfo.data);
    },
  });

  return (
    <GoogleOAuthProvider clientId="YOUR_GOOGLE_CLIENT_ID">
      <button onClick={() => login()}>Login with Google</button>
    </GoogleOAuthProvider>
  );
}

export default App;

Other packages similar to @react-oauth/google

react-google-login

react-google-login is a popular package for integrating Google login into React applications. It provides a Google login button and handles the OAuth flow. Compared to @react-oauth/google, it offers similar functionality but may have a different API and fewer features.

react-oauth

react-oauth is a more general OAuth package for React that supports multiple OAuth providers, including Google. It provides hooks and components for handling OAuth authentication. Compared to @react-oauth/google, it offers broader support for different providers but may require more configuration.

react-social-login

react-social-login is a package that supports multiple social login providers, including Google. It provides a unified API for handling social logins. Compared to @react-oauth/google, it offers a more comprehensive solution for integrating various social logins but may have a more complex setup.

README

React OAuth2 | Google

Google OAuth2 using the new Google Identity Services SDK for React @react-oauth/google🚀

Install

$ npm install @react-oauth/google@latest

# or

$ yarn add @react-oauth/google@latest

Demo & How to use to fetch user details

https://react-oauth.vercel.app/

Seamless sign-in and sign-up flows

Sign In With Google

Add a personalized and customizable sign-up or sign-in button to your website.

One-tap sign-up

Sign up new users with just one tap, without interrupting them with a sign-up screen. Users get a secure, token-based, passwordless account on your site, protected by their Google Account.

Automatic sign-in

Sign users in automatically when they return to your site on any device or browser, even after their session expires.

User authorization for Google APIs (with custom button)

OAuth 2.0 implicit and authorization code flows for web apps

The Google Identity Services JavaScript library helps you to quickly and safely obtain access tokens necessary to call Google APIs. Your web application, complete either the OAuth 2.0 implicit flow, or to initiate the authorization code flow which then finishes on your backend platform.

How to use

1. Get your Google API client ID

Key Point: Add both http://localhost and http://localhost:<port_number> to the Authorized JavaScript origins box for local tests or development.

1. Configure your OAuth Consent Screen

2. Wrap your application with GoogleOAuthProvider

import { GoogleOAuthProvider } from '@react-oauth/google';

<GoogleOAuthProvider clientId="<your_client_id>">...</GoogleOAuthProvider>;

Sign In With Google

import { GoogleLogin } from '@react-oauth/google';

<GoogleLogin
  onSuccess={credentialResponse => {
    console.log(credentialResponse);
  }}
  onError={() => {
    console.log('Login Failed');
  }}
/>;

One-tap

import { useGoogleOneTapLogin } from '@react-oauth/google';

useGoogleOneTapLogin({
  onSuccess: credentialResponse => {
    console.log(credentialResponse);
  },
  onError: () => {
    console.log('Login Failed');
  },
});

or

import { GoogleLogin } from '@react-oauth/google';

<GoogleLogin
  onSuccess={credentialResponse => {
    console.log(credentialResponse);
  }}
  onError={() => {
    console.log('Login Failed');
  }}
  useOneTap
/>;

If you are using one tap login, when logging user out consider this issue may happen, to prevent it call googleLogout when logging user out from your application.

import { googleLogout } from '@react-oauth/google';

googleLogout();

Automatic sign-in

auto_select prop true

<GoogleLogin
    ...
    auto_select
/>

useGoogleOneTapLogin({
    ...
    auto_select
});

Custom login button (implicit & authorization code flow)

Implicit flow

import { useGoogleLogin } from '@react-oauth/google';

const login = useGoogleLogin({
  onSuccess: tokenResponse => console.log(tokenResponse),
});

<MyCustomButton onClick={() => login()}>Sign in with Google 🚀</MyCustomButton>;

Authorization code flow

Requires backend to exchange code with access and refresh token.

import { useGoogleLogin } from '@react-oauth/google';

const login = useGoogleLogin({
  onSuccess: codeResponse => console.log(codeResponse),
  flow: 'auth-code',
});

<MyCustomButton onClick={() => login()}>Sign in with Google 🚀</MyCustomButton>;

Checks if the user granted all the specified scope or scopes

import { hasGrantedAllScopesGoogle } from '@react-oauth/google';

const hasAccess = hasGrantedAllScopesGoogle(
  tokenResponse,
  'google-scope-1',
  'google-scope-2',
);

Checks if the user granted any of the specified scope or scopes

import { hasGrantedAnyScopeGoogle } from '@react-oauth/google';

const hasAccess = hasGrantedAnyScopeGoogle(
  tokenResponse,
  'google-scope-1',
  'google-scope-2',
);

Content Security Policy (if needed)

API

GoogleOAuthProvider

Required	Prop	Type	Description
✓	clientId	string	Google API client ID
	nonce	string	Nonce applied to GSI script tag. Propagates to GSI's inline style tag
	onScriptLoadSuccess	function	Callback fires on load gsi script success
	onScriptLoadError	function	Callback fires on load gsi script failure

GoogleLogin

Required	Prop	Type	Description
✓	onSuccess	(response: CredentialResponse) => void	Callback fires with credential response after successfully login
	onError	function	Callback fires after login failure
	type	standard | icon	Button type type
	theme	outline | filled_blue | filled_black	Button theme
	size	large | medium | small	Button size
	text	signin_with | signup_with | continue_with | signin	Button text. For example, "Sign in with Google", "Sign up with Google" or "Sign in"
	shape	rectangular | pill | circle | square	Button shape
	logo_alignment	left | center	Google logo alignment
	width	string	button width, in pixels
	locale	string	If set, then the button language is rendered
	useOneTap	boolean	Activate One-tap sign-up or not
	promptMomentNotification	(notification: PromptMomentNotification) => void	PromptMomentNotification methods and description
	cancel_on_tap_outside	boolean	Controls whether to cancel the prompt if the user clicks outside of the prompt
	auto_select	boolean	Enables automatic selection on Google One Tap
	ux_mode	popup | redirect	The Sign In With Google button UX flow
	login_uri	string	The URL of your login endpoint
	native_login_uri	string	The URL of your password credential handler endpoint
	native_callback	(response: { id: string; password: string }) => void	The JavaScript password credential handler function name
	prompt_parent_id	string	The DOM ID of the One Tap prompt container element
	nonce	string	A random string for ID tokens
	context	signin | signup | use	The title and words in the One Tap prompt
	state_cookie_domain	string	If you need to call One Tap in the parent domain and its subdomains, pass the parent domain to this attribute so that a single shared cookie is used
	allowed_parent_origin	string | string[]	The origins that are allowed to embed the intermediate iframe. One Tap will run in the intermediate iframe mode if this attribute presents
	intermediate_iframe_close_callback	function	Overrides the default intermediate iframe behavior when users manually close One Tap
	itp_support	boolean	Enables upgraded One Tap UX on ITP browsers
	hosted_domain	string	If your application knows the Workspace domain the user belongs to, use this to provide a hint to Google. For more information, see the hd field in the OpenID Connect docs
	use_fedcm_for_prompt	boolean	Allow the browser to control user sign-in prompts and mediate the sign-in flow between your website and Google.

useGoogleLogin (Both implicit & authorization code flow)

Required	Prop	Type	Description
	flow	implicit | auth-code	Two flows, implicit and authorization code are discussed. Both return an access token suitable for use with Google APIs
	onSuccess	(response: TokenResponse|CodeResponse) => void	Callback fires with response (token | code) based on flow selected after successfully login
	onError	(errorResponse: {error: string; error_description?: string,error_uri?: string}) => void	Callback fires after login failure
	onNonOAuthError	(nonOAuthError: NonOAuthError) => void	Some non-OAuth errors, such as the popup window is failed to open or closed before an OAuth response is returned. popup_failed_to_open | popup_closed | unknown
	scope	string	A space-delimited list of scopes that are approved by the user
	enable_serial_consent	boolean	defaults to true. If set to false, more granular Google Account permissions will be disabled for clients created before 2019. No effect for newer clients, since more granular permissions is always enabled for them.
	hint	string	If your application knows which user should authorize the request, it can use this property to provide a hint to Google. The email address for the target user. For more information, see the login_hint field in the OpenID Connect docs
	hosted_domain	string	If your application knows the Workspace domain the user belongs to, use this to provide a hint to Google. For more information, see the hd field in the OpenID Connect docs

useGoogleLogin (Extra implicit flow props)

Required	Prop	Type	Description
	prompt	'' | none | consent | select_account	defaults to 'select_account'. A space-delimited, case-sensitive list of prompts to present the user
	state	string	Not recommended. Specifies any string value that your application uses to maintain state between your authorization request and the authorization server's response

useGoogleLogin (Extra authorization code flow props)

Required	Prop	Type	Description
	ux_mode	popup | redirect	The UX mode to use for the authorization flow. By default, it will open the consent flow in a popup. Valid values are popup and redirect
	redirect_uri	string	Required for redirect UX. Determines where the API server redirects the user after the user completes the authorization flow The value must exactly match one of the authorized redirect URIs for the OAuth 2.0 client which you configured in the API Console and must conform to our Redirect URI validation rules. The property will be ignored by the popup UX
	state	string	Recommended for redirect UX. Specifies any string value that your application uses to maintain state between your authorization request and the authorization server's response
	select_account	boolean	defaults to 'false'. Boolean value to prompt the user to select an account

useGoogleOneTapLogin

Required	Prop	Type	Description
✓	onSuccess	(response: CredentialResponse) => void	Callback fires with credential response after successfully login
	onError	function	Callback fires after login failure
	promptMomentNotification	(notification: PromptMomentNotification) => void	PromptMomentNotification methods and description
	cancel_on_tap_outside	boolean	Controls whether to cancel the prompt if the user clicks outside of the prompt
	hosted_domain	string	If your application knows the Workspace domain the user belongs to, use this to provide a hint to Google. For more information, see the hd field in the OpenID Connect docs
	disabled	boolean	Controls whether to cancel the popup in cases such as when the user is already logged in
	use_fedcm_for_prompt	boolean	Allow the browser to control user sign-in prompts and mediate the sign-in flow between your website and Google.