TypeScript Tutorial: Building a Simple Web-Based Authentication System

Written by

learnmodernjavascript

in

In today’s interconnected digital landscape, user authentication is paramount. From securing personal data to controlling access to sensitive information, a robust authentication system is the cornerstone of any web application. This tutorial will guide you, step-by-step, through building a simple, yet functional, web-based authentication system using TypeScript. We’ll explore the core concepts, implement essential features, and address common pitfalls. By the end, you’ll have a solid understanding of how authentication works and the practical skills to implement it in your own projects. This is not just about learning code; it’s about empowering you to build secure and reliable web applications.

Why Authentication Matters

Before diving into the code, let’s briefly discuss why authentication is so crucial. Consider the following scenarios:

  • Protecting User Data: Imagine a social media platform without authentication. Anyone could access and potentially misuse your personal information, messages, and posts.
  • Securing Financial Transactions: Online banking and e-commerce websites rely heavily on authentication to ensure that only authorized users can access their accounts and make transactions.
  • Controlling Access to Resources: Many applications provide access to specific features or content based on a user’s role or subscription level. Authentication is essential for managing access control.

Without proper authentication, your application is vulnerable to security breaches, data theft, and unauthorized access. Implementing a well-designed authentication system is a fundamental step towards building a trustworthy and secure web application.

Prerequisites

To follow this tutorial, you should have a basic understanding of:

  • HTML and CSS: You’ll need to know how to structure and style web pages.
  • JavaScript: Familiarity with JavaScript fundamentals, such as variables, functions, and objects, is necessary.
  • Node.js and npm: You’ll use Node.js and npm (Node Package Manager) to manage project dependencies. If you don’t have them installed, download them from the official Node.js website.
  • TypeScript: While we’ll explain the concepts as we go, a basic understanding of TypeScript syntax and types will be helpful.

Setting Up the Project

Let’s begin by setting up our project. Open your terminal or command prompt and navigate to your desired project directory. Then, follow these steps:

  1. Create a Project Directory: Create a new directory for your project (e.g., `authentication-system`).
  2. Initialize npm: Navigate into your project directory and run `npm init -y`. This will create a `package.json` file.
  3. Install TypeScript: Install TypeScript globally or locally. For local installation, run `npm install –save-dev typescript`.
  4. Initialize TypeScript: Run `npx tsc –init` to create a `tsconfig.json` file. This file configures the TypeScript compiler.
  5. Create Project Structure: Create the following directory structure:
    • src/: This will contain your TypeScript source code.
    • public/: This will contain your HTML, CSS, and JavaScript files (generated by the TypeScript compiler).

Your project structure should look similar to this:

authentication-system/
├── package.json
├── tsconfig.json
├── src/
│   └── index.ts
└── public/
    └── index.html

Building the Backend (TypeScript)

The backend will handle user registration, login, and session management. We’ll use TypeScript to define our data structures and logic. For simplicity, we’ll store user data in memory, but in a real-world scenario, you would typically use a database.

1. User Model

Let’s define a `User` interface to represent our user data. Create a file named `src/models/User.ts` with the following content:

// src/models/User.ts
export interface User {
 id: string;
 username: string;
 passwordHash: string; // Store password hashes, not plain text
}

2. Authentication Service

Create a file named `src/services/authService.ts`. This service will handle user registration and login. We’ll use a simple in-memory array to store users. In a production environment, you’d replace this with database interactions.


// src/services/authService.ts
import { User } from '../models/User';
import bcrypt from 'bcrypt'; // Import bcrypt for password hashing

// In-memory user store (replace with a database in a real application)
let users: User[] = [];

// Registration function
export async function registerUser(username: string, password: string): Promise<User | null> {
  // Validate input
  if (!username || !password) {
    return null; // Or throw an error
  }

  // Check if the username already exists
  if (users.some(user => user.username === username)) {
    return null; // Or throw an error
  }

  // Hash the password
  const saltRounds = 10;
  const salt = await bcrypt.genSalt(saltRounds);
  const passwordHash = await bcrypt.hash(password, salt);

  // Create a new user
  const newUser: User = {
    id: String(Date.now()), // Generate a unique ID
    username,
    passwordHash,
  };

  users.push(newUser);
  return newUser;
}

// Login function
export async function loginUser(username: string, password: string): Promise<User | null> {
  const user = users.find(user => user.username === username);

  if (!user) {
    return null; // User not found
  }

  // Compare the provided password with the stored hash
  const passwordMatch = await bcrypt.compare(password, user.passwordHash);

  if (!passwordMatch) {
    return null; // Incorrect password
  }

  return user;
}

// Get user by ID (for session management)
export function getUserById(id: string): User | undefined {
  return users.find(user => user.id === id);
}

Important: This code uses bcrypt to hash passwords. Install it using `npm install bcrypt`. Never store passwords in plain text.

3. Session Management (Simplified)

For this example, we’ll implement a very basic form of session management using the browser’s local storage. In a production environment, you’d typically use server-side sessions with cookies or JWTs (JSON Web Tokens).

Update `src/index.ts` to include the authentication logic:


// src/index.ts
import express, { Request, Response } from 'express';
import bodyParser from 'body-parser';
import { registerUser, loginUser, getUserById } from './services/authService';
import path from 'path';

const app = express();
const port = 3000;

app.use(bodyParser.json());
app.use(express.static('public')); // Serve static files from the 'public' directory

// Registration endpoint
app.post('/api/register', async (req: Request, res: Response) => {
  const { username, password } = req.body;
  const newUser = await registerUser(username, password);

  if (newUser) {
    res.status(201).json({ message: 'User registered successfully' });
  } else {
    res.status(400).json({ message: 'Registration failed' });
  }
});

// Login endpoint
app.post('/api/login', async (req: Request, res: Response) => {
  const { username, password } = req.body;
  const user = await loginUser(username, password);

  if (user) {
    // Simulate session management (in a real app, use cookies or JWTs)
    res.status(200).json({ message: 'Login successful', userId: user.id });
  } else {
    res.status(401).json({ message: 'Login failed' });
  }
});

// Protected route (example)
app.get('/api/profile', (req: Request, res: Response) => {
  // In a real application, you'd verify the session here
  const userId = req.headers['user-id']; // Retrieve user ID from header

  if (!userId) {
    return res.status(401).json({ message: 'Unauthorized' });
  }

  const user = getUserById(userId.toString());

  if (!user) {
    return res.status(401).json({ message: 'Unauthorized' });
  }

  res.json({ message: 'Profile data', username: user.username });
});

// Serve the index.html file for all other routes
app.get('*', (req: Request, res: Response) => {
    res.sendFile(path.join(__dirname, '..', 'public', 'index.html'));
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

Important: Install `express`, `body-parser`, and `@types/express` using `npm install express body-parser @types/express`. This code sets up a basic Express.js server to handle API requests.

Building the Frontend (HTML, CSS, JavaScript)

Now, let’s create the frontend. We’ll use HTML, CSS, and JavaScript to build the user interface for registration, login, and a protected profile page.

1. HTML Structure (`public/index.html`)

Create an `index.html` file in the `public` directory. This file will contain the basic structure of your application.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Authentication System</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div id="app">
  <!-- Registration Form -->
  <div id="register-form">
  <h2>Register</h2>
  <input type="text" id="register-username" placeholder="Username">
  <input type="password" id="register-password" placeholder="Password">
  <button id="register-button">Register</button>
  <p id="register-message"></p>
  </div>

  <!-- Login Form -->
  <div id="login-form">
  <h2>Login</h2>
  <input type="text" id="login-username" placeholder="Username">
  <input type="password" id="login-password" placeholder="Password">
  <button id="login-button">Login</button>
  <p id="login-message"></p>
  </div>

  <!-- Profile Section -->
  <div id="profile-section" style="display: none;">
  <h2>Profile</h2>
  <p id="profile-username"></p>
  <button id="logout-button">Logout</button>
  </div>
 </div>
 <script src="script.js"></script>
</body>
</html>

2. CSS Styling (`public/style.css`)

Create a `style.css` file in the `public` directory. This will hold the basic styling for your application. This is a basic example; feel free to customize it.

/* public/style.css */
body {
 font-family: sans-serif;
}

#app {
 width: 300px;
 margin: 50px auto;
 border: 1px solid #ccc;
 padding: 20px;
 border-radius: 5px;
}

input {
 width: 100%;
 padding: 10px;
 margin-bottom: 10px;
 border: 1px solid #ccc;
 border-radius: 4px;
}

button {
 width: 100%;
 padding: 10px;
 background-color: #4CAF50;
 color: white;
 border: none;
 border-radius: 4px;
 cursor: pointer;
}

button:hover {
 background-color: #3e8e41;
}

#profile-section {
 margin-top: 20px;
}

3. JavaScript Logic (`public/script.js`)

Create a `script.js` file in the `public` directory. This file will handle the client-side logic for interacting with the backend API.


// public/script.js
const registerUsername = document.getElementById('register-username');
const registerPassword = document.getElementById('register-password');
const registerButton = document.getElementById('register-button');
const registerMessage = document.getElementById('register-message');

const loginUsername = document.getElementById('login-username');
const loginPassword = document.getElementById('login-password');
const loginButton = document.getElementById('login-button');
const loginMessage = document.getElementById('login-message');

const profileSection = document.getElementById('profile-section');
const profileUsername = document.getElementById('profile-username');
const logoutButton = document.getElementById('logout-button');

// Function to make API requests
async function makeRequest(url, method = 'GET', body = null, headers = {}) {
  const options = {
    method,
    headers: {
      'Content-Type': 'application/json',
      ...headers,
    },
    body: body ? JSON.stringify(body) : null,
  };

  const response = await fetch(url, options);
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response.json();
}

// Registration
registerButton.addEventListener('click', async () => {
  const username = registerUsername.value;
  const password = registerPassword.value;

  try {
    const response = await makeRequest('/api/register', 'POST', { username, password });
    registerMessage.textContent = 'Registration successful';
    // Optionally, clear the form
    registerUsername.value = '';
    registerPassword.value = '';
  } catch (error) {
    registerMessage.textContent = 'Registration failed: ' + error.message;
  }
});

// Login
loginButton.addEventListener('click', async () => {
  const username = loginUsername.value;
  const password = loginPassword.value;

  try {
    const response = await makeRequest('/api/login', 'POST', { username, password });
    loginMessage.textContent = 'Login successful';

    // Store the user ID in local storage (basic session management)
    localStorage.setItem('userId', response.userId);

    // Fetch and display profile data
    await fetchProfile();

    // Optionally, clear the form
    loginUsername.value = '';
    loginPassword.value = '';
  } catch (error) {
    loginMessage.textContent = 'Login failed: ' + error.message;
  }
});

// Fetch Profile
async function fetchProfile() {
  const userId = localStorage.getItem('userId');
  if (!userId) {
    profileSection.style.display = 'none';
    return;
  }

  try {
    const response = await makeRequest('/api/profile', 'GET', null, { 'user-id': userId });
    profileUsername.textContent = 'Welcome, ' + response.username;
    profileSection.style.display = 'block';
  } catch (error) {
    console.error('Error fetching profile:', error);
    profileSection.style.display = 'none';
    loginMessage.textContent = 'Session expired. Please log in again.'; // Or a more user-friendly message
    localStorage.removeItem('userId');
  }
}

// Logout
logoutButton.addEventListener('click', () => {
  localStorage.removeItem('userId');
  profileSection.style.display = 'none';
  loginMessage.textContent = ''; // Clear login message
});

// Check if user is already logged in on page load
document.addEventListener('DOMContentLoaded', () => {
  fetchProfile();
});

Running the Application

Now that you’ve set up the backend and frontend, let’s run the application. Follow these steps:

  1. Compile TypeScript: In your terminal, navigate to your project directory and run `npx tsc`. This will compile your TypeScript code into JavaScript in the `public` directory.
  2. Start the Server: Open a new terminal window or tab and run `node src/index.js` to start the Node.js server.
  3. Access the Application: Open your web browser and go to `http://localhost:3000`. You should see the registration and login forms.

You can now register a user, log in, and see the profile page. This is a simplified example, but it demonstrates the core principles of authentication.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them when building authentication systems:

  • Storing Passwords in Plain Text: This is a critical security vulnerability. Always hash passwords before storing them in your database. Use a strong hashing algorithm like bcrypt.
  • Insufficient Input Validation: Always validate user input on both the client and server sides. This prevents malicious users from injecting harmful data. Check for empty fields, invalid characters, and other potential issues.
  • Weak Session Management: The simple example above uses local storage for session management. This is not secure for production. Use secure cookies, JWTs, or server-side sessions. Be sure to set the `HttpOnly` and `Secure` flags on your cookies.
  • Cross-Site Scripting (XSS) Vulnerabilities: If you’re dynamically generating HTML on the server-side, be careful to sanitize user input to prevent XSS attacks.
  • Cross-Site Request Forgery (CSRF) Vulnerabilities: Protect against CSRF attacks by using CSRF tokens in your forms.
  • Ignoring HTTPS: Always use HTTPS in production to encrypt the communication between the client and server. This protects sensitive data from being intercepted.
  • Not Using Rate Limiting: Implement rate limiting to prevent brute-force attacks and denial-of-service attacks.
  • Not Keeping Dependencies Updated: Regularly update your dependencies to patch security vulnerabilities.

Key Takeaways

  • Authentication is a critical security measure for web applications.
  • TypeScript can be effectively used to build both the backend and frontend of an authentication system.
  • Always hash passwords before storing them.
  • Implement robust input validation and session management.
  • Prioritize security best practices to protect your users’ data.

FAQ

  1. What is the difference between authentication and authorization?
    • Authentication is the process of verifying a user’s identity (e.g., username and password).
    • Authorization is the process of determining what a user is allowed to access after they have been authenticated (e.g., viewing a specific page or performing a specific action).
  2. Why is password hashing important? Password hashing transforms a user’s password into an irreversible string of characters (the hash). This is crucial because if a database is compromised, attackers won’t be able to retrieve the original passwords, only the hashes.
  3. What are JWTs and when should I use them? JWTs (JSON Web Tokens) are a standard for securely transmitting information between parties as a JSON object. They are often used for authentication and authorization. Use JWTs when you need a stateless authentication mechanism, such as in single-page applications or APIs.
  4. How can I improve the security of my authentication system? Implement multi-factor authentication (MFA), regularly audit your code for vulnerabilities, use a Web Application Firewall (WAF), and stay up-to-date with security best practices.
  5. Where can I learn more about web security? Resources like OWASP (Open Web Application Security Project) and NIST (National Institute of Standards and Technology) provide comprehensive information on web security best practices and common vulnerabilities.

Building a secure authentication system is an ongoing process. This tutorial provides a foundational understanding, but it’s essential to continuously learn and adapt to the ever-evolving landscape of web security. By implementing the principles and best practices outlined in this article, you’ll be well on your way to creating secure and reliable web applications that protect your users and their data. Remember, security is not a one-time task; it’s a continuous commitment to vigilance and improvement.

More posts