Episode 3 of 21

Setting up an Express App

Create the Express application that will serve as the foundation for the OAuth login system — set up routes, views, and middleware.

Setting up an Express App

Let us create the Express application that will handle authentication, serve views, and manage user sessions.

Project Setup

mkdir oauth-app
cd oauth-app
npm init -y
npm install express ejs

Project Structure

oauth-app/
├── app.js
├── config/
│   └── keys.js
├── models/
│   └── user-model.js
├── routes/
│   ├── auth-routes.js
│   └── profile-routes.js
└── views/
    ├── home.ejs
    └── profile.ejs

The Express App

// app.js
const express = require('express');
const app = express();

// Set view engine
app.set('view engine', 'ejs');

// Home route
app.get('/', function(req, res) {
    res.render('home');
});

// Listen
app.listen(3000, function() {
    console.log('App listening on port 3000');
});

The Home View

<!-- views/home.ejs -->
<html>
<head>
    <title>OAuth App</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/auth/google">Login with Google</a></li>
        </ul>
    </nav>
    <h1>Welcome to the OAuth App</h1>
    <p>Log in with your Google account to see your profile.</p>
</body>
</html>

Key Takeaways

Express is the web framework; EJS is the template engine for rendering HTML
The project follows a clear structure: routes, views, models, and config
The home page has a "Login with Google" link that will trigger the OAuth flow
All authentication logic will go in separate route files for clean code organization