Google OAuth

Authenticate users with Google OAuth using Passport.js and JWT for secure, scalable Express backends.

authoauthgooglepassportexpressjwtsecurity

v2.0.0auth

Overview

A developer-ready Google OAuth 2.0 authentication component built with Passport.js and JWT. It provides secure OAuth login with automatic JWT issuance and user profile management. Perfect for adding Google-based authentication to any Express or Next.js app.

Installation

CLI

npx backternity add auth-oauth-google

What This Does

Installs Passport.js-based Google OAuth flow with JWT token handling and Express integration.

Files & Folders Created

File / Path	Description
/src/config/passport.js	Configures Passport Google OAuth 2.0 strategy.
/src/routes/auth.js	Routes for /auth/google and /auth/google/callback.
/src/services/userService.js	Handles user creation and retrieval.
/.env.example	Example environment configuration for OAuth and JWT.

Files to be modified

File / Path	Description
server.js	Mounts /auth routes and configures Passport middleware.
frontend/.env	Add FRONTEND_URL for redirect handling.

Configuration

# Google OAuth Configuration
GOOGLE_CLIENT_ID=your-google-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-google-client-secret

# JWT Configuration
JWT_SECRET=your-super-secret-key
JWT_EXPIRES_IN=7d

# Application URLs
BACKEND_URL=http://localhost:3001
FRONTEND_URL=http://localhost:3000

Frontend Integration

Use the endpoints below to implement secure Google login from your Next.js frontend. The backend returns a signed JWT and user profile after successful authentication.

GET/auth/google

Redirects the user to Google for OAuth authorization.

GET/auth/google/callback

Handles Google's callback, issues JWT, and redirects the user to the frontend with the token.

Example

// app/components/GoogleLogin.jsx
'use client';
import { useState, useEffect } from 'react';

export default function GoogleLogin() {
  const [user, setUser] = useState(null);
  const [message, setMessage] = useState('');

  useEffect(() => {
    // Capture token from callback redirect
    const params = new URLSearchParams(window.location.search);
    const token = params.get('token');
    if (token) {
      localStorage.setItem('accessToken', token);
      fetchUser(token);
    }
  }, []);

  async function fetchUser(token) {
    try {
      const res = await fetch('/api/auth/me', {
        headers: { Authorization: 'Bearer ' + token },
      });
      const data = await res.json();
      setUser(data.user);
    } catch {
      setMessage('Failed to fetch user profile.');
    }
  }

  return (
    <div className="max-w-sm mx-auto bg-black/20 border border-white/10 rounded-xl p-6 text-white space-y-4">
      <h2 className="text-xl font-semibold">Login with Google</h2>

      {!user && (
        <button
          onClick={() => (window.location.href = 'http://localhost:3001/auth/google')}
          className="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-md transition-colors"
        >
          Continue with Google
        </button>
      )}

      {user && (
        <div className="p-3 bg-emerald-500/10 rounded-lg border border-emerald-500/20">
          <p className="text-sm text-emerald-300">✅ Logged in as {user.name}</p>
          <p className="text-xs text-white/70 mt-1">{user.email}</p>
          <p className="text-xs text-white/70 mt-1">Provider: Google</p>
        </div>
      )}

      {message && <p className="text-amber-400 text-sm">{message}</p>}
    </div>
  );
}

Usage

// Example protected route using JWT
const jwt = require('jsonwebtoken');

function verifyToken(req, res, next) {
  const token = req.headers.authorization?.replace('Bearer ', '');
  if (!token) return res.status(401).json({ error: 'No token provided' });
  try {
    req.user = jwt.verify(token, process.env.JWT_SECRET);
    next();
  } catch {
    res.status(401).json({ error: 'Invalid token' });
  }
}

app.get('/api/me', verifyToken, (req, res) => {
  res.json({ message: 'Authenticated user', user: req.user });
});