React Google Auth

A simple and lightweight React component for Google Sign-In authentication using Google Identity Services.

Features

• 🔐 Google Sign-In integration
• 🎨 Customizable button styling
• 📱 Responsive design
• 🎣 Custom React hook for advanced usage
• 🚀 No TypeScript dependencies
• 📦 Lightweight and tree-shakeable

Installation

npm install atozas-react-google-auth

Quick Start

Basic Usage

import React from "react";
import { GoogleAuth } from "atozas-react-google-auth";

function App() {
  const handleSuccess = (user, response) => {
    console.log("User signed in:", user);
    console.log("Full response:", response);
  };

  const handleFailure = (error) => {
    console.error("Sign-in failed:", error);
  };

  return (
    <div>
      <h1>Welcome to My App</h1>
      <GoogleAuth
        clientId="YOUR_GOOGLE_CLIENT_ID"
        onSuccess={handleSuccess}
        onFailure={handleFailure}
      />
    </div>
  );
}

Using the Custom Hook

import React from "react";
import { useGoogleAuth } from "atozas-react-google-auth";

function MyComponent() {
  const {
    isLoaded,
    isSignedIn,
    user,
    error,
    isLoading,
    signIn,
    signOut,
    revokeAccess,
  } = useGoogleAuth("YOUR_GOOGLE_CLIENT_ID", {
    onSuccess: (user, response) => {
      console.log("User signed in:", user);
    },
    onFailure: (error) => {
      console.error("Sign-in failed:", error);
    },
  });

  if (!isLoaded) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      {!isSignedIn ? (
        <button onClick={signIn} disabled={isLoading}>
          {isLoading ? "Signing in..." : "Sign in with Google"}
        </button>
      ) : (
        <div>
          <p>Welcome, {user.name}!</p>
          <img src={user.picture} alt="Profile" />
          <button onClick={signOut}>Sign Out</button>
          <button onClick={revokeAccess}>Revoke Access</button>
        </div>
      )}
    </div>
  );
}

Setup Google OAuth

1. Go to the Google Cloud Console
2. Create a new project or select an existing one
3. Enable the Google+ API
4. Go to "Credentials" and create an OAuth 2.0 Client ID
5. Add your domain to the authorized JavaScript origins
6. Copy the Client ID and use it in your component

API Reference

GoogleAuth Component Props

| Prop | Type | Default | Description | | --------------- | -------- | --------------------- | -------------------------------------------------------- | | clientId | string | required | Your Google OAuth Client ID | | onSuccess | function | - | Callback when sign-in is successful | | onFailure | function | - | Callback when sign-in fails | | onSignOut | function | - | Callback when user signs out | | buttonText | string | 'Sign in with Google' | Text for custom button | | buttonStyle | object | {} | Custom styles for the button | | disabled | boolean | false | Disable the sign-in button | | scope | string | 'profile email' | OAuth scopes | | prompt | string | 'select_account' | Prompt parameter | | theme | string | 'light' | Button theme ('light' or 'dark') | | size | string | 'large' | Button size ('large', 'medium', 'small') | | shape | string | 'rectangular' | Button shape ('rectangular', 'pill', 'circle', 'square') | | logoAlignment | string | 'left' | Logo alignment ('left' or 'center') | | text | string | 'signin_with' | Button text type | | width | number | 240 | Button width in pixels | | height | number | 40 | Button height in pixels | | className | string | '' | Additional CSS class | | children | node | - | Render prop for custom rendering |

useGoogleAuth Hook

The hook returns an object with the following properties:

| Property | Type | Description | | -------------- | -------- | ------------------------------------------ | | isLoaded | boolean | Whether Google Identity Services is loaded | | isSignedIn | boolean | Whether user is currently signed in | | user | object | User profile information | | error | Error | Any error that occurred | | isLoading | boolean | Whether a sign-in operation is in progress | | signIn | function | Function to trigger sign-in | | signOut | function | Function to sign out | | revokeAccess | function | Function to revoke Google access |

Examples

Custom Styling

<GoogleAuth
  clientId="YOUR_CLIENT_ID"
  theme="dark"
  size="medium"
  shape="pill"
  width={300}
  height={50}
  buttonStyle={{
    margin: "20px 0",
    borderRadius: "25px",
  }}
/>

Custom Button with Render Prop

<GoogleAuth clientId="YOUR_CLIENT_ID" onSuccess={handleSuccess}>
  {({ isSignedIn, user, onSignOut, signIn }) => (
    <div>
      {!isSignedIn ? (
        <button
          onClick={signIn}
          style={{
            background: "linear-gradient(45deg, #4285f4, #34a853)",
            color: "white",
            padding: "12px 24px",
            border: "none",
            borderRadius: "8px",
            cursor: "pointer",
          }}
        >
          Custom Sign In Button
        </button>
      ) : (
        <div>
          <span>Welcome, {user.name}!</span>
          <button onClick={onSignOut}>Sign Out</button>
        </div>
      )}
    </div>
  )}
</GoogleAuth>

Error Handling

<GoogleAuth
  clientId="YOUR_CLIENT_ID"
  onSuccess={(user) => {
    // Handle successful sign-in
    console.log("User:", user);
  }}
  onFailure={(error) => {
    // Handle sign-in failure
    console.error("Error:", error);
    alert("Sign-in failed. Please try again.");
  }}
  onSignOut={() => {
    // Handle sign-out
    console.log("User signed out");
  }}
/>

Browser Support

This package uses Google Identity Services which supports all modern browsers:

• Chrome 67+
• Firefox 60+
• Safari 12+
• Edge 79+

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.