Episode 21 of 21

Adding a Profile Thumbnail

Display the user Google profile photo on the profile page — pull the thumbnail URL from your database and render it in the view.

Adding a Profile Thumbnail

Google provides a profile photo URL for each user. You already saved it to MongoDB as thumbnail. Now let us display it on the profile page.

The Thumbnail URL

// From Google profile:
profile.photos[0].value
// Returns something like:
// "https://lh3.googleusercontent.com/a-/photo.jpg"

// We saved this in the user model:
{
    username: 'Shaun Pelling',
    googleId: '123456789',
    thumbnail: 'https://lh3.googleusercontent.com/a-/photo.jpg'
}

Updated Profile View

<!-- views/profile.ejs -->
<html>
<head>
    <title>Profile - OAuth App</title>
    <style>
        .profile-card {
            max-width: 400px;
            margin: 40px auto;
            padding: 30px;
            text-align: center;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .profile-card img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/auth/logout">Logout</a></li>
        </ul>
    </nav>
    <div class="profile-card">
        <img src="<%= user.thumbnail %>" alt="Profile Photo">
        <h2><%= user.username %></h2>
        <p>Welcome to your profile page!</p>
    </div>
</body>
</html>

Showing Thumbnail in the Navbar

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <% if (user) { %>
            <li><img src="<%= user.thumbnail %>" class="nav-thumb"></li>
            <li><a href="/profile"><%= user.username %></a></li>
            <li><a href="/auth/logout">Logout</a></li>
        <% } else { %>
            <li><a href="/auth/google">Login with Google</a></li>
        <% } %>
    </ul>
</nav>

Series Complete

Congratulations! You have built a complete OAuth login system. Here is what you accomplished:

Feature	Implementation
OAuth Login	Passport.js with Google Strategy
User Storage	MongoDB with Mongoose
Sessions	cookie-session with serialize/deserialize
Auth Guard	Middleware checking req.user
Profile Page	EJS template with user data and thumbnail
Logout	req.logout() + redirect
Security	Keys file excluded from Git

Key Takeaways

The thumbnail URL from Google is stored in MongoDB and rendered in the view
Use <img src="<%= user.thumbnail %>"> in EJS to display the photo
The complete OAuth flow: Google login → save user → session → profile with photo
This pattern works for any OAuth provider — just swap the strategy