TypeScript Tutorial: Building a Simple Interactive Authentication System

Written by

learnmodernjavascript

in

In today’s digital landscape, securing user data is paramount. Authentication, the process of verifying a user’s identity, is the cornerstone of any application that handles sensitive information. This tutorial will guide you through building a simple, yet functional, interactive authentication system using TypeScript. We’ll cover the core concepts, from user registration and login to session management, equipping you with the knowledge to protect your applications and build trust with your users.

Why Authentication Matters

Imagine a world without authentication. Anyone could access your personal data, make purchases under your name, or even impersonate you. Authentication prevents unauthorized access, ensuring that only verified users can interact with your application’s protected resources. This is crucial for:

  • Data Security: Protecting sensitive user information like passwords, personal details, and financial data.
  • User Experience: Providing a personalized experience where users can access their preferences, settings, and content.
  • Compliance: Meeting regulatory requirements for data privacy and security.
  • Trust and Reputation: Building user trust by demonstrating a commitment to security.

Prerequisites

Before we dive in, ensure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running the TypeScript code.
  • A basic understanding of TypeScript: Familiarity with TypeScript syntax, types, and classes will be helpful. If you’re new to TypeScript, consider reviewing the basics before proceeding.
  • A code editor: Visual Studio Code (VS Code) is highly recommended, but you can use any editor of your choice.

Setting Up the Project

Let’s start by setting up our project. Open your terminal and create a new directory for your project:

mkdir typescript-auth-system
cd typescript-auth-system

Next, initialize a new Node.js project:

npm init -y

This command creates a package.json file, which will manage your project’s dependencies. Now, install TypeScript and the necessary type definitions:

npm install typescript --save-dev
npm install @types/node --save-dev

The --save-dev flag indicates that these are development dependencies. Create a tsconfig.json file to configure the TypeScript compiler:

npx tsc --init

This command generates a tsconfig.json file with default settings. You can customize these settings based on your project requirements. For this tutorial, we’ll keep the default settings, but you might want to adjust the outDir and module options later. Finally, create a src directory to hold your TypeScript source files:

mkdir src

User Model and Data Storage

We’ll start by defining a User class to represent our users. Create a file named src/user.ts and add the following code:

// src/user.ts

export class User {
  public id: string;
  public username: string;
  public passwordHash: string; // Store password hashes, not plain text
  public email: string;

  constructor(id: string, username: string, passwordHash: string, email: string) {
    this.id = id;
    this.username = username;
    this.passwordHash = passwordHash;
    this.email = email;
  }
}

This class has properties for user ID, username, password hash (crucially, we store a hash, not the actual password), and email. For simplicity, we’ll use an in-memory storage for our users. In a real-world application, you would use a database like PostgreSQL, MongoDB, or MySQL.

Create a file named src/userStorage.ts and add the following code:

// src/userStorage.ts
import { User } from './user';

export class UserStorage {
  private users: User[] = [];

  addUser(user: User): void {
    this.users.push(user);
  }

  getUserByUsername(username: string): User | undefined {
    return this.users.find(user => user.username === username);
  }

  // Add more methods for finding users by email, id etc.
}

This class provides methods to add users and retrieve users by username. Note that in a production environment, you’d replace the users array with a database connection.

Hashing Passwords

Storing passwords in plain text is a major security risk. We’ll use a hashing algorithm to securely store passwords. We’ll use the built-in crypto module in Node.js, which provides cryptographic functionality.

Create a file named src/authUtils.ts and add the following code:

// src/authUtils.ts
import * as crypto from 'crypto';

// Generate a salt
function generateSalt(): string {
  return crypto.randomBytes(16).toString('hex');
}

// Hash a password with a salt
export function hashPassword(password: string, salt: string): string {
  const saltedPassword = salt + password;
  return crypto.createHash('sha256').update(saltedPassword).digest('hex');
}

// Function to compare a password with a hash
export function verifyPassword(password: string, salt: string, hashedPassword: string): boolean {
  const hashedPasswordToCheck = hashPassword(password, salt);
  return hashedPasswordToCheck === hashedPassword;
}

This code includes functions to:

  • Generate a salt (a random string used to make the hash more secure).
  • Hash a password using the SHA-256 algorithm and a salt.
  • Verify a password by comparing the hash of the entered password with the stored hash.

Implementing Registration

Now, let’s implement the user registration functionality. Create a file named src/authService.ts and add the following code:

// src/authService.ts
import { User } from './user';
import { UserStorage } from './userStorage';
import { hashPassword, generateSalt, verifyPassword } from './authUtils';
import { v4 as uuidv4 } from 'uuid';

export class AuthService {
  private userStorage: UserStorage;

  constructor(userStorage: UserStorage) {
    this.userStorage = userStorage;
  }

  register(username: string, password: string, email: string): User | string {
    if (this.userStorage.getUserByUsername(username)) {
      return 'Username already exists';
    }

    const salt = generateSalt();
    const passwordHash = hashPassword(password, salt);
    const newUser = new User(uuidv4(), username, passwordHash, email);
    this.userStorage.addUser(newUser);
    return newUser;
  }

  login(username: string, password: string): User | string {
    const user = this.userStorage.getUserByUsername(username);
    if (!user) {
      return 'Invalid username or password';
    }

    const salt = user.passwordHash.substring(0, 32); // Extract salt from stored hash
    const hashedPasswordToCheck = hashPassword(password, salt);

    if (hashedPasswordToCheck !== user.passwordHash) {
      return 'Invalid username or password';
    }

    return user;
  }
}

This code includes the following key parts:

  • Dependencies: Imports necessary modules like User, UserStorage, and the hashing functions.
  • Registration:
    • Checks if the username already exists.
    • Generates a salt.
    • Hashes the password using the salt.
    • Creates a new User object.
    • Adds the user to the UserStorage.
  • Login:
    • Retrieves the user by username.
    • Compares the entered password (hashed with the stored salt) with the stored password hash.
    • Returns the user object if the credentials are valid, or an error message if not.

Implementing Login

Let’s add the login functionality to the AuthService. We’ll modify the src/authService.ts file to include a login method.

// src/authService.ts (updated)
import { User } from './user';
import { UserStorage } from './userStorage';
import { hashPassword, generateSalt, verifyPassword } from './authUtils';
import { v4 as uuidv4 } from 'uuid';

export class AuthService {
  private userStorage: UserStorage;

  constructor(userStorage: UserStorage) {
    this.userStorage = userStorage;
  }

  register(username: string, password: string, email: string): User | string {
    if (this.userStorage.getUserByUsername(username)) {
      return 'Username already exists';
    }

    const salt = generateSalt();
    const passwordHash = hashPassword(password, salt);
    const newUser = new User(uuidv4(), username, passwordHash, email);
    this.userStorage.addUser(newUser);
    return newUser;
  }

  login(username: string, password: string): User | string {
    const user = this.userStorage.getUserByUsername(username);
    if (!user) {
      return 'Invalid username or password';
    }

    const salt = user.passwordHash.substring(0, 32); // Extract salt from stored hash
    const hashedPasswordToCheck = hashPassword(password, salt);

    if (hashedPasswordToCheck !== user.passwordHash) {
      return 'Invalid username or password';
    }

    return user;
  }
}

The login function retrieves the user by username, hashes the entered password using the salt extracted from the stored password hash, and compares it with the stored hash. If the hashes match, it returns the user object; otherwise, it returns an error message.

Session Management (Simplified)

In a real-world application, session management is crucial for keeping users logged in. For this simplified example, we’ll use a very basic approach: We’ll store the logged-in user’s ID in a global variable. In a production environment, you’d use cookies, local storage, or a server-side session management mechanism (e.g., using a library like express-session with a database to store session data).

Add a file named src/session.ts to manage the session:


// src/session.ts
let loggedInUserId: string | null = null;

export function setLoggedInUserId(userId: string | null): void {
  loggedInUserId = userId;
}

export function getLoggedInUserId(): string | null {
  return loggedInUserId;
}

export function isLoggedIn(): boolean {
  return loggedInUserId !== null;
}

This simplified session management allows us to track whether a user is logged in. In a real application, you would use more robust techniques.

Creating a Simple CLI

To interact with our authentication system, we’ll create a simple command-line interface (CLI). Create a file named src/index.ts and add the following code:

// src/index.ts
import { AuthService } from './authService';
import { UserStorage } from './userStorage';
import * as readline from 'readline';
import { setLoggedInUserId, isLoggedIn, getLoggedInUserId } from './session';

const userStorage = new UserStorage();
const authService = new AuthService(userStorage);

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

function askQuestion(query: string): Promise {
  return new Promise(resolve => {
    rl.question(query, resolve);
  });
}

async function main() {
  while (true) {
    if (isLoggedIn()) {
      console.log(`
Welcome, User ID: ${getLoggedInUserId()}!`);
      console.log('1. Logout');
      console.log('2. Exit');
      const choice = await askQuestion('Choose an action: ');
      if (choice === '1') {
        setLoggedInUserId(null);
        console.log('Logged out successfully.');
      } else if (choice === '2') {
        rl.close();
        break;
      } else {
        console.log('Invalid choice.');
      }
    } else {
      console.log('nAuthentication Menu:');
      console.log('1. Register');
      console.log('2. Login');
      console.log('3. Exit');

      const choice = await askQuestion('Choose an option: ');

      if (choice === '1') {
        const username = await askQuestion('Username: ');
        const password = await askQuestion('Password: ');
        const email = await askQuestion('Email: ');
        const result = authService.register(username, password, email);
        if (typeof result === 'string') {
          console.log(result);
        } else {
          console.log('Registration successful!');
        }
      } else if (choice === '2') {
        const username = await askQuestion('Username: ');
        const password = await askQuestion('Password: ');
        const result = authService.login(username, password);
        if (typeof result === 'string') {
          console.log(result);
        } else {
          setLoggedInUserId(result.id);
          console.log('Login successful!');
        }
      } else if (choice === '3') {
        rl.close();
        break;
      } else {
        console.log('Invalid choice.');
      }
    }
  }
}

main();

This code:

  • Imports the necessary modules.
  • Creates instances of UserStorage and AuthService.
  • Uses readline to create a simple CLI.
  • Presents a menu for registration, login, and exit.
  • Calls the appropriate methods from AuthService based on the user’s choice.
  • Manages the session using the setLoggedInUserId, getLoggedInUserId, and isLoggedIn functions.

Running the Application

To run the application, compile the TypeScript code and then execute it. Open your terminal and run the following commands:

tsc
node dist/index.js

The tsc command compiles the TypeScript code into JavaScript, and the node dist/index.js command runs the compiled JavaScript file. You should now see the authentication menu in your terminal. You can register a new user, log in, and log out. Experiment with different scenarios to test the functionality.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Storing Plaintext Passwords: Never store passwords in plain text. Always hash them using a strong hashing algorithm like SHA-256 with a salt. Our example demonstrates this.
  • Weak Salt Generation: Use a cryptographically secure random number generator to generate salts. The crypto.randomBytes() method in Node.js is suitable.
  • Ignoring Input Validation: Always validate user input to prevent vulnerabilities like SQL injection and cross-site scripting (XSS) attacks. This example does not have input validation, but it is a critical step in a real-world application.
  • Insufficient Session Management: Our simplified example uses a basic approach. Use secure session management techniques like cookies with secure flags, HTTP-only flags, and server-side session storage in a production environment.
  • Not Using HTTPS: Always use HTTPS to encrypt the communication between the client and the server, protecting sensitive data from interception.
  • Using outdated libraries: Regularly update your dependencies to address security vulnerabilities.

Key Takeaways

  • Authentication is Crucial: It’s the foundation of secure applications.
  • Hashing Passwords is Essential: Never store passwords in plain text.
  • Session Management is Important: Implement secure session management techniques.
  • Input Validation is Necessary: Sanitize and validate all user inputs.
  • Stay Updated: Keep your dependencies and security practices up-to-date.

FAQ

Here are some frequently asked questions about authentication:

  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 do after they have been authenticated (e.g., access specific resources).
  2. What is a salt? A salt is a random string added to a password before hashing. It makes it harder for attackers to crack passwords using precomputed tables (rainbow tables).
  3. Why is HTTPS important? HTTPS encrypts the communication between the client and the server, protecting sensitive data (like passwords) from being intercepted by third parties.
  4. What are some common authentication methods? Besides username/password, common methods include multi-factor authentication (MFA), OAuth, and social login.
  5. What is the best way to store session data? The best way to store session data depends on the application’s requirements. Options include cookies (with secure and HTTP-only flags), server-side storage (e.g., in a database or cache), and token-based authentication (e.g., JWT).

Building a robust authentication system is an ongoing process. You must stay informed about the latest security threats and best practices. By following the guidelines in this tutorial, you’ve taken the first steps toward securing your applications and protecting user data. Remember, security is not a one-time task; it’s a continuous process of learning, adapting, and improving.

More posts