TypeScript Tutorial: Creating a Simple Interactive Authentication System

Written by

learnmodernjavascript

in

In today’s digital world, securing user data and controlling access to resources are paramount. Authentication, the process of verifying a user’s identity, is the cornerstone of any secure web application. This tutorial will guide you through building a simple, yet functional, interactive authentication system using TypeScript. We’ll cover everything from setting up your project to implementing user registration, login, and logout functionalities. By the end, you’ll have a solid understanding of how to build a robust authentication system and be well-equipped to integrate it into your own projects.

Why Authentication Matters

Imagine a website without any security measures. Anyone could access user accounts, modify data, and wreak havoc. Authentication prevents unauthorized access, ensuring that only verified users can interact with sensitive information and functionalities. This is crucial for protecting user privacy, preventing fraud, and maintaining the integrity of your application.

Setting Up Your TypeScript Project

Before we dive into the code, let’s set up our TypeScript project. We’ll use Node.js and npm (Node Package Manager) for this. If you haven’t already, make sure you have Node.js installed on your system. Open your terminal or command prompt and follow these steps:

  1. Create a new project directory: mkdir authentication-system and navigate into it: cd authentication-system.
  2. Initialize a new npm project: npm init -y. This will create a package.json file.
  3. Install TypeScript and the TypeScript compiler: npm install typescript --save-dev.
  4. Initialize a TypeScript configuration file: npx tsc --init. This creates a tsconfig.json file, which allows you to configure how TypeScript compiles your code.

Your project structure should now look something like this:

authentication-system/
├── node_modules/
├── package.json
├── package-lock.json
├── tsconfig.json
└──

Creating User Interfaces (with basic HTML)

For this tutorial, we will create three simple HTML files: index.html (for the main application), register.html (for user registration), and login.html (for user login). We’ll keep the styling minimal to focus on the core authentication logic. Create these files in your project directory.

index.html

<!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>
</head>
<body>
    <h1>Welcome!</h1>
    <div id="content">
        <p>You are currently logged out.</p>
        <button id="loginButton">Login</button>
        <button id="registerButton">Register</button>
    </div>
    <script src="./dist/index.js"></script>
</body>
</html>

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
</head>
<body>
    <h1>Login</h1>
    <form id="loginForm">
        <label for="username">Username:</label><br>
        <input type="text" id="username" name="username" required><br>
        <label for="password">Password:</label><br>
        <input type="password" id="password" name="password" required><br><br>
        <button type="submit">Login</button>
    </form>
    <p id="loginMessage"></p>
    <script src="./dist/login.js"></script>
</body>
</html>

register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
</head>
<body>
    <h1>Register</h1>
    <form id="registerForm">
        <label for="username">Username:</label><br>
        <input type="text" id="username" name="username" required><br>
        <label for="password">Password:</label><br>
        <input type="password" id="password" name="password" required><br><br>
        <button type="submit">Register</button>
    </form>
    <p id="registerMessage"></p>
    <script src="./dist/register.js"></script>
</body>
</html>

Implementing Core Authentication Logic in TypeScript

Now, let’s create the TypeScript files that will handle the authentication logic. We’ll create three files: index.ts, login.ts, and register.ts. These files will handle the main application logic, the login functionality, and the registration functionality, respectively. We’ll also introduce a simple in-memory ‘database’ (an array) to store user credentials for demonstration purposes.

User Interface Definitions

Let’s define a simple interface for our users:

// src/types.ts
export interface User {
    username: string;
    password: string; // In a real application, NEVER store passwords in plain text!
}

index.ts (Main Application Logic)


// src/index.ts
import { User } from './types';

// Simulate a database (in a real app, use a database)
let users: User[] = [];
let isLoggedIn = false;

function displayContent() {
    const contentDiv = document.getElementById('content');
    if (!contentDiv) return;

    if (isLoggedIn) {
        contentDiv.innerHTML = `<p>Welcome, user!</p><button id="logoutButton">Logout</button>`;
        const logoutButton = document.getElementById('logoutButton');
        if (logoutButton) {
            logoutButton.addEventListener('click', logout);
        }
    } else {
        contentDiv.innerHTML = `<p>You are currently logged out.</p><button id="loginButton">Login</button><button id="registerButton">Register</button>`;
        const loginButton = document.getElementById('loginButton');
        const registerButton = document.getElementById('registerButton');

        if (loginButton) {
            loginButton.addEventListener('click', () => {
                window.location.href = 'login.html';
            });
        }
        if (registerButton) {
            registerButton.addEventListener('click', () => {
                window.location.href = 'register.html';
            });
        }
    }
}

function logout() {
    isLoggedIn = false;
    localStorage.removeItem('user');
    displayContent();
}

document.addEventListener('DOMContentLoaded', () => {
    // Check if user is already logged in
    const storedUser = localStorage.getItem('user');
    if (storedUser) {
        isLoggedIn = true;
    }
    displayContent();
});

login.ts (Login Functionality)


// src/login.ts
import { User } from './types';

// Simulate a database (in a real app, use a database)
let users: User[] = [];

function handleLogin(event: Event) {
    event.preventDefault();
    const form = event.target as HTMLFormElement;
    const username = (form.elements.namedItem('username') as HTMLInputElement).value;
    const password = (form.elements.namedItem('password') as HTMLInputElement).value;
    const loginMessage = document.getElementById('loginMessage');

    if (!loginMessage) return;

    // Simulate fetching users from a data store (replace with your actual data source)
    const storedUsersString = localStorage.getItem('users');
    users = storedUsersString ? JSON.parse(storedUsersString) : [];

    const user = users.find(u => u.username === username && u.password === password); // NEVER store passwords in plain text

    if (user) {
        loginMessage.textContent = 'Login successful!';
        localStorage.setItem('user', JSON.stringify(user));
        window.location.href = 'index.html'; // Redirect to the main page
    } else {
        loginMessage.textContent = 'Invalid username or password.';
    }
}

document.addEventListener('DOMContentLoaded', () => {
    const loginForm = document.getElementById('loginForm');
    if (loginForm) {
        loginForm.addEventListener('submit', handleLogin);
    }
});

register.ts (Registration Functionality)


// src/register.ts
import { User } from './types';

// Simulate a database (in a real app, use a database)
let users: User[] = [];

function handleRegistration(event: Event) {
    event.preventDefault();
    const form = event.target as HTMLFormElement;
    const username = (form.elements.namedItem('username') as HTMLInputElement).value;
    const password = (form.elements.namedItem('password') as HTMLInputElement).value;
    const registerMessage = document.getElementById('registerMessage');

    if (!registerMessage) return;

    // Simulate fetching users from a data store (replace with your actual data source)
    const storedUsersString = localStorage.getItem('users');
    users = storedUsersString ? JSON.parse(storedUsersString) : [];

    if (users.find(u => u.username === username)) {
        registerMessage.textContent = 'Username already exists.';
        return;
    }

    const newUser: User = { username, password }; // NEVER store passwords in plain text
    users.push(newUser);
    localStorage.setItem('users', JSON.stringify(users));
    registerMessage.textContent = 'Registration successful! You can now login.';
}

document.addEventListener('DOMContentLoaded', () => {
    const registerForm = document.getElementById('registerForm');
    if (registerForm) {
        registerForm.addEventListener('submit', handleRegistration);
    }
});

Compiling and Running Your Application

Now that we have our TypeScript files, we need to compile them into JavaScript files that the browser can understand. Open your terminal in the project directory and run the following command:

tsc

This command will use the TypeScript compiler (tsc) to generate JavaScript files in a dist directory. Your project structure should now include a dist folder with the compiled JavaScript files (index.js, login.js, and register.js).

To run the application, open index.html, login.html, and register.html in your web browser. You can either open the files directly from your file system or serve them using a simple web server (like the one provided by VS Code or a simple Python server: python -m http.server).

Step-by-Step Instructions

  1. Project Setup: Initialize a new npm project, install TypeScript, and create a tsconfig.json file.
  2. HTML Files: Create index.html, login.html, and register.html files with basic HTML structure and form elements.
  3. TypeScript Files: Create index.ts, login.ts, and register.ts files.
  4. User Interface Definition: Define the User interface in types.ts.
  5. Registration Logic (register.ts): Implement the handleRegistration function to collect user input, check for existing usernames, and store new user data in the in-memory ‘database’.
  6. Login Logic (login.ts): Implement the handleLogin function to retrieve user data, validate credentials, and redirect to the main page on successful login.
  7. Main Application Logic (index.ts): Implement the displayContent function to dynamically render content based on the login status (login/logout buttons, welcome message). Handle the logout functionality.
  8. Compilation: Use the TypeScript compiler (tsc) to compile the TypeScript files into JavaScript files.
  9. Testing: Open the HTML files in a web browser and test the registration, login, and logout functionalities.

Common Mistakes and How to Fix Them

  • Incorrect File Paths: Double-check your file paths in the HTML files and TypeScript imports. Typos can easily cause errors.
  • Incorrect Event Handling: Ensure you are correctly attaching event listeners to the correct HTML elements (e.g., the submit button in the login and registration forms).
  • Missing or Incorrect Types: Use type annotations correctly to avoid unexpected behavior. Make sure your types match the data you are working with.
  • CORS Issues: If you are making requests to an API from a different domain, you may encounter CORS (Cross-Origin Resource Sharing) issues. You’ll need to configure your server to allow requests from your domain. This is not covered in this basic tutorial.
  • Security: The most common mistake is storing passwords in plain text. ALWAYS hash and salt passwords before storing them in a real-world application. Also, validate and sanitize all user inputs to prevent security vulnerabilities like cross-site scripting (XSS) and SQL injection.

Key Takeaways

  • Authentication is Critical: Authentication is the foundation of secure web applications.
  • TypeScript Enhances Development: TypeScript provides type safety and better code organization.
  • Understanding the Basics: This tutorial provides a basic understanding of user registration, login, and logout.
  • Security Best Practices: Always hash and salt passwords and validate user inputs.
  • Adapt and Expand: This is a starting point. You can expand this system to include features like password resets, session management, and integration with a database.

FAQ

  1. Can I use this code in a production environment? This code is intended for educational purposes. It’s not production-ready due to security vulnerabilities (plain text passwords, no input validation). You should always use proper security measures in a real-world application.
  2. How do I store user data more securely? Use a database (e.g., PostgreSQL, MySQL, MongoDB) to store user data. Hash and salt passwords using a strong hashing algorithm (e.g., bcrypt, Argon2).
  3. How do I handle sessions? Use sessions to track user login status. Sessions typically involve storing a unique session ID in a cookie on the user’s browser and associating that ID with user data on the server.
  4. How can I improve the user interface? Use CSS frameworks (e.g., Bootstrap, Tailwind CSS) or component libraries (e.g., React, Angular, Vue.js) to create a more user-friendly interface.
  5. How can I add password reset functionality? Implement a password reset feature that sends a unique token to the user’s email address. The user can then use that token to reset their password.

Building an authentication system is a fundamental skill for any web developer. This tutorial provides a solid foundation for understanding the core concepts and implementing basic authentication features. Remember to prioritize security by never storing passwords in plain text and always validating user inputs. This simple system can be the basis for more complex and secure authentication implementations. As you expand your knowledge and skills, you’ll be able to build robust and secure authentication systems for any application.

More posts