OAuth and Third-Party Authentication (Google, GitHub, etc.)

🌍 Introduction

OAuth allows users to log in using third-party services like Google, GitHub, Facebook, or Twitter instead of creating new accounts.

✅ Why Use OAuth?

✔ Convenience – Users don’t need to remember another password.
✔ Security – No need to store passwords, reducing breach risks.
✔ Faster Signups – Users can sign up in one click.

In this lesson, we’ll:

• Understand how OAuth works.
• Implement Google Login in an Express.js API.
• Securely handle authentication tokens.

---

📌 1. How OAuth Authentication Works

✅ OAuth Flow (Google Example)

1️⃣ User clicks "Login with Google" → Redirects to Google.
2️⃣ Google asks for permission → User approves access.
3️⃣ Google sends an authorization code back to our API.
4️⃣ Our API exchanges the code for a Google access token.
5️⃣ We use the access token to get the user’s profile information.

🔹 No passwords are handled by our API!
🔹 The user’s identity is verified by Google, GitHub, etc.

---

📌 2. Setting Up Google OAuth in an Express.js API

✅ Step 1: Create a Google OAuth Client

1. Go to Google Cloud Console → https://console.cloud.google.com/
2. Create a new project.
3. Navigate to APIs & Services > Credentials.
4. Click "Create Credentials" > OAuth Client ID.
5. Choose Web Application.
6. Set the Authorized Redirect URI:

   http://localhost:3033/auth/google/callback

7. Copy Client ID and Client Secret.

---

✅ Step 2: Install Dependencies

Run:

npm install express passport passport-google-oauth20 dotenv

✔ passport → Authentication middleware
✔ passport-google-oauth20 → Google OAuth strategy
✔ dotenv → Store sensitive keys securely

---

✅ Step 3: Configure Google OAuth Strategy

Create auth/google.js:

const passport = require("passport");
const GoogleStrategy = require("passport-google-oauth20").Strategy;
require("dotenv").config();

passport.use(
  new GoogleStrategy(
    {
      clientID: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      callbackURL: "/auth/google/callback"
    },
    (accessToken, refreshToken, profile, done) => {
      return done(null, profile);
    }
  )
);

// Serialize user data into session
passport.serializeUser((user, done) => {
  done(null, user);
});

// Deserialize user data from session
passport.deserializeUser((user, done) => {
  done(null, user);
});

✅ Google handles authentication and returns user data.

---

✅ Step 4: Implement OAuth Routes

Modify routes/auth.js:

const express = require("express");
const passport = require("passport");

const router = express.Router();

// Route to start Google login
router.get("/google", passport.authenticate("google", { scope: ["profile", "email"] }));

// Callback route after Google authentication
router.get("/google/callback", passport.authenticate("google", { failureRedirect: "/" }), (req, res) => {
  res.json({ message: "Logged in successfully!", user: req.user });
});

// Logout Route
router.get("/logout", (req, res) => {
  req.logout(() => {
    res.json({ message: "Logged out successfully" });
  });
});

module.exports = router;

✅ Users are redirected to Google for authentication.
✅ Upon success, user data is retrieved and returned as JSON.

---

✅ Step 5: Register Routes in server.js

Modify server.js:

const express = require("express");
const session = require("express-session");
const passport = require("passport");
require("./auth/google"); // Load Google OAuth config

const app = express();

app.use(session({ secret: "supersecret", resave: false, saveUninitialized: true }));
app.use(passport.initialize());
app.use(passport.session());

const authRoutes = require("./routes/auth");
app.use("/auth", authRoutes);

app.listen(3033, () => console.log("Server running on port 3033"));

✅ Session-based authentication allows users to stay logged in.
✅ Passport manages authentication and stores user info in a session.

---

📌 3. Testing Google OAuth Login

✅ 1️⃣ Start the Server

Run:

node server.js

---

✅ 2️⃣ Log In with Google

Open http://localhost:3033/auth/google
✔ Redirects to Google login
✔ On success, redirects to /auth/google/callback

Response:

{
  "message": "Logged in successfully!",
  "user": {
    "id": "113456789012345678901",
    "displayName": "Alice Johnson",
    "emails": [{ "value": "alice@example.com" }]
  }
}

---

✅ 3️⃣ Logout

GET /auth/logout

✔ Logs out the user and clears session.

---

📌 4. Expanding OAuth to GitHub, Facebook, etc.

🔹 The process is the same for GitHub, Facebook, Twitter, etc.
🔹 Install the respective Passport strategy:

Provider	Install Command
GitHub	npm install passport-github2
Facebook	npm install passport-facebook

🔹 Example: GitHub OAuth

const GitHubStrategy = require("passport-github2").Strategy;

passport.use(
  new GitHubStrategy(
    {
      clientID: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
      callbackURL: "/auth/github/callback"
    },
    (accessToken, refreshToken, profile, done) => {
      return done(null, profile);
    }
  )
);

---

🎯 Summary

✅ OAuth allows users to log in using Google, GitHub, etc.
✅ Users authenticate via a third-party service instead of passwords.
✅ Implemented Google Login using Passport.js and Express.js.
✅ OAuth can be extended to GitHub, Facebook, and other providers.