064
LVL 03 — MID DEVELOPERSESSION 064DAY 64

O AUTH

🎫 PIXELCRAFT-051
Feature | 🟠 Hard | Priority: 🟡 Medium

Users don't want to create yet another account. Add "Login with Google" so they can authenticate with their existing Google account.
CONCEPTS.UNLOCKED
🔑
OAuth 2.0
Delegated authorization — "let Google verify who I am." Instead of storing passwords (risky), delegate to Google (billions invested in security).
🔄
The OAuth Flow
Redirect to Google → user approves → Google redirects back with code → exchange code for token → get user info. Multiple redirects for security: the user never gives YOUR app their Google password.
🛂
Passport.js
Authentication middleware for Node.js. 500+ strategies: Google, GitHub, Facebook, Twitter. Plug in a strategy, configure credentials, handle the callback.
🎨
Social Login UX
"Login with Google" button, seamless account creation. One click, no password, instant access. Every modern SaaS app offers this experience.
🔗
Account Linking
What if someone registered with email, then tries Google login with the same email? Link the accounts — find existing user by email, add googleId, same account.
🏢
SSO & Enterprise Auth
OAuth is the foundation of Single Sign-On (SSO), API integrations (GitHub, Stripe), and enterprise authentication (SAML, OIDC). A universal pattern.
HANDS-ON.TASKS
01
Set Up Google OAuth Credentials

Go to Google Cloud Console → APIs & Services → Credentials → Create OAuth 2.0 Client ID. Set the authorized redirect URI to /api/auth/google/callback.

02
Configure Passport Google Strategy
npm install passport passport-google-oauth20 const passport = require('passport'); const GoogleStrategy = require('passport-google-oauth20').Strategy; passport.use(new GoogleStrategy({ clientID: process.env.GOOGLE_CLIENT_ID, clientSecret: process.env.GOOGLE_CLIENT_SECRET, callbackURL: '/api/auth/google/callback', }, async (accessToken, refreshToken, profile, done) => { try { let user = await User.findOne({ googleId: profile.id }); if (!user) { // Check if email exists (link accounts) user = await User.findOne({ email: profile.emails[0].value }); if (user) { user.googleId = profile.id; await user.save(); } else { user = await User.create({ name: profile.displayName, email: profile.emails[0].value, googleId: profile.id, avatar: profile.photos[0]?.value, }); } } done(null, user); } catch (error) { done(error); } }));
03
Auth Routes
app.get('/api/auth/google', passport.authenticate('google', { scope: ['profile', 'email'] }) ); app.get('/api/auth/google/callback', passport.authenticate('google', { session: false }), (req, res) => { const token = jwt.sign( { userId: req.user._id }, process.env.JWT_SECRET, { expiresIn: '7d' } ); res.redirect( `${process.env.FRONTEND_URL}` + `/auth/callback?token=${token}` ); } );
04
Frontend: Google Login Button & Callback

"Login with Google" button that redirects to the OAuth flow. Handle the callback: extract token from URL, store it, redirect to gallery.

05
Close the Ticket
git switch -c feature/PIXELCRAFT-051-oauth git add server/ src/ git commit -m "Add Google OAuth with Passport.js (PIXELCRAFT-051)" git push origin feature/PIXELCRAFT-051-oauth # PR → Review → Merge → Close ticket ✅
CS.DEEP-DIVE

OAuth separates authentication from your application.

The "authorization code" flow has multiple redirects for security.

// The OAuth pattern everywhere:

SSO systems     → Single Sign-On
API integrations → GitHub, Stripe
Enterprise auth → SAML, OIDC

// Instead of storing passwords (risky —
// if your DB is breached, passwords leak)
// you delegate to Google (they have
// billions invested in security).
"OAuth Lab"
[A]Add "Login with GitHub": install passport-github2, configure a GitHub OAuth app, implement the strategy. Now users have two social login options.
[B]Add profile page showing user info: name, email, avatar (from Google), login method (email/Google). Allow editing name and avatar.
[C]Research PKCE (Proof Key for Code Exchange) — the modern secure OAuth flow for SPAs. How does it prevent authorization code interception? Why is it now recommended over the basic flow?
REF.MATERIAL
ARTICLE
OAuth Community
The specification: grant types, flows, tokens, and security considerations. The authoritative OAuth 2.0 resource.
OAUTHOFFICIALESSENTIAL
VIDEO
Java Brains
Clear visual explanation of the OAuth flow: authorization code, access tokens, refresh tokens, and the redirect dance.
OAUTHVISUAL
ARTICLE
Jared Hanson
Official Passport Google strategy: configuration, scopes, profile parsing, and integration with Express.
PASSPORTGOOGLEOFFICIAL
VIDEO
Fireship
Ultra-fast OAuth overview: the problem it solves, the flow, access tokens vs refresh tokens.
OAUTHQUICK
ARTICLE
Wikipedia
History, grant types, security concerns, and the evolution from OAuth 1.0 to 2.0. The CS theory behind delegated authorization.
OAUTHTHEORYCS
// LEAVE EXCITED BECAUSE
"Login with Google" works! One click, no password, instant account creation. Every modern SaaS app has this, and you built it.