A simple authentication mechanism in Total.js

In this blogpost I'll be sharing my journey of learning Total.js and implementing a simple authentication mechanism in a web application. Over the past week, I've delved into the Total.js framework, exploring its features and capabilities. One of the key aspects I focused on was building a basic application that includes user authentication.

Total.js is a powerful Node.js framework that provides a comprehensive set of tools for building web applications. It emphasizes simplicity, speed, and modularity, making it an excellent choice for both beginners and experienced developers.

In this blog post, I'll walk you through the process of setting up a Total.js application, creating routes and controllers, implementing authentication using cookies, and configuring views for the frontend. By the end of this journey, you'll have a better understanding of how Total.js works and how to build secure web applications with it.

So, without further ado, let's dive into the exciting world of Total.js!

Table of Contents

1. Introduction
2. Setting Up Total.js
3. Creating Routes and Controllers
4. Implementing Authentication
5. Configuring Views
6. Conclusion

Setting Up Total.js

Before diving into building our application, we need to set up Total.js and prepare our development environment. Here are the steps to get started:

1. Project Initialization

First, we need to create a Total.js project You can do this by using npm (Node Package Manager). Open your terminal and run the following command:

npm init -y

2. Installation

Next, let's install a Total.js project. Navigate to your desired project directory in the terminal and run the following command:

npm install total4

This command will prompt you to provide some basic information about your project, such as the project name and description. Once you've provided the necessary information, Total.js will create the project structure for you.

3. Project Structure

After initialization, your project directory should contain the following structure:

- controllers/
- definitions/
- modules/
- views/
- config
- index.js
- package.json

The controllers directory is where we'll define our route handlers, the definitions directory is where we'll define authentication and authorization logic, and the views directory is where we'll store our HTML templates.

4. Starting the Server

The start script is index.js

require('total4/debug')({ port: 4000 });

To start the Total.js server, run the following in the terminal:

node index.js

This will start the server, and you should see a message indicating that the server is running.

Now that we've set up Total.js, we're ready to start building our application!

Creating Routes and Controllers

Now that we have our Total.js project set up, let's start defining routes and controllers to handle external request. In Total.js, routes are defined in the controllers directory, and each route is associated with a controller function.

1. Define Routes

Open the controllers/default.js file in your project directory. Here, we'll define routes for our login, home page, submission, and logout functionalities using the ROUTE function provided by Total.js.

exports.install = function () {
    ROUTE('+GET /*', home); //"+" char means that all request must be authorized ( read more: https://docs.totaljs.com/total4/40839001oc51c/)
    ROUTE('-GET /*', login);// "-" char means that all request must be unauthorized
    ROUTE('-POST /submit/', submit);
    ROUTE('+GET /logout/', logout);
}

2. Implement Controller Functions

Next, let's implement the controller functions for each route. These functions will contain the logic for rendering views, handling form submissions, and managing user sessions.

But the first all let's define the parameters related to the cookies to authentication such as cookie name, and cookie secret.

// /config
cookie           : ssid
cookie_secret    : 123

// /controllers/default.js
function home() {
    var self = this;  // "this" is a "Controller" instance
    var user = self.user; // Gets the authorized user instance
    self.view('index');
}

function login() {
    var self = this;
    self.view('login');
}

function submit(){
    var self = this;
    var form = self.body; // Gets the parsed data from the request body. Only for the POST/PUT/DELETE methods.
    self.cookie(CONF.cookie, CONF.token, '30 days'); // Writes cookies.
    self.redirect('/');
}

function logout(){
    var self = this;
    self.cookie(CONF.cookie, '', '-1 days'); // overwrite cookies.
    self.redirect('/login');
}

In these functions, we're rendering views using self.view, handling form submissions, and managing user sessions using cookies.

With routes and controllers in place, our Total.js application is now capable of handling different user actions and rendering appropriate views.

Implementing Authentication

Authentication is a crucial aspect of web applications to ensure that only authorized users can access certain functionalities. In our Total.js application, we'll implement a simple authentication mechanism using cookies.

1. Define Authentication Logic

We'll start by defining the authentication logic in a separate file, typically named auth.js within the definitions directory. This logic will check for a valid token in the user's cookie and grant access based on that token.

// definitions/auth.js
const USER = { name: 'Dah Shariifah', email: 'ds@totaljs.com' };
AUTH(function($) {

    var token = $.cookie(CONF.cookie); // Read the cookies 
    if (!token || token != CONF.token) {
        $.invalid();
        return;
    }

    $.success(USER);
});

2. Configure Authentication Parameters

In your project's configuration file (typically named config), define parameters related to authentication such as the token.

// config
token            : 1223333333323123131231231231231231231231243434
name             : TEST APP

Configuring Views

Views play a crucial role in presenting the user interface of our web application. In Total.js, views are typically HTML templates that are rendered dynamically based on the routes and controller logic.

1. Layout Template

We'll start by creating a layout template that serves as the foundation for our application's UI. This layout will include common elements such as headers, navigation menus, and footers.

<!-- views/layout.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    <ul class="nav justify-content-end">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/contact/">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/about/">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-danger" href="/logout">LOGOUT</a>
        </li>
      </ul>
    @{body}
</body>
</html>

2. Individual Views

Now, we'll create individual views for different pages of our application, such as the home page and login page.

<!-- views/index.html -->
<h1>Welcome</h1>

<!-- views/login.html -->
@{layout('')}
<!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>
    <h2>Inscription</h2>
        <form action="/submit" method="post">
            <div>
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div>
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div>
                <button type="submit">Login</button>
            </div>  
        </form>
</body>
</html>

3. Render Views in Controllers

Finally, render the views within the controller functions using the self.view method.

function home() {
    var self = this;
    var user = self.user;
    self.view('index');
}

function login() {
    var self = this;
    self.view('login');
}

With these steps, we've configured the views for our Total.js application, providing a structured and visually appealing user interface.

Conclusion

In this blog post, we've explored the basics of building a web application with Total.js, focusing on implementing user authentication and configuring views. Throughout this journey, we've covered several key aspects:

• Setting Up Total.js: We started by installing Total.js and initializing a project, ensuring that our development environment is ready to go.

• Creating Routes and Controllers: We defined routes and associated controller functions to handle different user actions such as logging in, submitting forms, and logging out.

• Implementing Authentication: We implemented a simple authentication mechanism using cookies and defined authentication logic to restrict access to certain routes.

• Configuring Views: We configured layout templates and individual views to provide a cohesive and visually appealing user interface for our application.

By following these steps, we've built a solid foundation for our Total.js application, laying the groundwork for further development and expansion. Total.js offers a powerful yet straightforward framework for building web applications, making it an excellent choice for developers of all levels.

As you continue your journey with Total.js, don't hesitate to explore its extensive documentation and community resources to unlock even more possibilities for your projects.

• Total.js Enterprise: Total.js Enterprise
• GitHub: Total.js on GitHub
• Stack Overflow: Total.js questions on Stack Overflow
• Telegram: Total.js Telegram group
• WhatsApp: Total.js WhatsApp group
• Twitter: Total.js on Twitter
• Facebook: Total.js on Facebook
• LinkedIn: Total.js LinkedIn group
• Reddit: Total.js subreddit
• Discord: Total.js Discord server
• Slack: Total.js Slack channel