# 🔐 Google-Auth-Lite

A flexible and plug-and-play Google Authentication wrapper for **MERN Stack** applications. Provides a ready-to-use **React Component** for the frontend and a secure **Token Verification** utility for [Node.js](w) backends.

✅ **Simplify your OAuth2 flow in minutes.**

---

## 🔧 Installation

```bash
npm i google-auth-lite

⚙️ Google Cloud Configuration

Before using the package, you need a Client ID from Google.

1. Go to the Google Cloud Console.
2. Create a nehttps://www.google.com/search?q=w project & navigate to APIs & Services > Credentials.
3. Create an OAuth 2.0 Client ID (Web Application).
4. Important: Add your app's URL (e.g., http://localhost:3000 or https://your-domain.com) to Authorized JavaScript origins.

📦 Frontend Setup (React)

Import the button component and handle the success callback.

// src/Login.jsx
import React from "react";
import { GoogleAuthButton } from "google-auth-lite";

const Login = () => {
  const handleSuccess = (credential) => {
    console.log("JWT Token:", credential);
    // Send this token to your backend API
  };

  const handleFailure = () => {
    console.log("Login Failed");
  };

  return (
    <div className="login-wrapper">
      <GoogleAuthButton 
        clientId="YOUR_GOOGLE_CLIENT_ID" 
        onSuccess={handleSuccess} 
        onFailure={handleFailure} 
      />
    </div>
  );
};

export default Login;

🛡️ Backend Setup (Node.js)

Verify the token received from the frontend to authenticate the user securely.

// server.js or controllers/authController.js
import express from "express";
import { verifyGoogleToken } from "google-auth-lite";

const app = express();
app.use(express.json());

app.post("/api/auth/google", async (req, res) => {
  const { token } = req.body;
  const CLIENT_ID = process.env.GOOGLE_CLIENT_ID;

  try {
    // Verify the token using google-auth-lite
    const result = await verifyGoogleToken(token, CLIENT_ID);

    if (!result.valid) {
      return res.status(401).json({ message: "Invalid Token" });
    }

    // Success: Access user data
    const { email, name, picture } = result.user;
    
    // Logic to find or create user in your DB...
    
    res.json({ message: "Login Successful", user: result.user });

  } catch (error) {
    res.status(500).json({ message: "Server Error" });
  }
});

🧠 Features

• ✅ Zero Boilerplate: No script tags needed in index.html.
• ✅ React Component: Pre-styled, customizable button.
• ✅ Secure Backend: One-function verification for Node.js.
• ✅ TypeScript Support: Full type definitions included.
• ✅ Customizable: Supports Outline, Filled Blue, and Filled Black themes.

🧪 Example .env

Create a .env file in your project root.

# Google Credentials
REACT_APP_GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_ID=your-google-client-id

# Server Config
PORT=5000
NODE_ENV=development

📥 Request Examples

1. Login Flohttps://www.google.com/search?q=w (Frontend to Backend)

Send the token received from the Google Button to your server.

POST /api/auth/google
Content-Type: application/json
{
  "token": "eyJhbGciOiJSUzI1NiIsImtpZCI6ImZm..."
}

2. Success Response (Backend to Frontend)

The verifyGoogleToken function returns this structure:

{
  "valid": true,
  "user": {
    "email": "[email protected]",
    "name": "John Doe",
    "picture": "[https://lh3.googleusercontent.com/](https://lh3.googleusercontent.com/)...",
    "googleId": "1234567890",
    "emailVerified": true
  }
}

🎨 Button Customization

You can pass optional props to style the button.

<GoogleAuthButton 
  clientId="..." 
  onSuccess={...}
  theme="filled_black"  /* Options: "outline", "filled_blue", "filled_black" */
  width="300"           /* Width in pixels */
  size="large"          /* Options: "small", "medium", "large" */
/>

📄 License

Licensed under MIT.

Built https://www.google.com/search?q=with ❤️ by Vraj Gajjar