Tutorial Sistem Login Register dengan Role Menggunakan Node.js, Express, dan MySQL

Daftar Isi

Persiapan Awal
Struktur Database
Struktur Proyek
Konfigurasi Proyek
Membuat Database dan Tabel
Membuat Frontend
Membuat Backend
Implementasi Role-Based Access Control
Pengujian

Persiapan Awal

Kebutuhan Sistem

Node.js (versi 14 atau lebih tinggi)
MySQL (versi 5.7 atau lebih tinggi)
Text editor (VS Code, Sublime Text, dll)

Instalasi Package yang Diperlukan

mkdir auth-tutorial
cd auth-tutorial
npm init -y

# Install dependensi yang diperlukan
npm install express mysql2 bcryptjs jsonwebtoken dotenv express-session body-parser cors

Struktur Database

Kita akan membuat dua tabel utama:

Tabel users
Tabel roles

nama file database.sql

CREATE DATABASE auth_tutorial;

USE auth_tutorial;

CREATE TABLE roles (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(50) NOT NULL UNIQUE
);

CREATE TABLE users (
    id INT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) NOT NULL UNIQUE,
    email VARCHAR(100) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL,
    role_id INT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (role_id) REFERENCES roles(id)
);

-- Insert default roles
INSERT INTO roles (name) VALUES 
    ('admin'),
    ('user'),
    ('moderator');

Struktur Proyek

auth-tutorial/
├── config/
│   └── database.js
├── middleware/
│   ├── auth.js
│   └── roleCheck.js
├── models/
│   ├── User.js
│   └── Role.js
├── routes/
│   ├── auth.js
│   └── protected.js
├── public/
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── main.js
├── views/
│   ├── register.html
│   ├── login.html
│   ├── dashboard.html
│   └── admin.html
├── .env
└── server.js

Konfigurasi Proyek

1. File .env

DB_HOST=localhost
DB_USER=root
DB_PASS=your_password
DB_NAME=auth_tutorial
JWT_SECRET=your_jwt_secret_key

2. config/database.js

const mysql = require('mysql2');
require('dotenv').config();

const pool = mysql.createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASS,
    database: process.env.DB_NAME,
    waitForConnections: true,
    connectionLimit: 10,
    queueLimit: 0
});

module.exports = pool.promise();

3. server.js

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const path = require('path');
require('dotenv').config();

const app = express();

// Middleware
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));

// Routes
app.use('/auth', require('./routes/auth'));
app.use('/api', require('./routes/protected'));

// Serve static files
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'views', 'login.html'));
});

app.get('/register', (req, res) => {
    res.sendFile(path.join(__dirname, 'views', 'register.html'));
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

Frontend Implementation

1. views/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>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div class="container">
        <h2>Register</h2>
        <form id="registerForm">
            <div class="form-group">
                <label>Username:</label>
                <input type="text" name="username" required>
            </div>
            <div class="form-group">
                <label>Email:</label>
                <input type="email" name="email" required>
            </div>
            <div class="form-group">
                <label>Password:</label>
                <input type="password" name="password" required>
            </div>
            <button type="submit">Register</button>
        </form>
        <p>Already have an account? <a href="/">Login here</a></p>
    </div>
    <script src="/js/main.js"></script>
</body>
</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>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div class="container">
        <h2>Login</h2>
        <form id="loginForm">
            <div class="form-group">
                <label>Email:</label>
                <input type="email" name="email" required>
            </div>
            <div class="form-group">
                <label>Password:</label>
                <input type="password" name="password" required>
            </div>
            <button type="submit">Login</button>
        </form>
        <p>Don't have an account? <a href="/register">Register here</a></p>
    </div>
    <script src="/js/main.js"></script>
</body>
</html>

3. public/css/style.css

.container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

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

button:hover {
    background-color: #0056b3;
}

4. public/js/main.js

// Register form handler
const registerForm = document.getElementById('registerForm');
if (registerForm) {
    registerForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        
        const formData = new FormData(registerForm);
        const data = {
            username: formData.get('username'),
            email: formData.get('email'),
            password: formData.get('password')
        };

        try {
            const response = await fetch('/auth/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();
            if (response.ok) {
                alert('Registration successful!');
                window.location.href = '/';
            } else {
                alert(result.message || 'Registration failed');
            }
        } catch (error) {
            console.error('Error:', error);
            alert('An error occurred during registration');
        }
    });
}

// Login form handler
const loginForm = document.getElementById('loginForm');
if (loginForm) {
    loginForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        
        const formData = new FormData(loginForm);
        const data = {
            email: formData.get('email'),
            password: formData.get('password')
        };

        try {
            const response = await fetch('/auth/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();
            if (response.ok) {
                localStorage.setItem('token', result.token);
                window.location.href = '/dashboard';
            } else {
                alert(result.message || 'Login failed');
            }
        } catch (error) {
            console.error('Error:', error);
            alert('An error occurred during login');
        }
    });
}

Backend Implementation

1. middleware/auth.js

const jwt = require('jsonwebtoken');

module.exports = (req, res, next) => {
    const token = req.header('Authorization')?.replace('Bearer ', '');
    
    if (!token) {
        return res.status(401).json({ message: 'No token provided' });
    }

    try {
        const decoded = jwt.verify(token, process.env.JWT_SECRET);
        req.user = decoded;
        next();
    } catch (error) {
        res.status(401).json({ message: 'Invalid token' });
    }
};

2. middleware/roleCheck.js

module.exports = (roles = []) => {
    return (req, res, next) => {
        if (!req.user) {
            return res.status(401).json({ message: 'Unauthorized' });
        }

        if (!roles.includes(req.user.role)) {
            return res.status(403).json({ message: 'Forbidden' });
        }

        next();
    };
};

3. routes/auth.js

const express = require('express');
const router = express.Router();
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const db = require('../config/database');

// Register route
router.post('/register', async (req, res) => {
    try {
        const { username, email, password } = req.body;

        // Check if user already exists
        const [existingUsers] = await db.execute(
            'SELECT * FROM users WHERE email = ? OR username = ?',
            [email, username]
        );

        if (existingUsers.length > 0) {
            return res.status(400).json({ message: 'User already exists' });
        }

        // Hash password
        const hashedPassword = await bcrypt.hash(password, 10);

        // Insert new user
        const [result] = await db.execute(
            'INSERT INTO users (username, email, password, role_id) VALUES (?, ?, ?, ?)',
            [username, email, hashedPassword, 2] // Default role_id 2 for 'user'
        );

        res.status(201).json({ message: 'User registered successfully' });
    } catch (error) {
        console.error(error);
        res.status(500).json({ message: 'Server error' });
    }
});

// Login route
router.post('/login', async (req, res) => {
    try {
        const { email, password } = req.body;

        // Get user
        const [users] = await db.execute(
            'SELECT u.*, r.name as role_name FROM users u JOIN roles r ON u.role_id = r.id WHERE u.email = ?',
            [email]
        );

        if (users.length === 0) {
            return res.status(400).json({ message: 'Invalid credentials' });
        }

        const user = users[0];

        // Check password
        const validPassword = await bcrypt.compare(password, user.password);
        if (!validPassword) {
            return res.status(400).json({ message: 'Invalid credentials' });
        }

        // Create token
        const token = jwt.sign(
            { 
                id: user.id, 
                username: user.username,
                role: user.role_name
            },
            process.env.JWT_SECRET,
            { expiresIn: '1h' }
        );

        res.json({ token });
    } catch (error) {
        console.error(error);
        res.status(500).json({ message: 'Server error' });
    }
});

module.exports = router;

4. routes/protected.js

const express = require('express');
const router = express.Router();
const auth = require('../middleware/auth');
const roleCheck = require('../middleware/roleCheck');

// Protected route for all authenticated users
router.get('/dashboard', auth, (req, res) => {
    res.json({ message: 'Welcome to dashboard', user: req.user });
});

// Protected route only for admin
router.get('/admin', auth, roleCheck(['admin']), (req, res) => {
    res.json({ message: 'Welcome to admin panel', user: req.user });
});

// Protected route for moderators and admins
router.get('/moderate', auth, roleCheck(['admin', 'moderator']), (req, res) => {
    res.json({ message: 'Welcome to moderation panel', user: req.user });
});

module.exports = router;

User Model

// File: models/User.js
const db = require('../config/database');
const bcrypt = require('bcryptjs');

class User {
    constructor(userData) {
        this.id = userData.id;
        this.username = userData.username;
        this.email = userData.email;
        this.password = userData.password;
        this.role_id = userData.role_id;
        this.created_at = userData.created_at;
    }

    // Create new user
    static async create(userData) {
        try {
            // Hash password
            const hashedPassword = await bcrypt.hash(userData.password, 10);
            
            const [result] = await db.execute(
                'INSERT INTO users (username, email, password, role_id) VALUES (?, ?, ?, ?)',
                [userData.username, userData.email, hashedPassword, userData.role_id || 2] // Default role_id 2 untuk 'user'
            );

            return result.insertId;
        } catch (error) {
            throw error;
        }
    }

    // Find user by email
    static async findByEmail(email) {
        try {
            const [rows] = await db.execute(
                `SELECT u.*, r.name as role_name 
                 FROM users u 
                 JOIN roles r ON u.role_id = r.id 
                 WHERE u.email = ?`,
                [email]
            );
            return rows.length ? new User(rows[0]) : null;
        } catch (error) {
            throw error;
        }
    }

    // Find user by ID
    static async findById(id) {
        try {
            const [rows] = await db.execute(
                `SELECT u.*, r.name as role_name 
                 FROM users u 
                 JOIN roles r ON u.role_id = r.id 
                 WHERE u.id = ?`,
                [id]
            );
            return rows.length ? new User(rows[0]) : null;
        } catch (error) {
            throw error;
        }
    }

    // Update user
    static async update(id, updateData) {
        try {
            const allowedUpdates = ['username', 'email', 'role_id'];
            const updates = [];
            const values = [];

            Object.keys(updateData).forEach(key => {
                if (allowedUpdates.includes(key)) {
                    updates.push(`${key} = ?`);
                    values.push(updateData[key]);
                }
            });

            // If password is included in update
            if (updateData.password) {
                const hashedPassword = await bcrypt.hash(updateData.password, 10);
                updates.push('password = ?');
                values.push(hashedPassword);
            }

            values.push(id);

            const [result] = await db.execute(
                `UPDATE users SET ${updates.join(', ')} WHERE id = ?`,
                values
            );

            return result.affectedRows > 0;
        } catch (error) {
            throw error;
        }
    }

    // Delete user
    static async delete(id) {
        try {
            const [result] = await db.execute(
                'DELETE FROM users WHERE id = ?',
                [id]
            );
            return result.affectedRows > 0;
        } catch (error) {
            throw error;
        }
    }

    // Verify password
    async verifyPassword(password) {
        try {
            return await bcrypt.compare(password, this.password);
        } catch (error) {
            throw error;
        }
    }
}

module.exports = User;

Role model

// File: models/Role.js
const db = require('../config/database');

class Role {
    constructor(roleData) {
        this.id = roleData.id;
        this.name = roleData.name;
    }

    // Create new role
    static async create(name) {
        try {
            const [result] = await db.execute(
                'INSERT INTO roles (name) VALUES (?)',
                [name]
            );
            return result.insertId;
        } catch (error) {
            throw error;
        }
    }

    // Find role by ID
    static async findById(id) {
        try {
            const [rows] = await db.execute(
                'SELECT * FROM roles WHERE id = ?',
                [id]
            );
            return rows.length ? new Role(rows[0]) : null;
        } catch (error) {
            throw error;
        }
    }

    // Find role by name
    static async findByName(name) {
        try {
            const [rows] = await db.execute(
                'SELECT * FROM roles WHERE name = ?',
                [name]
            );
            return rows.length ? new Role(rows[0]) : null;
        } catch (error) {
            throw error;
        }
    }

    // Get all roles
    static async getAll() {
        try {
            const [rows] = await db.execute('SELECT * FROM roles');
            return rows.map(row => new Role(row));
        } catch (error) {
            throw error;
        }
    }

    // Update role
    static async update(id, name) {
        try {
            const [result] = await db.execute(
                'UPDATE roles SET name = ? WHERE id = ?',
                [name, id]
            );
            return result.affectedRows > 0;
        } catch (error) {
            throw error;
        }
    }

    // Delete role
    static async delete(id) {
        try {
            // Check if role is being used by any user
            const [users] = await db.execute(
                'SELECT COUNT(*) as count FROM users WHERE role_id = ?',
                [id]
            );
            
            if (users[0].count > 0) {
                throw new Error('Cannot delete role that is assigned to users');
            }

            const [result] = await db.execute(
                'DELETE FROM roles WHERE id = ?',
                [id]
            );
            return result.affectedRows > 0;
        } catch (error) {
            throw error;
        }
    }

    // Get users by role
    static async getUsers(roleId) {
        try {
            const [rows] = await db.execute(
                `SELECT * FROM users WHERE role_id = ?`,
                [roleId]
            );
            return rows;
        } catch (error) {
            throw error;
        }
    }
}

module.exports = Role;

Penggunaan

Setup Database
- Jalankan script SQL untuk membuat database dan tabel
- Sesuaikan konfigurasi database di file .env
Menjalankan Aplikasi
```
npm start
```
Mengakses Aplikasi
- Buka browser dan akses http://localhost:3000
- Register user baru
- Login dengan kredensial yang sudah dibuat
- Coba akses berbagai route sesuai role

Fitur Keamanan

Password di-hash menggunakan bcrypt
Autentikasi menggunakan JWT
Role-based access control
Validasi input
Proteksi terhadap SQL injection menggunakan prepared statements

PreviousCRUD sederhana javascript dan html

Last updated 1 year ago

hashtagTutorial Sistem Login Register dengan Role Menggunakan Node.js, Express, dan MySQL

hashtagDaftar Isi

hashtagPersiapan Awal

hashtagKebutuhan Sistem

hashtagInstalasi Package yang Diperlukan

hashtag

hashtagStruktur Database

hashtagStruktur Proyek

hashtagKonfigurasi Proyek

hashtag1. File .env

hashtag2. config/database.js

hashtag3. server.js

hashtagFrontend Implementation

hashtag1. views/register.html

hashtag2. views/login.html

hashtag3. public/css/style.css

hashtag4. public/js/main.js

hashtagBackend Implementation

hashtag1. middleware/auth.js

hashtag2. middleware/roleCheck.js

hashtag3. routes/auth.js

hashtag4. routes/protected.js

hashtagUser Model

hashtagRole model

hashtag

hashtagPenggunaan

hashtagFitur Keamanan

Tutorial Sistem Login Register dengan Role Menggunakan Node.js, Express, dan MySQL

Daftar Isi

Persiapan Awal

Kebutuhan Sistem

Instalasi Package yang Diperlukan

Struktur Database

Struktur Proyek

Konfigurasi Proyek

1. File .env

2. config/database.js

3. server.js

Frontend Implementation

1. views/register.html

2. views/login.html

3. public/css/style.css

4. public/js/main.js

Backend Implementation

1. middleware/auth.js

2. middleware/roleCheck.js

3. routes/auth.js

4. routes/protected.js

User Model

Role model

Penggunaan

Fitur Keamanan