A plug-and-play Google Auth wrapper for MERN stack. Includes React Component and Node verification.
npm install google-auth-lite``markdown
`🔐 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 backends.
✅ Simplify your OAuth2 flow in minutes.
---
🔧 Installation
bash
`
npm i google-auth-lite
http://localhost:3000
---
⚙️ 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., or https://your-domain.com) to Authorized JavaScript origins.
`
---
📦 Frontend Setup (React)
Import the button component and handle the success callback.
jsx
`
// 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 (
onSuccess={handleSuccess}
onFailure={handleFailure}
/>
);
};
export default Login;
`
---
🛡️ Backend Setup (Node.js)
Verify the token received from the frontend to authenticate the user securely.
js
`
// 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" });
}
});
index.html
---
🧠 Features
* ✅ Zero Boilerplate: No script tags needed in .
.env
* ✅ 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 file in your project root.
`
env
`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
$3
Send the token received from the Google Button to your server.
http
`
POST /api/auth/google
Content-Type: application/json
{
"token": "eyJhbGciOiJSUzI1NiIsImtpZCI6ImZm..."
}
verifyGoogleToken
$3
The function returns this structure:
`
json
`
{
"valid": true,
"user": {
"email": "user@gmail.com",
"name": "John Doe",
"picture": "https://lh3.googleusercontent.com/...",
"googleId": "1234567890",
"emailVerified": true
}
}
`
---
🎨 Button Customization
You can pass optional props to style the button.
jsx
`
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
``