Auth Login NodeJS dan Hapi Framework Tutorial

Pada artikel ini kita akan belajar bagaimana membuat Auth Login Nodejs dengan Hapi Framework yang sudah saya susun untuk memudahkan anda mengikutinya.

Langkah 1. Persiapan Awal

Sebelum kita memulai, pastikan Anda sudah memiliki instalasi Node.js dan npm (Node Package Manager) di komputer Anda. Jika belum, Anda dapat mengunduhnya dari situs resmi Node.js.

1.1. Membuat Proyek Baru

Untuk membuat proyek Node.js baru, buatkanlah sebuah folder dengan nama auth_nodejs. Setelah itu buka folder tersebut dengan VSCode. Buka terminal di VSCode dan ketikkan perintah berikut:

npm init

“npm init” secara default, akan ada pertanyaan-pertanyaan yang tampilkan, “enter” aja hingga selesai. Jika sudah, akan ada sebuah file yang namanya package.json yang terbuat.

1.2. Instalasi Paket yang Dibutuhkan

Selanjutnya, Anda perlu menginstal beberapa paket terkait yang diperlukan untuk proyek ini. Paket-paket ini akan membantu dalam pembuatan server, autentikasi, dan manajemen basis data.

Buka terminal, masukkan perintah ini satu per satu.

npm install @hapi/hapi
npm install @hapi/vision
npm install @hapi/basic
npm install @hapi/cookie
npm install bcrypt
npm install mysql2
npm install sequelize
npm install sequelize-cli
npm install handlebars
npm install nodemon --save-dev

Keterangan:

@hapi/hapi: Kerangka kerja Hapi untuk membuat server HTTP.
@hapi/vision: Plugin Hapi untuk mengelola tampilan.
@hapi/basic: Plugin Hapi untuk autentikasi dasar.
@hapi/cookie: Plugin Hapi untuk manajemen cookie.
bcrypt: Library untuk mengenkripsi kata sandi.
sequelize dan sequelize-cli: Koneksi dan pengelolaan basis data menggunakan Sequelize.
handlebars: Template engine untuk tampilan.
nodemon (devDependencies): Paket untuk memantau perubahan dan menghidupkan ulang server saat pengembangan.

Langkah 2: Membuat Struktur MVC

Untuk menjaga proyek Anda terstruktur dengan baik, gunakan perintah npx sequelize-cli init untuk membuat struktur folder.

npx sequelize-cli init

Perintah “npx sequelize-cli init” ini akan membuat folder:

config
migrations
models
seeders

Langkah 3: Konfigurasi Database

Anggap saja kita telah menyiapkan sebuah databas di phpmyadmin dengan nama database auth_nodejs.

Didalam folder config, buka file config.json, ubah konfigurasi database yang ada pada environment development sesuai dengan konfigurasi dari phpmyadmin, sebagai contoh:

{
  "development": {
    "username": "root",
    "password": null,
    "database": "auth_nodejs",
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
}

Langkah 4: Membuat Migrasi

Kita akan membuat table users menggunakan migration. Gunakan perintah berikut untuk membuat file migrasi untuk tabel users:

npx sequelize-cli migration:generate --name create-users

Jika sudah, buka folder migrations, akan ada file migrasi yang dihasilkan dengan contoh nama /20231031000000-create-users.js. Gunakan kode berikut ini kedalam file migration tersebut:

"use strict";

/** @type {import('sequelize-cli').Migration} */
module.exports = {
  async up(queryInterface, Sequelize) {
    await queryInterface.createTable("Users", {
      id: {
        allowNull: false,
        autoIncrement: true,
        primaryKey: true,
        type: Sequelize.INTEGER,
      },
      name: {
        allowNull: false,
        type: Sequelize.STRING,
      },
      email: {
        allowNull: false,
        type: Sequelize.STRING,
      },
      password: {
        allowNull: false,
        type: Sequelize.STRING,
      },
      role: {
        allowNull: false,
        type: Sequelize.STRING,
      },
      createdAt: {
        allowNull: false,
        type: Sequelize.DATE,
      },
      updatedAt: {
        allowNull: false,
        type: Sequelize.DATE,
      },
    });
  },

  async down(queryInterface, Sequelize) {
    await queryInterface.dropTable("users");
  },
};

Langkah 5: Lakukan Migrasi Database

Untuk menjalankan migrasi dan membuat tabel di database, jalankan perintah berikut:

npx sequelize-cli db:migrate

Jika tidak ada error, maka akan ada table users yang terbuat di phpmyadmin.

Langkah 6: Seeder

Buat file seeder untuk mengisi data awal users ke database. Jalankan perintah berikut:

npx sequelize-cli seed:generate --name create-superadmin

Buka folder seeders, lalu buka file seeder yang telah terbuat contohnya 20231031000000-create-superadmin.js. Gunakan kode program berikut:

"use strict";
const Bcrypt = require("bcrypt");

/** @type {import('sequelize-cli').Migration} */
module.exports = {
  async up(queryInterface, Sequelize) {
    await queryInterface.bulkInsert("Users", [
      {
        name: "Ilhamsyah",
        email: "superadmin@example.com",
        password: await Bcrypt.hash("password123", 10), // Ganti dengan kata sandi yang dihash
        role: "superadmin",
        createdAt: new Date(),
        updatedAt: new Date(),
      },
    ]);
  },

  async down(queryInterface, Sequelize) {
    await queryInterface.bulkDelete("Users", null, {});
  },
};

Langkah 7: Menjalankan Seeder

Setelah file seeder selesai di edit, lalu simpan dan jalankan seed menggunakan command:

npx sequelize-cli db:seed:all

Langkah 8. Konfigurasi Server

Buatlah sebuah file dengan nama server.js dan isikan dengan kode program berikut:

// server.js
const Hapi = require("@hapi/hapi");
const Vision = require("@hapi/vision");
const HapiAuth = require("@hapi/basic");
const HapiCookie = require("@hapi/cookie");
const Bcrypt = require("bcrypt");
const server = Hapi.server({ port: 3000, host: "localhost" });
const db = require("./models/index");

const routes = require("./routes");

const init = async () => {
  await server.register([Vision, HapiAuth, HapiCookie]);

  server.views({
    engines: { hbs: require("handlebars") },
    relativeTo: __dirname,
    path: "views",
    layout: true,
    layoutPath: "views",
  });

  server.auth.strategy("login", "cookie", {
    cookie: {
      name: "session",
      password: "sssssssssssssssssssssssssssssssssss", // Ganti dengan kata sandi rahasia yang aman
      isSecure: false, // Untuk pengembangan, atur ke true di produksi
    },
    redirectTo: "/",
    validate: async (request, session) => {
      const user = await db.User.findOne({ where: { id: session.id } });

      if (!user) {
        return { isValid: false };
      }

      return {
        isValid: true,
        credentials: { user },
      };
    },
  });

  server.auth.default("login");

  server.route(routes);

  await server.start();
  console.log("Server is running on", server.info.uri);
};

process.on("unhandledRejection", (err) => {
  console.log(err);
  process.exit(1);
});

init();

Langkah 9: Konfigurasi Autentikasi

Buatlah sebuah folder dengan nama controllers, didalamnya buat sebuah file dengan nama auth.js yang berisi Autentikasi login. Ini adalah bagian penting dari aplikasi yang akan kita buat. Gunakan kode berikut:

// auth.js
const Bcrypt = require("bcrypt"); // Impor bcrypt untuk hashing kata sandi jika diperlukan
const db = require("../models/index");

const AuthController = {
  login: (request, h) => {
    //Jika user sudah login, maka harus menuju 'dashboard'
    if (request.auth.isAuthenticated) {
      return h.redirect("/dashboard");
    }

    //Jika user belum login, maka harus login dulu
    return h.view("login", { title: "Login" });
  },

  authenticate: async (request, h) => {
    //Jika user sudah login, maka harus menuju 'dashboard'
    if (request.auth.isAuthenticated) {
      return h.redirect("/dashboard");
    }

    const { email, password } = request.payload;
    const user = await db.User.findOne({ where: { email: email } });
    if (user && Bcrypt.compareSync(password, user.password)) {
      request.cookieAuth.set({ id: user.id, role: user.role });
      return h.redirect("/dashboard", user);
    } else {
      return h.view("error", { error: "Kredensial tidak valid" });
    }
  },

  dashboard: (request, h) => {
    const name = request.auth.credentials.user.dataValues.name;
    // Logika untuk menampilkan halaman dashboard
    return h.view("dashboard", {
      title: "Dashboard",
      user: name,
    });
  },
};

module.exports = AuthController;

Langkah 10: Konfigurasi Rute

Buatlah sebuah file routes.js, dimana didalam file ini kita aka menentukan rute-rute yang akan digunakan. Isikan dengan kode berikut:

// routes.js
const AuthController = require("./controllers/auth");

module.exports = [
  {
    method: "GET",
    path: "/",
    handler: AuthController.login,
    options: {
      auth: {
        mode: "try",
      },
    },
  },
  {
    method: "POST",
    path: "/login",
    handler: AuthController.authenticate,
    options: {
      auth: {
        mode: "try", // Dalam mode "try" untuk mengizinkan pengguna yang belum terautentikasi
      },
    },
  },
  {
    method: "GET",
    path: "/dashboard",
    handler: AuthController.dashboard,
    options: { auth: "login" },
  },
  {
    method: "GET",
    path: "/logout",
    handler: (request, h) => {
      request.cookieAuth.clear(); // Menghapus sesi pengguna saat logout
      return h.redirect("/");
    },
  },
];

Langkah 11: Buat Model

Didalam folder models, ada sebuah file index.js yang terbuat. Ganti seluruh kode tersebut dengan kode berikut:

// models/user.js
const { Sequelize, DataTypes } = require("sequelize");
const config = require("../config/config.json");

const sequelize = new Sequelize(
  config.development.database,
  config.development.username,
  config.development.password,
  {
    host: config.development.host,
    dialect: config.development.dialect,
  }
);

const User = sequelize.define("users", {
  name: {
    type: DataTypes.STRING,
    allowNull: false,
  },
  email: {
    type: DataTypes.STRING,
    allowNull: false,
  },
  password: {
    type: DataTypes.STRING,
    allowNull: false,
  },
  role: {
    type: DataTypes.STRING,
    allowNull: false,
  },
});

module.exports = {
  User: User,
  sequelize: sequelize,
};

Langkah 12: Buat Tampilan

12.1 Halaman Layout

Sekarang, buatkanlah sebuah folder dengan nama views. Karena kita ingin membuat sebuah template engine, maka kita buat sebuah file view namanya layout.hbs, lalu isi dengan kode berikut:

<html>
  <head>
    <title>Node.js CRUD App</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    />
  </head>
  <body>
    {{header}}
    <div class="container mt-5">
      {{{content}}}
    </div>
  </body>
</html>

12.2 Halaman Login

Lalu, buatkan sebuah file dengan nama login.hbs. Masukkan kode berikut:

<!-- views/login.hbs -->
<h1>Login</h1>
<form method="post" action="/login">
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" name="email" id="email" class="form-control" required />
  </div>
  <div class="form-group">
    <label for="password">Password:</label>
    <input
      type="password"
      name="password"
      id="password"
      class="form-control"
      required
    />
  </div>
  <button type="submit" class="btn btn-primary">Login</button>
</form>

12.3: Halaman Dashboard

Masih dalam folder views, buat sebuah file dengan nama dashboard.hbs:

<!-- views/dashboard.hbs -->
<h1>Dashboard</h1>
<p>Welcome, {{user}}!</p>

Langkah 13: Jalankan Aplikasi

Untuk memulai aplikasi Anda, tambahkan script start ke dalam package.json:

"scripts": {
  "start": "nodemon server.js",
}

Sekarang, pergi ke terminal, jalankan aplikasi dengan perintah berikut:

npm run start

Aplikasi akan berjalan di http://localhost:3000 dan Anda dapat mengaksesnya melalui browser Anda. Masukkan username dan password yang sebelumnya kita tentukan dalam file seeder diatas yaitu:

Email : superadmin@example.com
Password : password123

Semoga artikel Auth Login Nodejs dan Hapi Framewor ini, dapat membantu anda untuk membuat aplikasi autentikasi login dengan Node.js, Hapi Framework, Sequelize, dan menggunakan nodemon.