Google Login Handler

A simple and efficient React NPM Package for handling Google authentication using OAuth 2.0 and One Tap Login. This package allows you to integrate Google Sign-In with minimal setup, supporting various login methods including Popup, Redirect, and One Tap Login.

• NPM Package Link : https://www.npmjs.com/package/google-authenticator-soumojit-shome

Features

• Google OAuth authentication via Popup and Redirect.
• One Tap Login support for seamless authentication.
• Automatic user data retrieval including email, profile picture, and display name.
• Customizable authentication flow with options to enable/disable One Tap Login.
• Handles login state using setLoader for UI responsiveness.
• Supports auto-login via URL hash for redirect-based authentication.
• Fallback mechanism in case of popup failures, switching to redirect method automatically.
• Success and Error callback handlers for better control over authentication flow.
• Environment variable support for secure and configurable authentication.

Installation

To install the package, use the following command:

npm install google-authenticator-soumojit-shome

or with yarn:

yarn add google-authenticator-soumojit-shome

Usage

Import and Use in a React Component

import { HandleGoogleLog } from "google-authenticator-soumojit-shome";

const MyComponent = () => {
  const { loginWithGoogle } = HandleGoogleLog({
    clientId: "", // Google Client ID
    redirectUri: "", // Redirect URI
    setLoader: (loading) => console.log("Loading:", loading),
    oneTapDisable: false, // Enable or disable One Tap Login
    loginMethod: "popup", // Choose between "popup", "redirect", or "auto"
    onSuccess: (userData) => {
      console.log("User Data:", userData);
      
      // Retrieve stored URL and redirect back after login
      const redirectBackUrl = localStorage.getItem("redirectBackUrl") || "/";
      window.location.href = redirectBackUrl;
    },
    onError: (error) => console.error("Login Error:", error),
  });

  return (
    <button onClick={loginWithGoogle}>Sign in with Google</button>
  );
};

Props

Prop	Type	Default	Description
clientId	string	undefined	Your Google OAuth Client ID.
redirectUri	string	undefined	The redirect URI after authentication.
setLoader	function	undefined	Function to handle loading state.
oneTapDisable	boolean	false	Disable One Tap Login if set to true.
loginMethod	string	"auto"	Login method: "popup", "redirect", or "auto".
onSuccess	function	undefined	Callback function when login is successful.
onError	function	undefined	Callback function when login fails.

Login Methods

1. Popup Login (Recommended)

• Provides a seamless authentication experience within a popup.
• Users stay on the same page without redirection.
• Ideal for SPAs (Single Page Applications).

2. Redirect Login

• Redirects the user to Google's authentication page.
• Useful for handling login on server-side rendered applications.
• Automatically processes login when redirected back.

3. One Tap Login

• Displays a Google login prompt on the page without user interaction.
• Provides a faster and smoother login experience.
• Can be disabled using oneTapDisable: true.

Handling Authentication Response

The package automatically extracts user details upon successful login:

{
  userName: "exampleuser", // Extracted from email
  userPicUrl: "https://example.com/pic.jpg", // Profile picture URL
  displayName: "Example User", // Full name
  email: "exampleuser@gmail.com" // Email address
}

Error Handling

If an error occurs during login, the onError callback is triggered:

onError: (error) => {
  console.error("Google Login Error:", error);
};

Common errors include:

• Invalid Client ID.
• Popup blocked by browser settings.
• User denied access.
• Network issues preventing authentication.

Author

Soumojit Shome

• NPM Website
• GitHub
• LinkedIn