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.

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: "[email protected]" // 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

• Website
• GitHub
• LinkedIn