Implementierung des passwortlosen Logins in einem Next.js 13 Projekt mit NextAuth.js und Prisma

Dieser Artikel befasst sich mit den Schritten, die erforderlich sind, um eine passwortlose Authentifizierung in einem Next.js-Projekt unter Verwendung der NextAuth.js-Bibliothek zu implementieren. Zusätzlich werden wir Prisma als unseren Datenbankadapter verwenden, um dies zu erreichen.

Die passwortlose Authentifizierung ist ein innovativer Ansatz, der die traditionelle Kombination von Benutzernamen und Passwort überflüssig macht. Stattdessen bietet sie ein sichereres und benutzerfreundlicheres Authentifizierungserlebnis, indem sie alternative Methoden wie magische E-Mail-Links oder per SMS verschickte Einmalcodes nutzt.

Next.js ist ein beliebtes React-Framework zur Erstellung von Webanwendungen, das für seine Einfachheit und Effizienz bekannt ist. Durch die Integration von NextAuth.js, einer Authentifizierungsbibliothek, die speziell für Next.js entwickelt wurde, können wir die passwortlose Authentifizierung leicht in unser Projekt integrieren.

Außerdem werden wir uns auf Prisma als Datenbankadapter verlassen. Prisma ist ein ORM-Tool (Object-Relational Mapping), das die Interaktion mit Datenbanken vereinfacht, indem es einen typsicheren und automatisch generierten Query Builder bereitstellt. Es unterstützt mehrere Datenbanken, darunter PostgreSQL, MySQL und SQLite, was es zu einer vielseitigen Wahl für unsere Authentifizierungsimplementierung macht.

In dieser Anleitung wird Schritt für Schritt erklärt, wie man die passwortlose Authentifizierung mit NextAuth.js in einem Next.js-Projekt einrichtet und konfiguriert. Wir werden auch zeigen, wie wir Prisma als unseren Datenbankadapter integrieren, um eine nahtlose Kommunikation zwischen unserer Anwendung und der Datenbank zu ermöglichen.

Wir werden nun untersuchen, wie wir die Sicherheit und das Benutzererlebnis unserer Next.js-Anwendung mit passwortloser Authentifizierung und den Möglichkeiten von NextAuth.js und Prisma verbessern können. Lassen Sie uns beginnen.

Was ist eine passwortlose Anmeldung?

Wie der Name schon sagt, handelt es sich bei der passwortlosen Anmeldung um eine Authentifizierungsmethode, bei der die herkömmliche Kombination aus Benutzernamen und Passwort entfällt. Stattdessen werden alternative Mittel zur Überprüfung der Identität eines Benutzers verwendet, wie z. B. magische E-Mail-Links oder einmalige Codes, die per SMS gesendet werden. Dieser Ansatz bietet mehrere Vorteile gegenüber herkömmlichen Anmeldemethoden. Erstens wird das Risiko passwortbezogener Schwachstellen, wie z. B. schwache Passwörter oder die Wiederverwendung von Passwörtern, eliminiert. Zweitens vereinfacht es die Benutzererfahrung, da die Notwendigkeit entfällt, sich komplexe Passwörter zu merken und einzugeben.

Um die passwortlose Anmeldung mit magischen E-Mail-Links oder Einmalcodes zu realisieren, benötigen wir einen SMTP-Server (Simple Mail Transfer Protocol).

Ein SMTP-Server ist für den Versand von E-Mails über das Internet zuständig. Im Rahmen der passwortlosen Authentifizierung sendet der Server die Magic Links oder One-Time-Codes an die registrierte E-Mail-Adresse des Benutzers. Wenn ein Benutzer den Anmeldevorgang einleitet, wird eine E-Mail mit einem eindeutigen Link oder Code generiert und an den Benutzer gesendet. Der Benutzer kann dann auf den Link klicken oder den Code eingeben, um den Authentifizierungsprozess abzuschließen. Der SMTP-Server fungiert als Vermittler zwischen der Anwendung und dem E-Mail-Dienst des Benutzers und gewährleistet eine sichere und zuverlässige Zustellung der Authentifizierungsnachrichten. Durch den Einsatz eines SMTP-Servers können wir die passwortlose Anmeldung effektiv umsetzen und unseren Benutzern eine nahtlose Authentifizierung bieten.

Los geht's!

Zunächst müssen wir ein neues Next.js-Projekt erstellen. Verwenden Sie dazu den folgenden Befehl:

npx create-next-app@latest

Sobald Sie das neue Next.js-Projekt erstellt haben, können Sie zum neu erstellten Projektverzeichnis navigieren.

Wenn Sie das Verzeichnis in das Projekt wechseln, können Sie die verschiedenen Ordner und Dateien erkunden, aus denen die Next.js-Projektstruktur besteht.

Das Verständnis der Projektstruktur ist für die effektive Entwicklung und Organisation Ihrer Next.js-Anwendung unerlässlich. Mit Hilfe der offiziellen Dokumentation können Sie Best Practices nutzen und Einblicke in die Strukturierung Ihres Codes, die Verwaltung statischer Assets und die Erstellung wiederverwendbarer Komponenten gewinnen.

Installieren unserer Abhängigkeiten

Um die passwortlose Authentifizierung in unserem Next.js-Projekt mit NextAuth.js zu aktivieren, müssen wir zunächst die erforderlichen Abhängigkeiten installieren. Führen Sie den Befehl "yarn add next-auth nodemailer" aus, um sowohl NextAuth.js als auch nodemailer zu unserem Projekt hinzuzufügen.

Wir verwenden nodemailer, da es ein beliebtes und vielseitiges Modul für den E-Mail-Versand in Node.js ist. Es bietet eine einfache und zuverlässige Möglichkeit, die magischen Links oder Einmalcodes, die für die passwortlose Authentifizierung erforderlich sind, per E-Mail zu versenden.

Als nächstes integrieren wir Prisma als unseren Datenbankadapter. Beginnen Sie mit der Installation der benötigten Prisma-Pakete mit dem Befehl:

yarn add @prisma/client @next-auth/prisma-adapter

Diese Pakete ermöglichen eine nahtlose Kommunikation zwischen unserer Next.js-Anwendung und der Datenbank. Zusätzlich müssen wir auch Prisma als Dev-Abhängigkeit installieren, indem wir folgendes ausführen:

yarn add prisma --dev

Dieser Schritt stellt sicher, dass wir die notwendigen Werkzeuge haben, um mit Prisma und seinem automatisch generierten Query Builder für Datenbankinteraktionen zu arbeiten.

Durch die Installation dieser Abhängigkeiten legen wir den Grundstein für die Implementierung der passwortlosen Authentifizierung mit NextAuth.js und Prisma in unserem Next.js-Projekt.

Prisma einrichten

Um die passwortlose Authentifizierung in einem Next.js-Projekt zu verwenden, müssen Sie Prisma einrichten und Zugang zu einem SMTP-Server für den E-Mail-Versand haben. Dieses Tutorial führt Sie durch die Verwendung Ihres persönlichen Gmail-Kontos zum Versenden von E-Mails. Folgen Sie den folgenden Schritten für eine erfolgreiche Einrichtung.

Erstellen Sie zunächst einen Ordner "prisma" im Stammverzeichnis Ihres Projekts. In diesem Ordner werden die Prisma-bezogenen Dateien und Konfigurationen gespeichert. Erstellen Sie dann innerhalb des Ordners "prisma" eine neue Datei mit dem Namen "schema.prisma". Die Schemadatei definiert die Struktur Ihrer Datenbank und dient als Vorlage für den automatisch generierten Code von Prisma.

Falls Sie mit dem Konzept eines Schemas nicht vertraut sind, keine Sorge! Ein Schema legt die Tabellen, Felder, Beziehungen und Beschränkungen Ihrer Datenbank fest. Um das Schema zu erstellen, können Sie die offizielle Dokumentation von NextAuth.js zu Rate ziehen und das dort bereitgestellte Beispielschema kopieren. Dieses Schema ist ein Ausgangspunkt und kann an die Anforderungen Ihrer Anwendung angepasst werden.

Als Nächstes erstellen Sie eine ".env"-Datei im Stammverzeichnis Ihres Projekts. In dieser Datei werden Ihre Umgebungsvariablen gespeichert, einschließlich der notwendigen Konfigurationen für Ihren SMTP-Server. Um die ".env"-Datei zu füllen, können Sie die unten aufgeführten Beispielkonfigurationen kopieren. Achten Sie darauf, dass Sie die Anmeldedaten für Ihr Gmail-Konto und die Einstellungen für den SMTP-Server in die entsprechenden Felder eingeben.

EMAIL_SERVER_USER="YourGmailAddress"
EMAIL_SERVER_PASSWORD="GmailPassOrGeneratedPass"
EMAIL_SERVER_HOST=smtp.gmail.com
EMAIL_SERVER_PORT=587
EMAIL_FROM="noreply@example.com"

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=ThisNeedsToBeSuperSecret

Wenn Sie diese Schritte befolgen, haben Sie Prisma eingerichtet und den SMTP-Server für den Versand von E-Mails über Ihr Gmail-Konto konfiguriert. Diese Vorbereitungen sind entscheidend für die Aktivierung des passwortlosen Authentifizierungsflusses in Ihrem Next.js-Projekt.

Hinweis

Sie müssen ein App-Passwort erstellen, wenn Sie die Zwei-Faktoren-Authentifizierung (2FA) für Ihr Google-Konto aktiviert haben. Ein App-Passwort ist ein spezielles Passwort, das den Zugriff auf bestimmte Apps oder Geräte ermöglicht, ohne Ihr primäres Google-Kontopasswort preiszugeben. Folgen Sie den nachstehenden Anweisungen, um ein App-Passwort zu erstellen.

1. Rufen Sie die Seite mit den Google-Kontoeinstellungen auf, indem Sie https://myaccount.google.com/ besuchen.

2. Navigieren Sie zur Registerkarte "Sicherheit".

3. Suchen Sie den Abschnitt "2FA", scrollen Sie nach unten und wählen Sie "App-Passwörter".

4. Möglicherweise werden Sie aufgefordert, das Passwort für Ihr Google-Konto zur Sicherheitsüberprüfung erneut einzugeben.

5. Wählen Sie in der Dropdown-Liste "App auswählen" die Option "Mail" oder "Andere (benutzerdefinierter Name)".

• Wenn die Option "Mail" verfügbar ist, wählen Sie sie aus.

• Wenn die Option "Mail" nicht verfügbar ist, wählen Sie "Andere (Benutzerdefinierter Name)" und geben Sie einen benutzerdefinierten Namen zur Identifizierung ein.

6. Klicken Sie auf die Schaltfläche "Generieren" oder "Passwort generieren".

7. Google generiert ein eindeutiges App-Passwort für Sie. Notieren Sie sich dieses Passwort, da wir es in unserer Anwendung für den Versand von E-Mails verwenden werden.

8. Verwenden Sie dieses generierte App-Passwort in der SMTP-Server-Konfiguration Ihrer Next.js-Anwendung. Ersetzen Sie Ihr reguläres Gmail-Kontopasswort durch dieses App-Passwort.

Dadurch wird sichergestellt, dass Ihre Anwendung auch bei aktivierter 2FA sicher E-Mails über Ihr Gmail-Konto versenden kann.

PostgreSQL mit Supabase

Bevor wir fortfahren können, müssen wir sicherstellen, dass die Datenbank für unser Projekt korrekt funktioniert. Für diese Demo empfehlen wir die Verwendung der Supabase PostgreSQL-Datenbank. Um mit einem Supabase-Projekt zu beginnen und die PostgreSQL-Verbindungs-URL zu erhalten, führen Sie die folgenden Schritte aus:

1. Gehen Sie zu supabase.io und melden Sie sich bei Ihrem Konto an oder erstellen Sie ein neues, wenn Sie noch keines haben.

2. Sobald Sie angemeldet sind, werden Sie zum Supabase-Dashboard weitergeleitet. Klicken Sie auf "Neues Projekt erstellen", um ein neues Projekt zu starten.

3. Benennen Sie Ihr Projekt und wählen Sie die Region aus, die Ihrem aktuellen Standort am nächsten liegt. Merken Sie sich Ihr Passwort, Sie brauchen es später noch.

4. Wenn Sie das Projekt erstellt haben, werden Sie zum Projekt-Dashboard weitergeleitet. Klicken Sie in der linken Seitenleiste auf "Datenbank", um auf die Datenbankeinstellungen zuzugreifen.

5. Im Abschnitt "Datenbank" finden Sie die PostgreSQL-Verbindungs-URL. Diese URL enthält alle notwendigen Informationen für die Verbindung mit der Datenbank Ihres Supabase-Projekts, wie z. B. Host, Port, Datenbankname, Benutzername und Passwort. Sie wird in folgendem Format angezeigt: postgres://<Benutzername>:<Passwort>@<Host>:<Port>/<Datenbank>

6. Kopieren Sie die PostgreSQL-Verbindungs-URL und bewahren Sie sie sicher auf. Sie benötigen sie, um eine Verbindung zwischen Ihrer Anwendung und der Supabase-Datenbank herzustellen.

    // .env
    
    DATABASE_URL=postgresql://postgres:[Passwort]@db.ixjsisbwdafsjvgifliu.supabase.co:5432/postgres
    ```

Lassen Sie uns nun sicherstellen, dass wir unseren Prisma-Client generieren, indem wir den folgenden Befehl ausführen: `npx prisma generate`.

Der Prisma-Client ist ein Datenbank-Client, der automatisch auf der Grundlage Ihres Schemas generiert wird. Standardmäßig wird der Prisma-Client im Ordner `node_modules/.prisma/client` erzeugt, aber Sie können [bei Bedarf einen eigenen Speicherort angeben](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path).

Als nächstes werden wir unsere erste Migration erstellen. Führen Sie den folgenden Befehl aus: `npx prisma migrate dev`. Sie können jeder Migration einen beschreibenden Namen geben.

In Prisma ist eine Migration eine Methode, mit der Sie Anpassungen an Ihrem Datenbankschema im Laufe der Zeit vornehmen können. Sie ermöglicht es Ihnen, Ihre Datenbankstruktur zu ändern, ohne dass bereits vorhandene Daten verloren gehen. Diese Migrationen sind von entscheidender Bedeutung, da sie sicherstellen, dass Ihr Datenbankschema mit den sich ändernden Anforderungen Ihrer Anwendung übereinstimmt. Mit dem Migrationstool von Prisma können Sie diese Änderungen bequem versionieren, anwenden und rückgängig machen, was die Teamarbeit vereinfacht und die Aufrechterhaltung eines einheitlichen Datenbankschemas in verschiedenen Umgebungen ermöglicht.

Wenn wir nun unsere Datenbank überprüfen, können wir sehen, dass sich die Änderungen aus unserer ersten Migration im Datenbankbereich widerspiegeln.

Durch die Durchführung der ersten Migration haben wir die im Migrationsskript definierten Änderungen an unserem Datenbankschema vorgenommen.

![Datenbanktabellen nach der Migration](https://drive.google.com/uc?export=view&id=1PZ6ban5h4VZs3UHQoJS_5kNYkhqs-MAx)

### Einrichten von NextAuthJS mit Prisma Adapter

In einer Next.js-Anwendung verwendet NextAuthJS die Catch-All-Route, auch bekannt als Wildcard- oder Fallback-Route, um Authentifizierungsanfragen zu verwalten. Diese dynamische Route wird mit Hilfe des dateibasierten Routingsystems in Next.js definiert.

Erstellen Sie einen Ordner namens "**api**" innerhalb Ihres "**app**"-Verzeichnisses. Erstellen Sie innerhalb des Ordners "**api**" einen Ordner "**auth**". Erstellen Sie innerhalb des Ordners "**auth**" eine Catch-All-Route namens "**[...nextauth]**" als Ordner. Erstellen Sie schließlich eine Datei "**route.ts**" innerhalb des Ordners "catch-all route" und fügen Sie den folgenden Code hinzu.

```jsx
// app/api/auth/[...nextauth]/route.ts
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import { PrismaClient } from '@prisma/client';
import NextAuth from 'next-auth';
import EmailProvider from 'next-auth/providers/email';

const prisma = new PrismaClient();

export const authOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },
      from: process.env.EMAIL_FROM,
    }),
  ]
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

In the catch-all route file, we import the NextAuthJS library and set up the authentication options, providers, and configurations. NextAuthJS handles the parsing of incoming requests, identifies the necessary authentication action, and executes the appropriate logic according to the specified options.

Der mitgelieferte Code richtet NextAuthJS mit dem Prisma-Adapter für die Authentifizierung über einen E-Mail-Anbieter ein. Lassen Sie uns jede Anweisung erklären:

1. Importiert:

• PrismaAdapter und PrismaClient werden von @next-auth/prisma-adapter bzw. @prisma/client importiert. Diese werden verwendet, um NextAuthJS mit Prisma zu integrieren.

• NextAuth wird von next-auth importiert und ist die Hauptbibliothek für die Handhabung der Authentifizierung in Next.js-Anwendungen.

• EmailProvider wird von next-auth/providers/email importiert und wird als Provider für E-Mail-basierte Authentifizierung verwendet.

2. Prisma-Einrichtung:

• Eine Instanz von PrismaClient wird mit new PrismaClient() erstellt. Dies ermöglicht die Kommunikation mit dem Prisma ORM und der zugrunde liegenden Datenbank.

3. Authentifizierungs-Optionen:

• authOptions ist ein Objekt, das die Konfiguration für die Authentifizierung in NextAuthJS definiert.

• Die Eigenschaft Adapter ist auf PrismaAdapter(prisma) gesetzt, was NextAuthJS mit Prisma unter Verwendung des PrismaAdapters verbindet.

• Das Array providers enthält einen einzigen Provider, EmailProvider. Er wird mit den notwendigen Details des E-Mail-Servers und der Absender E-Mail-Adresse konfiguriert.

4. NextAuth Handler:

• Die Funktion NextAuth wird mit authOptions als Argument aufgerufen und erstellt einen Authentifizierungs-Handler.

• Der resultierende Handler wird der Variablen handler zugewiesen.

5. Exportieren:

• handler wird als GET und POST exportiert, um sowohl HTTP GET als auch POST Anfragen zu unterstützen.

Lassen wir nun unseren Server laufen und testen wir die Funktionalität. Zuerst starten Sie den Entwicklungsserver, indem Sie yarn dev ausführen. Als nächstes öffnen Sie Ihren Browser und besuchen Sie localhost:3000, um die Anwendung in Aktion zu sehen.

Um die Authentifizierungsfunktionalität zu testen, besuchen Sie localhost:3000/api/auth/signin. Hier werden Sie die Magie von NextAuthJS erleben. Die mit NextAuthJS mitgelieferte Vorlage ermöglicht einen passwortlosen Anmeldeprozess. Um es auszuprobieren, geben Sie eine gültige E-Mail-Adresse ein.

Sobald Sie die E-Mail abgeschickt haben, kümmert sich NextAuthJS um den Prozess hinter den Kulissen. Zunächst wird eine E-Mail generiert und an die angegebene E-Mail-Adresse gesendet, die einen eindeutigen Anmeldelink enthält. Dieser Link dient als sicheres Authentifizierungs-Token für den Benutzer. Wenn der Benutzer dann auf den Link klickt, validiert NextAuthJS das Token und authentifiziert den Benutzer.

Diese passwortlose Anmeldefunktion erhöht die Sicherheit und die Benutzerfreundlichkeit, da keine Passwörter mehr benötigt werden. Die Benutzer können schnell und sicher auf ihre Konten zugreifen, indem sie einfach auf den per E-Mail erhaltenen Link klicken. Dadurch wird der Anmeldevorgang rationalisiert und das Risiko von kennwortbezogenen Schwachstellen verringert.

Wenn ein Benutzer auf die von NextAuthJS generierte Anmeldungs-E-Mail klickt und authentifiziert wird, laufen im Hintergrund mehrere Aktionen ab, um eine nahtlose Anmeldung zu ermöglichen.

1. Validierung des E-Mail-Links: Wenn der Benutzer auf den Anmeldelink klickt, validiert NextAuthJS das im Link eingebettete Authentifizierungs-Token. Dieses Token gewährleistet die Sicherheit und Integrität des Authentifizierungsprozesses.

2. Authentifizierungsprozess: Nach erfolgreicher Validierung des Tokens identifiziert NextAuthJS den Benutzer und schließt den Authentifizierungsprozess ab. Es verifiziert die Identität des Benutzers auf der Grundlage des bereitgestellten Tokens und zusätzlicher konfigurierter Authentifizierungsfaktoren, wie z.B. Multi-Faktor-Authentifizierung.

3. Sitzungserstellung: Nach erfolgreicher Authentifizierung erstellt NextAuthJS eine Sitzung für den Benutzer. Eine Sitzung ist ein dauerhafter Zustand, der den Authentifizierungsstatus des Benutzers darstellt und ihm den Zugriff auf geschützte Ressourcen ermöglicht, ohne dass er sich bei nachfolgenden Anfragen erneut authentifizieren muss.

4. Cookies: NextAuthJS setzt sichere HTTP-only-Cookies im Browser des Benutzers, um die Sitzung zu verwalten. Diese Cookies spielen eine entscheidende Rolle bei der Aufrechterhaltung des Authentifizierungsstatus des Benutzers über mehrere Anfragen hinweg. Die Cookies enthalten typischerweise ein Sitzungscookie und optional ein Refresh-Token-Cookie, abhängig von der Authentifizierungskonfiguration.

1. Sitzungs-Cookie: Das Sitzungscookie enthält einen Sitzungsbezeichner (z.B. eine zufällig generierte Zeichenkette), der die Sitzung des Benutzers eindeutig identifiziert. Er hilft NextAuthJS, nachfolgende Anfragen der richtigen Sitzung und dem richtigen Benutzer zuzuordnen.

2. CSRF Token Cookie: NextAuthJS setzt ein CSRF (Cross-Site Request Forgery) Token Cookie zum Schutz vor CSRF-Angriffen. Das CSRF-Token ist ein eindeutiger Wert, der von NextAuthJS generiert und im Cookie gespeichert wird. Er wird verwendet, um die Authentizität der nachfolgenden Anfragen des Benutzers zu überprüfen. Wenn der Benutzer Formulare absendet oder sensible Aktionen durchführt, wird das CSRF-Token in die Header oder den Body der Anfrage aufgenommen, um sicherzustellen, dass die Anfrage aus der Sitzung des authentifizierten Benutzers stammt und nicht von einer bösartigen Quelle.

3. Callback URL Cookie: NextAuthJS setzt ein Callback-URL-Cookie, um die ursprüngliche URL zu speichern, auf die der Benutzer versucht hat zuzugreifen, bevor er zum Authentifizierungsfluss weitergeleitet wurde. Dieses Cookie hilft NextAuthJS, den Benutzer nach erfolgreicher Authentifizierung wieder auf die gewünschte Seite umzuleiten. Es sorgt für eine reibungslose Benutzererfahrung, indem es den Benutzer nahtlos zu seinem beabsichtigten Ziel zurückleitet und nicht zu einer generischen Landing Page.

Durch die Verwendung von sicheren HTTP-Cookies stellt NextAuthJS sicher, dass der Authentifizierungsstatus sicher und fälschungssicher bleibt. Die Cookies sind verschlüsselt und verhindern so den unbefugten Zugriff oder die Veränderung durch böswillige Akteure.

Gute Arbeit bei der erfolgreichen Integration von NextAuthJS mit Prisma Adapter in Ihre Next.js Anwendung! Mit der Einfachheit und Anpassungsfähigkeit von NextAuthJS verfügen Sie nun über ein zuverlässiges Authentifizierungssystem.

Den in dieser Anleitung verwendeten Code finden Sie im unten verlinkten GitHub Repository: https://github.com/codelabsacademy/next-auth-guide.

Aber warum hier aufhören? Wenn Sie sich für die Webentwicklung begeistern und Ihre Fähigkeiten verbessern möchten, sollten Sie sich für unser Webentwicklungs-Bootcamp bewerben. Unser Bootcamp bietet eine umfassende Lernerfahrung, die Sie mit dem Wissen und den praktischen Fähigkeiten ausstattet, die Sie benötigen, um in der dynamischen Welt der Webentwicklung zu bestehen.

In unserem Bootcamp sammeln Sie praktische Erfahrungen mit Spitzentechnologien, arbeiten an realen Projekten und werden von Branchenexperten persönlich angeleitet. Egal, ob Sie Anfänger oder erfahrener Entwickler sind, unser Programm ist darauf ausgelegt, Ihre Webentwicklungsfähigkeiten auf die nächste Stufe zu heben.

Verpassen Sie nicht diese Gelegenheit, Ihre Reise in die Webentwicklung zu beschleunigen. [Bewerben Sie sich noch heute für unser Web Development Bootcamp (https://codelabsacademy.com/application) und schöpfen Sie Ihr volles Potenzial im spannenden Bereich der Webentwicklung aus. Lassen Sie uns gemeinsam fantastische digitale Erlebnisse schaffen und die Zukunft des Internets gestalten.