Node.js Login System mit Express, JWT & MySQL

In diesem Tutorial bauen wir ein Node.js Login mit Express, JWT und MySQL. Diese RestAPI kannst du dann ganz flexibel an den Frontend anbinden.

Dieses Tutorial ist der erste Teil der zweiteiligen Serie zur Erstellung eines kompletten Login Systems mit Node.js und Vue.js. Dazu nutzen wir Node.js als Backend und Vue.js als Frontend.

Das Tutorial ist in zwei Beiträge aufgeteilt, damit du nicht an ein bestimmtes Frontend Framework gebunden bist, sondern dieses Node Login System, welches wir in diesem Beitrag entwickeln, gleichermaßen mit einem Vue.js, React oder Angular Framework nutzen kannst.

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

Wir erstellen eine Node.js Anwendung. Dazu haben wir eine MySQL Datenbank, in der unsere Benutzerdaten gespeichert sind. 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.

Hier gibt es das Tutorial auch in Videoform:

Was ist eine Rest API?

Eine Rest API stellt die Schnittstelle zwischen Server und Client dar. Über einfache HTTP Anfragen erreichen wir den Server und können programmierte Funktionen ausführen, wie das Authentifizieren eines Benutzers mit zugehörigem Passwort.

Solltest du mit Node.js noch nicht vertraut sein, kannst du dir dieses Node.js Anfänger Tutorial anschauen. Danach hast du alle Grundlagen drauf und kannst dich an Dein Node.js Login System wagen.

1. Abhängigkeiten 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
mysql	Zum Lesen/Schreiben in unsere Datenbank
uuid	Zum Erstellen von IDs für spätere Benutzer
bcryptjs (Achtung: nicht bcrypt)	Zum Ver-/Entschlüsseln 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 mysql 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 Schema erstellen

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.

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

In der Datenbank sieht unsere Tabelle dann folgendermaßen aus:

Damit wir auch über unsere Node.js Anwendung auf diese Verbindung zugreifen können, erstellen wir eine eigene Klasse Datei, die wir später in unserem Router einbinden.

// lib/db.js

const mysql = require('mysql');

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 Router 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}`));

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 erstellen (Validierung)

Eine Middleware 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. Express Routen erstellen

5.1 Register Route umsetzen

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 (verschlüsselt) 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 umsetzen

Neben dem Registrierungsprozess haben wir 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. Im Teil 2 (Vue.js Frontend) 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“.

5.3 Routen mit Login schützen

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.

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.

Kompletten Code in Git Repository anschauen

6. Node Login System deployen

Super, dein Node.js Login 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