Node.js Login System (mit Express, JWT & MySQL)

In diesem Tutorial bauen wir ein Node.js Login System mit allen Basic Funktionen. Dazu nutzen wir Express, MySQL und JWT .

Wir bauen ein komplettes Login System in Node.js, welches du einfach in ein beliebiges Frontend (React, Angular, Vue.js, …) einbinden kannst. Das ist möglich, da wir das komplette Node.js Login System als Rest API umsetzen.

Dieser Blogpost ist Teil 1 meiner zweiteiligen Tutorial-Reihe. In Teil 2 (am Ende verlinkt) bauen wir zusammen das passende Frontend.

Als Bonus stelle ich dir den kompletten Code in einem Git Repository bereit! 🙂

Das wirst du in diesem Tutorial lernen:

• Erstellen eine Node.js Projektes und Installation aller benötigen NPM Packages.
• Entwerfen einer sinnvollen Node.js Backend Struktur.
• Herstellen einer Datenbankverbindung und Ausführen von Operationen auf der MySQL Datenbank.
• Implementieren mehrere Routen mit POST und GET in Node.js und Express.
• Erstellen und Validieren von Sessions mit JWT, um zu überprüfen ob ein Nutzer angemeldet ist.

Welche Komponenten benötigen wir für unser Node.js Login System?

Wir nutzen eine MySQL Datenbank, in der unsere Benutzerdaten gespeichert werden. Alternativ kannst du die Datenbank aber auch durch z.B. eine MongoDB Datenbank ersetzen. Zur Authentifizierung müssen wir diese Daten dann abfragen und können mit Hilfe des JWT (JSON Web Token) Packages eine Session (Sitzung) für den Benutzer eröffnen. Zur Umsetzung der Rest API nutzen wir das Express Framework.

Hier gibt es das Tutorial auch in Videoform:

1. Node.js Projekt aufsetzen und NPM Packages installieren

Nachdem du ein neues Projekt mit npm init initialisiert hast, können wir die benötigten Abhängigkeiten installieren. Wir benötigen folgende Module:

Package	Beschreibung
express	Damit erstellen wir unseren eigenen Webserver für unsere Rest API
mysql2	Zum Lesen/Schreiben in unsere Datenbank
uuid	Zum Erstellen von IDs für spätere Benutzer
bcryptjs (Achtung: nicht bcrypt)	Zum Hashen der Passwörter
jsonwebtoken	Zur Handhabung der Nutzer-Sessions
cors	Damit wir die Rest API von unserer Website aufrufen können
dotenv	Verwalten von Umgebungsvariablen

Diese Module installieren wir über folgenden CLI Befehl:

npm install express mysql2 uuid bcryptjs jsonwebtoken cors dotenv

Damit du einen besser Überblick hast, wo welche Dateien abzulegen sind, hier eine kleine Übersicht:

├── lib
│   └── db.js
├── middleware
│   └── users.js
├── routes
│   └── router.js
├── .env
└── index.js

2. MySQL Datenbank einrichten

Um die Benutzerdaten, also Benutzername, Passwort, etc. in unserem Node.js Login System zu speichern benötigen wir eine Datenbank – in unsere Fall MySQL. Als Datenbank-Engine nutze ich XAMPP, damit ich mir eine eigene Datenbank lokal hosten kann. Natürlich kannst du auch jede andere (Remote-) Datenbank verwenden oder eine lokale Datenbank mit Docker starten.

Für unser Login System benötigen wir nur eine Tabelle nach folgendem Schema:

Das Attribut „id“ nutzen wir als Primary Key und aktivieren die Auto-Increment Funktion.
In der Datenbank sieht unsere Tabelle dann folgendermaßen aus:

Damit wir Daten in Node.js aus unserer Datenbank abrufen können, erstellen wir eine eigene Datei, die wir später in unserem Express Router einbinden.

// lib/db.js

const mysql = require('mysql2');

const connection = mysql.createConnection({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  database: process.env.DB_NAME,
  password: process.env.DB_PASSWORD,
});

connection.connect();
module.exports = connection;

Sicherheitsrelevante Informationen, wie Passwörter, PINs oder Tokens solltest du niemals direkt im Code speichern! Daher legt man für solche Daten Umgebungsvariablen an. Das sind Variablen, die in den verschiedenen Stages deiner Anwendung unterschiedlich konfiguriert sein können und auch niemals in einem Repository gespeichert werden.

Um diese Platzhalter nun mit dem richtigen Inhalt zu füllen, legen wir die Datei .env an. Beachte den Punkt am Anfang. Dort legen wir unsere vier verwendeten Variablen an:

DB_HOST=localhost
DB_USER=root
DB_PASSWORD=******
DB_NAME=node-login-tutorial

Wenn du deinen Code in einem Repository verwaltest, solltest du unbedingt die Datei .env in deiner .gitignore einfügen.

3. Express aufsetzen und Routen erstellen

Unsere Einstiegsdatei ist die index.js und beinhaltet das Starten unsere Webservers und die Einbindung der Routen, die wir in der Datei routes/router.js definieren.

// index.js

const express = require('express');
const app = express();
const cors = require('cors');

require('dotenv').config();
const PORT = process.env.PORT || 3000;

app.use(express.json());
app.use(cors());

const router = require('./routes/router.js');
app.use('/api', router);

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Das ist unsere Hauptdatei, daher gehen wir Zeile für Zeile durch was hier passiert.

Zeile	Beschreibung
Zeile 3	Importiert das express Modul
Zeile 4	Erstellt eine Instanz der Express-Anwendung
Zeile 5	Importiert das cors Modul
Zeile 7	Lädt Umgebungsvariablen aus der .env-Datei
Zeile 8	Setzt den Port auf den in der Umgebungsvariablen definierten Wert oder auf 3000, falls dieser nicht definiert ist
Zeile 10	Konfiguriert die Anwendung, um JSON-formatierte Anfragen zu parsen
Zeile 11	Aktiviert CORS für die Anwendung
Zeile 13-14	Importiert den Router aus der Datei router.js im Verzeichnis routes und verwendet den importierten Router für alle Routen, die mit /api beginnen
Zeile 16	Startet den Server und gibt eine Nachricht in der Konsole aus, dass der Server auf dem definierten Port läuft

In der router.js definieren wir unsere Routen und verpacken danach die Logik darin. Grund, wieso wir hier eine extra Datei benutzen ist die Übersichtlichkeit. Wenn Deine Anwendung irgendwann 20 oder noch mehr Routen hat, gibt es ein großes Chaos in der index.js. Deshalb lagern wir unsere Routen aus.

// routes/router.js

const express = require('express');
const router = express.Router();

const bcrypt = require('bcryptjs');
const uuid = require('uuid');
const jwt = require('jsonwebtoken');

const db = require('../lib/db.js');
const userMiddleware = require('../middleware/users.js');

router.post('/sign-up', (req, res, next) => {});

router.post('/login', (req, res, next) => {});

router.get('/secret-route', (req, res, next) => {
  res.send('This is the secret content. Only logged in users can see that!');
});

module.exports = router;

Hier registrieren wir die Route /api/sign-up zum Registrieren und /api/login zum Anmelden. Außerdem haben wir die Route /api/secret-route, diese soll man nur aufrufen können, wenn man angemeldet ist. Aktuell kann diese jeder Benutzer aufrufen. Dazu aber später mehr.

In Zeile 10 binden wir außerdem unsere Datei für die Datenbank Verbindung ein.

Wir binden noch die Datei ../middleware/users.js ein, in der befindet sich der Code um die Anfragen zu verifizieren. Das bedeutet, wir prüfen dort, ob der Benutzer z.B. ein Passwort eingegeben hat und der Benutzername den Richtlinien entspricht. Diese Abfragen schalten wir später als Middleware in den Aufruf unserer Routen.

4. Middleware zur Validierung erstellen

Die Logik für unser Node.js Login System verpacken wir in Middleware. Das ist quasi ein kleines Programm, was zwischen zwei Komponenten geschaltet ist. In diesem Fall haben wir zwischen unserem Request und der eigentlichen Registrierung eine Middleware, die die eingegebenen Daten validiert. Für die Registrierung kann eine Validierung wie folgt aussehen:

// middleware/users.js

const jwt = require("jsonwebtoken");

module.exports = {
  validateRegister: (req, res, next) => {
    // username min length 3
    if (!req.body.username || req.body.username.length < 3) {
      return res.status(400).send({
        message: 'Please enter a username with min. 3 chars',
      });
    }
    // password min 6 chars
    if (!req.body.password || req.body.password.length < 6) {
      return res.status(400).send({
        message: 'Please enter a password with min. 6 chars',
      });
    }
    // password (repeat) must match
    if (
      !req.body.password_repeat ||
      req.body.password != req.body.password_repeat
    ) {
      return res.status(400).send({
        message: 'Both passwords must match',
      });
    }
    next();
  }
};

Beim Aufruf unserer /sign-up Route soll unsere Middleware ausgeführt werden. Dazu ändern wie die markierte Zeile wie folgt ab:

// routes/router.js

const express = require('express');
const router = express.Router();

const userMiddleware = require('../middleware/users.js');

router.post('sign-up', userMiddleware.validateRegister, (req, res, next) => {});

router.post('login', (req, res, next) => {});

module.exports = router;

5. Logik für Rest API erstellen

5.1 Register Route

Um einen neuen Benutzer in die Datenbank aufzunehmen, müssen wir überprüfen, ob der Benutzername noch nicht existiert. Ist der Benutzer vorhanden, wird eine Fehlermeldung ausgegeben. Ist der Benutzer noch nicht vorhanden, wird mittels unserem Modul bcryptjs, das eingegebene Passwort gehasht und dann alle Daten in die Datenbank eingetragen.

// routes/router.js

router.post('/sign-up', userMiddleware.validateRegister, (req, res, next) => {
  db.query(
    'SELECT id FROM users WHERE LOWER(username) = LOWER(?)',
    [req.body.username],
    (err, result) => {
      if (result && result.length) {
        // error
        return res.status(409).send({
          message: 'This username is already in use!',
        });
      } else {
        // username not in use
        bcrypt.hash(req.body.password, 10, (err, hash) => {
          if (err) {
            return res.status(500).send({
              message: err,
            });
          } else {
            db.query(
              'INSERT INTO users (id, username, password, registered) VALUES (?, ?, ?, now());',
              [uuid.v4(), req.body.username, hash],
              (err, result) => {
                if (err) {
                  return res.status(400).send({
                    message: err,
                  });
                }
                return res.status(201).send({
                  message: 'Registered!',
                });
              }
            );
          }
        });
      }
    }
  );
});

Ist das Eintragen des Benutzers erfolgreich, wird der Statuscode 201 („created“) zurückgegeben und der Funktionsaufruf damit beendet.

Schon mal von Double Opt-In gehört? Dabei werden Bestätigungsmails versendet, um eine Anmeldung zu verifizieren. In diesem Tutorial erfährst du, wie du Double Opt-In in deine Node.js Anwendung (aufbauend auf diesem Tutorial) einbauen kannst.

5.2 Login Route

Neben dem Registrierungsprozess haben wir in unserem Login System eine Login Route, um sich für bereits registrierte Benutzer anzumelden. Hier wird der passende Datenbankeintrag anhand des Benutzernamen gesucht. Danach wird das eingegebene mit dem verschlüsselten Passwort aus der Datenbank mit Hilfe von jwt.compare() überprüft. Ein kurzes SQL Query setzt in Zeile 45 das letzt Login Datum/Zeit auf den aktuellen Wert.

// routes/router.js

[...]
router.post('/login', (req, res, next) => {
  db.query(
    `SELECT * FROM users WHERE username = ?;`,
    [req.body.username],
    (err, result) => {
      if (err) {
        return res.status(400).send({
          message: err,
        });
      }
      if (!result.length) {
        return res.status(400).send({
          message: 'Username or password incorrect!',
        });
      }

      bcrypt.compare(
        req.body.password,
        result[0]['password'],
        (bErr, bResult) => {
          if (bErr) {
            return res.status(400).send({
              message: 'Username or password incorrect!',
            });
          }
          if (bResult) {
            // password match
            const token = jwt.sign(
              {
                username: result[0].username,
                userId: result[0].id,
              },
              'SECRETKEY',
              { expiresIn: '7d' }
            );
            db.query(`UPDATE users SET last_login = now() WHERE id = ?;`, [
              result[0].id,
            ]);
            return res.status(200).send({
              message: 'Logged in!',
              token,
              user: result[0],
            });
          }
          return res.status(400).send({
            message: 'Username or password incorrect!',
          });
        }
      );
    }
  );
});

In Zeile 33 und 34 übergeben wir Variablen, die wir im JWT Token „speichern“ möchten. Dadurch haben wir in den geschützten Routen Zugriff auf diese Variablen.

In Zeile 36 musst du einen Key übergeben, mit dem der JWT Token generiert wird, dieser ist später für die Überprüfung wichtig. Hier kannst du einen beliebigen String eingeben.

Außerdem kannst du in Zeile 37 festlegen, wie lange der Token gültig sein soll. Werte wie „1h“ oder „3m“ sind hier gültig. Die einzelnen Werte und Parameter kannst du auch in der Dokumentation nachlesen.

Falls das Passwort falsch ist oder der Benutzername nicht existiert wird eine Fehlermeldung ausgegeben. Diese Meldung ist absichtlich identisch, da ein potentieller Angreifer sonst Informationen über das Existieren von einzelnen Benutzerprofilen bekommen kann.

Bei erfolgreichem Login wird das Benutzerobjekt und der von JWT generierte Token zurückgegeben. Dieser Token ist für alle Routen wichtig, in denen man eingeloggt sein soll. In Teil 2 dieses Node.js Login Tutorial erfährst du, wie du diesen bei jedem Request übergeben kannst. Wenn du die Rest API mit Postman testest, kannst du den Token mit dem Key „Authorization“ als Value nach folgender Syntax angeben: „Bearer KEY„.

Bei der Entwicklung einer Rest API kann es zu Fehlern kommen – das ist völlig normal. Oft sind irgendwelche Randfälle nicht bedacht. Wie du diese Testfälle auswählst und diese automatisiert testen kannst, habe ich dir hier zusammengefasst: Rest API richtig testen.

5.3 Routen mit Login

Die wichtigsten Routen sind nun fertig. Wir können neue Benutzer hinzufügen und uns mit bestehenden Accounts anmelden. Nun wollen wir noch Routen schützen. Das bedeutet, dass nur angemeldete Benutzer Zugriff darauf haben.

Dazu legen wir in unserer users.js eine neue Middleware an. Hierbei wird der Token aus dem Header des Requests genommen und durch JWT verifiziert.

// middleware/users.js

  [...]
  isLoggedIn: (req, res, next) => {
    if (!req.headers.authorization) {
      return res.status(400).send({
        message: 'Your session is not valid!',
      });
    }
    try {
      const authHeader = req.headers.authorization;
      const token = authHeader.split(' ')[1];
      const decoded = jwt.verify(token, 'SECRETKEY');
      req.userData = decoded;
      next();
    } catch (err) {
      return res.status(400).send({
        message: 'Your session is not valid!',
      });
    }
  }
  [...]

In der markierten Zeile musst du den gleichen Key angeben, mit dem du den JWT bereits generiert hast.

Um nun eine Route zu schützen, bindest du diese Middleware einfach beim Aufruf der Route wie folgt ein:

// routes/router.js

[...]
router.get('/secret-route', userMiddleware.isLoggedIn, (req, res, next) => {
  console.log(req.userData);
  res.send('This is the secret content. Only logged in users can see that!');
});
[...]

In req.userData stehen die Daten die wir im JWT Key abgelegt haben (in diesem Fall username und userId). Damit können wir z.B. bei geschützten Routen benutzerdefinierte Werte aus der Datenbank anhand der userId auslesen.

Kompletten Code in Git Repository anschauen

6. Node.js Login System deployen

Super, dein Node.js Login System mit Express, JWT und MySQL ist fertig. Jetzt kannst du dir ein schickes Frontend bauen und dein Backend anbinden.

Wie du deine fertige App dann deployen – also live stellen kannst, habe ich dir in hier beschrieben.

➡️ Hier geht’s zum 2. Teil: Vue.js Login System mit Vuex & Axios