MERN Stack - User Authentication with OAuth 2.0

# .env (never commit this file)
GOOGLE_CLIENT_ID=1234567890-abc.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=replace-me
APP_URL=http://localhost:5173
SESSION_SECRET=output-of: openssl rand -hex 48
MONGODB_URI=mongodb://127.0.0.1:27017/mern-auth

mkdir mern-auth && cd mern-auth
npm init -y && npm pkg set type=module
npm install express express-session connect-mongo mongoose openid-client

// server/index.js  (run with: node --env-file=.env server/index.js)
import express from 'express';
import session from 'express-session';
import MongoStore from 'connect-mongo';
import mongoose from 'mongoose';
import authRoutes from './auth.js';
import { User } from './user.js';

await mongoose.connect(process.env.MONGODB_URI);
const app = express();
const isProd = process.env.NODE_ENV === 'production';

app.set('trust proxy', 1); // needed behind nginx or a platform proxy
app.use(express.json());
app.use(session({
  name: 'sid',
  secret: process.env.SESSION_SECRET,
  resave: false,
  saveUninitialized: false,
  store: MongoStore.create({ mongoUrl: process.env.MONGODB_URI, ttl: 7 * 24 * 3600 }),
  cookie: { httpOnly: true, secure: isProd, sameSite: 'lax', maxAge: 7 * 24 * 3600 * 1000 },
}));

app.use('/auth', authRoutes);

function requireUser(req, res, next) {
  if (!req.session.userId) return res.status(401).json({ error: 'Not signed in' });
  next();
}

app.get('/api/me', requireUser, async (req, res) => {
  const user = await User.findById(req.session.userId).select('name email picture role');
  if (!user) return res.status(401).json({ error: 'Not signed in' });
  res.json(user);
});

app.listen(process.env.PORT || 3000);

// server/user.js
import mongoose from 'mongoose';

const userSchema = new mongoose.Schema({
  provider: { type: String, required: true },   // 'google'
  providerId: { type: String, required: true }, // the 'sub' claim
  email: String,
  name: String,
  picture: String,
  role: { type: String, enum: ['user', 'admin'], default: 'user' },
  lastLoginAt: Date,
}, { timestamps: true });

userSchema.index({ provider: 1, providerId: 1 }, { unique: true });
export const User = mongoose.model('User', userSchema);

// server/auth.js
import express from 'express';
import * as client from 'openid-client';
import { User } from './user.js';

const router = express.Router();
const config = await client.discovery(
  new URL('https://accounts.google.com'),
  process.env.GOOGLE_CLIENT_ID,
  process.env.GOOGLE_CLIENT_SECRET,
);
const redirectUri = `${process.env.APP_URL}/auth/google/callback`;

router.get('/google', async (req, res) => {
  const codeVerifier = client.randomPKCECodeVerifier();
  const state = client.randomState();
  const nonce = client.randomNonce();
  req.session.oauth = { codeVerifier, state, nonce };

  const url = client.buildAuthorizationUrl(config, {
    redirect_uri: redirectUri,
    scope: 'openid email profile',
    code_challenge: await client.calculatePKCECodeChallenge(codeVerifier),
    code_challenge_method: 'S256',
    state,
    nonce,
  });
  res.redirect(url.href);
});

router.get('/google/callback', async (req, res, next) => {
  const pending = req.session.oauth;
  delete req.session.oauth;
  if (!pending) return res.redirect('/?login=expired');

  try {
    const tokens = await client.authorizationCodeGrant(
      config,
      new URL(req.originalUrl, process.env.APP_URL),
      { pkceCodeVerifier: pending.codeVerifier, expectedState: pending.state, expectedNonce: pending.nonce },
    );
    const claims = tokens.claims();
    if (!claims.email_verified) return res.redirect('/?login=unverified');

    const user = await User.findOneAndUpdate(
      { provider: 'google', providerId: claims.sub },
      { email: claims.email, name: claims.name, picture: claims.picture, lastLoginAt: new Date() },
      { upsert: true, new: true, setDefaultsOnInsert: true },
    );

    // New session ID after login prevents session fixation
    req.session.regenerate((err) => {
      if (err) return next(err);
      req.session.userId = user.id;
      res.redirect('/');
    });
  } catch (err) {
    next(err);
  }
});

router.post('/logout', (req, res, next) => {
  req.session.destroy((err) => {
    if (err) return next(err);
    res.clearCookie('sid').status(204).end();
  });
});

export default router;

npm create vite@latest client -- --template react

// client/vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: { proxy: { '/api': 'http://localhost:3000', '/auth': 'http://localhost:3000' } },
});

// client/src/App.jsx
import { useEffect, useState } from 'react';
const LOGIN_URL = '/auth/google';

export default function App() {
  const [user, setUser] = useState(undefined);

  useEffect(() => {
    fetch('/api/me').then((r) => (r.ok ? r.json() : null)).then(setUser);
  }, []);

  async function logout() {
    await fetch('/auth/logout', { method: 'POST' });
    setUser(null);
  }

  if (user === undefined) return <p>Loading…</p>;
  if (!user) return <a href={LOGIN_URL}>Sign in with Google</a>;
  return (
    <main>
      <img src={user.picture} alt="" width="48" height="48" />
      <h1>Welcome, {user.name}</h1>
      <button onClick={logout}>Sign out</button>
    </main>
  );
}