Είσοδος χωρίς κωδικό πρόσβασης στο NextJs 13

Αυτό το άρθρο θα εμβαθύνει στα βήματα που απαιτούνται για την υλοποίηση του ελέγχου ταυτότητας χωρίς κωδικό πρόσβασης σε ένα έργο Next.js χρησιμοποιώντας τη βιβλιοθήκη NextAuth.js. Επιπλέον, θα χρησιμοποιήσουμε το Prisma ως προσαρμογέα βάσης δεδομένων μας για να το πετύχουμε αυτό.

Ο έλεγχος ταυτότητας χωρίς κωδικό πρόσβασης είναι μια καινοτόμος προσέγγιση που εξαλείφει την ανάγκη για παραδοσιακούς συνδυασμούς ονομάτων χρήστη και κωδικών πρόσβασης. Αντίθετα, προσφέρει μια πιο ασφαλή και φιλική προς το χρήστη εμπειρία ελέγχου ταυτότητας αξιοποιώντας εναλλακτικές μεθόδους, όπως μαγικούς συνδέσμους email ή κωδικούς μίας χρήσης που αποστέλλονται μέσω SMS.

Το Next.js είναι ένα δημοφιλές πλαίσιο React για τη δημιουργία εφαρμογών ιστού, γνωστό για την απλότητα και την αποτελεσματικότητά του. Μπορούμε εύκολα να ενσωματώσουμε έλεγχο ταυτότητας χωρίς κωδικό πρόσβασης στο έργο μας ενσωματώνοντας το NextAuth.js, μια βιβλιοθήκη ελέγχου ταυτότητας που έχει σχεδιαστεί ρητά για το Next.js.

Επιπλέον, θα βασιζόμαστε στο Prisma ως προσαρμογέα βάσης δεδομένων μας. Το Prisma είναι ένα εργαλείο ORM (Object-Relational Mapping) που απλοποιεί τις αλληλεπιδράσεις της βάσης δεδομένων παρέχοντας ένα πρόγραμμα δημιουργίας ερωτημάτων που είναι ασφαλές για τον τύπο και δημιουργείται αυτόματα. Υποστηρίζει πολλαπλές βάσεις δεδομένων, συμπεριλαμβανομένων των PostgreSQL, MySQL και SQLite, καθιστώντας το μια ευέλικτη επιλογή για την εφαρμογή ελέγχου ταυτότητας.

Σε όλο αυτόν τον οδηγό, θα παρέχουμε οδηγίες βήμα προς βήμα σχετικά με τον τρόπο ρύθμισης και διαμόρφωσης ελέγχου ταυτότητας χωρίς κωδικό πρόσβασης χρησιμοποιώντας το NextAuth.js σε ένα έργο Next.js. Θα δείξουμε επίσης πώς να ενσωματώνουμε το Prisma ως τον προσαρμογέα βάσης δεδομένων μας, επιτρέποντας την απρόσκοπτη επικοινωνία μεταξύ της εφαρμογής μας και της βάσης δεδομένων.

Θα διερευνήσουμε τώρα πώς να βελτιώσουμε την ασφάλεια και την εμπειρία χρήστη της εφαρμογής Next.js χρησιμοποιώντας έλεγχο ταυτότητας χωρίς κωδικό πρόσβασης και τις δυνατότητες του NextAuth.js και του Prisma. Ας ξεκινήσουμε.

Τι είναι η σύνδεση χωρίς κωδικό πρόσβασης;

Η σύνδεση χωρίς κωδικό πρόσβασης, όπως υποδηλώνει το όνομα, είναι μια μέθοδος ελέγχου ταυτότητας που καταργεί την ανάγκη για παραδοσιακούς συνδυασμούς ονομάτων χρήστη και κωδικών πρόσβασης. Αντίθετα, χρησιμοποιεί εναλλακτικά μέσα επαλήθευσης της ταυτότητας ενός χρήστη, όπως μαγικούς συνδέσμους email ή κωδικούς που αποστέλλονται μία φορά μέσω SMS. Αυτή η προσέγγιση προσφέρει πολλά πλεονεκτήματα σε σχέση με τις παραδοσιακές μεθόδους σύνδεσης. Πρώτον, εξαλείφει τον κίνδυνο ευπάθειας που σχετίζεται με τον κωδικό πρόσβασης, όπως αδύναμους κωδικούς πρόσβασης ή επαναχρησιμοποίηση κωδικών πρόσβασης. Δεύτερον, απλοποιεί την εμπειρία χρήστη αφαιρώντας την ανάγκη να θυμάστε και να εισάγετε σύνθετους κωδικούς πρόσβασης.

Για να εφαρμόσουμε σύνδεση χωρίς κωδικό πρόσβασης χρησιμοποιώντας μαγικούς συνδέσμους email ή κωδικούς μίας χρήσης, χρειαζόμαστε έναν διακομιστή SMTP (Simple Mail Transfer Protocol).

Ένας διακομιστής SMTP είναι υπεύθυνος για την αποστολή μηνυμάτων ηλεκτρονικού ταχυδρομείου μέσω Διαδικτύου. Στο πλαίσιο του ελέγχου ταυτότητας χωρίς κωδικό πρόσβασης, ο διακομιστής στέλνει τους μαγικούς συνδέσμους ή τους κωδικούς μίας χρήσης στην καταχωρημένη διεύθυνση email του χρήστη. Όταν ένας χρήστης ξεκινά τη διαδικασία σύνδεσης, δημιουργείται ένα email που περιέχει έναν μοναδικό σύνδεσμο ή κωδικό και αποστέλλεται στον χρήστη. Ο χρήστης μπορεί στη συνέχεια να κάνει κλικ στον σύνδεσμο ή να εισαγάγει τον κωδικό για να ολοκληρώσει τη διαδικασία ελέγχου ταυτότητας. Ο διακομιστής SMTP λειτουργεί ως ενδιάμεσος μεταξύ της εφαρμογής και της υπηρεσίας email του χρήστη, διασφαλίζοντας την ασφαλή και αξιόπιστη παράδοση των μηνυμάτων ελέγχου ταυτότητας. Χρησιμοποιώντας έναν διακομιστή SMTP, μπορούμε να εφαρμόσουμε αποτελεσματικά τη σύνδεση χωρίς κωδικό πρόσβασης και να παρέχουμε μια απρόσκοπτη εμπειρία ελέγχου ταυτότητας για τους χρήστες μας.

Ας αρχίσουμε!

Αρχικά, πρέπει να δημιουργήσουμε ένα νέο νέο έργο Next.js. Για να το κάνετε αυτό, χρησιμοποιήστε την ακόλουθη εντολή:

npx create-next-app@latest

Αφού δημιουργήσετε το νέο νέο έργο Next.js, μπορείτε να πλοηγηθείτε στον νέο κατάλογο του έργου.

Αλλάζοντας τον κατάλογο στο έργο, θα μπορείτε να εξερευνήσετε τους διάφορους φακέλους και τα αρχεία που συνθέτουν τη δομή του έργου Next.js.

Η κατανόηση της δομής του έργου είναι απαραίτητη για την αποτελεσματική ανάπτυξη και οργάνωση της εφαρμογής Next.js. Ανατρέχοντας στην επίσημη τεκμηρίωση, μπορείτε να αξιοποιήσετε τις βέλτιστες πρακτικές και να αποκτήσετε πληροφορίες σχετικά με τον τρόπο δομής του κώδικά σας, διαχείρισης στατικών στοιχείων και δημιουργία επαναχρησιμοποιήσιμων εξαρτημάτων.

Εγκατάσταση των εξαρτήσεων μας

Για να ενεργοποιήσουμε τον έλεγχο ταυτότητας χωρίς κωδικό πρόσβασης στο έργο μας Next.js χρησιμοποιώντας το NextAuth.js, πρέπει πρώτα να εγκαταστήσουμε τις απαιτούμενες εξαρτήσεις. Εκτελέστε την εντολή «yarn add next-auth nodemailer» για να προσθέσετε το NextAuth.js και το nodemailer στο έργο μας.

Χρησιμοποιούμε συγκεκριμένα το nodemailer καθώς είναι μια δημοφιλής και ευέλικτη ενότητα για την αποστολή email στο Node.js. Παρέχει έναν απλό και αξιόπιστο τρόπο αποστολής των μαγικών συνδέσμων ή των κωδικών μιας χρήσης που απαιτούνται για έλεγχο ταυτότητας χωρίς κωδικό πρόσβασης μέσω email.

Στη συνέχεια, ας ενσωματώσουμε το Prisma ως τον προσαρμογέα της βάσης δεδομένων μας. Ξεκινήστε εγκαθιστώντας τα απαιτούμενα πακέτα Prisma χρησιμοποιώντας την εντολή:

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

Αυτά τα πακέτα θα επιτρέψουν την απρόσκοπτη επικοινωνία μεταξύ της εφαρμογής Next.js και της βάσης δεδομένων. Επιπλέον, πρέπει επίσης να εγκαταστήσουμε το Prisma ως εξάρτηση dev εκτελώντας:

yarn add prisma --dev

Αυτό το βήμα διασφαλίζει ότι έχουμε τα απαραίτητα εργαλεία για να εργαστούμε με το Prisma και το πρόγραμμα δημιουργίας ερωτημάτων που δημιουργείται αυτόματα για αλληλεπιδράσεις με βάση δεδομένων.

Εγκαθιστώντας αυτές τις εξαρτήσεις, θέσαμε τα θεμέλια για την εφαρμογή ελέγχου ταυτότητας χωρίς κωδικό πρόσβασης χρησιμοποιώντας το NextAuth.js και το Prisma στο έργο μας Next.js.

Ρύθμιση Prisma

Είναι απαραίτητο να ρυθμίσετε το Prisma και να έχετε πρόσβαση σε έναν διακομιστή SMTP για αποστολή email για να χρησιμοποιήσετε έλεγχο ταυτότητας χωρίς κωδικό πρόσβασης σε ένα έργο Next.js. Αυτό το σεμινάριο θα σας καθοδηγήσει στη χρήση του προσωπικού σας λογαριασμού Gmail για την αποστολή email. Ακολουθήστε τα παρακάτω βήματα για μια επιτυχημένη εγκατάσταση.

Αρχικά, δημιουργήστε έναν φάκελο "prisma" στη ρίζα του έργου σας. Αυτός ο φάκελος θα φιλοξενήσει τα αρχεία και τις διαμορφώσεις που σχετίζονται με το Prisma. Στη συνέχεια, μέσα στο φάκελο "prisma", δημιουργήστε ένα νέο αρχείο που ονομάζεται "schema.prisma". Το αρχείο σχήματος ορίζει τη δομή της βάσης δεδομένων σας και χρησιμεύει ως σχέδιο για τον κώδικα που δημιουργείται αυτόματα από το Prisma.

Εάν είστε νέοι στην έννοια του σχήματος, μην ανησυχείτε! Ένα σχήμα καθορίζει τους πίνακες, τα πεδία, τις σχέσεις και τους περιορισμούς της βάσης δεδομένων σας. Για να δημιουργήσετε το σχήμα, μπορείτε να ανατρέξετε στην την επίσημη τεκμηρίωση του NextAuth.js και να αντιγράψετε το παράδειγμα σχήματος που παρέχεται εκεί. Αυτό το σχήμα είναι ένα σημείο εκκίνησης και μπορεί να προσαρμοστεί ώστε να ταιριάζει στις απαιτήσεις της εφαρμογής σας.

Στη συνέχεια, δημιουργήστε ένα αρχείο ".env" στη ρίζα του έργου σας. Αυτό το αρχείο θα αποθηκεύσει τις μεταβλητές του περιβάλλοντος σας, συμπεριλαμβανομένων των απαραίτητων διαμορφώσεων για τον διακομιστή SMTP. Για να συμπληρώσετε το αρχείο ".env", μπορείτε να αντιγράψετε τα παραδείγματα διαμορφώσεων που παρέχονται παρακάτω. Βεβαιωθείτε ότι έχετε εισαγάγει τα διαπιστευτήρια του λογαριασμού σας Gmail και τις ρυθμίσεις διακομιστή SMTP στα αντίστοιχα πεδία.

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

Ακολουθώντας αυτά τα βήματα, θα έχετε ρυθμίσει το Prisma και θα έχετε ρυθμίσει τον διακομιστή SMTP για την αποστολή email χρησιμοποιώντας το λογαριασμό σας στο Gmail. Αυτές οι προετοιμασίες είναι ζωτικής σημασίας για την ενεργοποίηση της ροής ελέγχου ταυτότητας χωρίς κωδικό πρόσβασης στο έργο Next.js.

Σημείωση

Πρέπει να δημιουργήσετε έναν κωδικό πρόσβασης εφαρμογής εάν έχετε ενεργοποιήσει τον έλεγχο ταυτότητας δύο παραγόντων (2FA) για τον λογαριασμό σας Google. Ο κωδικός πρόσβασης εφαρμογής είναι ένας ξεχωριστός κωδικός πρόσβασης που παρέχει πρόσβαση σε συγκεκριμένες εφαρμογές ή συσκευές χωρίς να αποκαλύπτεται ο κύριος κωδικός πρόσβασης του λογαριασμού σας Google. Ακολουθήστε τις παρακάτω οδηγίες για να δημιουργήσετε έναν κωδικό πρόσβασης εφαρμογής.

Μεταβείτε στη σελίδα ρυθμίσεων Λογαριασμού Google μεταβαίνοντας στη διεύθυνση https://myaccount.google.com/.
Μεταβείτε στην καρτέλα "Ασφάλεια".
Αναζητήστε την ενότητα "2FA", κάντε κύλιση προς τα κάτω και επιλέξτε "Κωδικοί πρόσβασης εφαρμογής".

Μπορεί να σας ζητηθεί να εισαγάγετε ξανά τον κωδικό πρόσβασης του λογαριασμού σας Google για επαλήθευση ασφαλείας.
Στο αναπτυσσόμενο μενού "Επιλογή εφαρμογής", επιλέξτε "Αλληλογραφία" ή "Άλλο (Προσαρμοσμένο όνομα)".

Εάν είναι διαθέσιμη η επιλογή "Mail", επιλέξτε την.
Εάν η επιλογή "Mail" δεν είναι διαθέσιμη, επιλέξτε "Άλλο (Προσαρμοσμένο όνομα)" και δώστε ένα προσαρμοσμένο όνομα για αναγνώριση.

Κάντε κλικ στο κουμπί «Δημιουργία» ή «Δημιουργία κωδικού πρόσβασης».
Η Google θα δημιουργήσει έναν μοναδικό κωδικό πρόσβασης εφαρμογής για εσάς. Σημειώστε αυτόν τον κωδικό πρόσβασης, καθώς θα τον χρησιμοποιήσουμε στην εφαρμογή μας για την αποστολή email.
Χρησιμοποιήστε αυτόν τον κωδικό πρόσβασης εφαρμογής που δημιουργήθηκε στη διαμόρφωση διακομιστή SMTP της εφαρμογής Next.js. Αντικαταστήστε τον κανονικό κωδικό πρόσβασης του λογαριασμού σας στο Gmail με αυτόν τον κωδικό πρόσβασης εφαρμογής.

Αυτό διασφαλίζει ότι ακόμη και με ενεργοποιημένο το 2FA, η εφαρμογή σας μπορεί να στέλνει με ασφάλεια μηνύματα ηλεκτρονικού ταχυδρομείου χρησιμοποιώντας τον λογαριασμό σας στο Gmail.

PostgreSQL χρησιμοποιώντας το Supabase

Προτού μπορέσουμε να προχωρήσουμε, πρέπει να διασφαλίσουμε ότι η βάση δεδομένων για το έργο μας λειτουργεί σωστά. Για αυτήν την επίδειξη, συνιστούμε να χρησιμοποιήσετε τη βάση δεδομένων Supabase PostgreSQL. Για να ξεκινήσετε με ένα έργο Supabase και να αποκτήσετε τη διεύθυνση URL σύνδεσης PostgreSQL, ακολουθήστε τα εξής βήματα:

Μεταβείτε στο supabase.io και συνδεθείτε στον λογαριασμό σας ή δημιουργήστε έναν νέο εάν δεν έχετε.
Μόλις συνδεθείτε, θα κατευθυνθείτε στον πίνακα ελέγχου του Supabase. Κάντε κλικ στο "Δημιουργία νέου έργου" για να ξεκινήσετε ένα νέο έργο.
Ονομάστε το έργο σας και επιλέξτε την περιοχή που βρίσκεται πιο κοντά στην τρέχουσα τοποθεσία σας. Θυμηθείτε τον κωδικό πρόσβασής σας, θα τον χρειαστείτε αργότερα.
Όταν δημιουργήσετε το έργο, θα μεταφερθείτε στον πίνακα ελέγχου του έργου. Κάντε κλικ στο "Βάση δεδομένων" στην αριστερή πλαϊνή γραμμή για πρόσβαση στις ρυθμίσεις της βάσης δεδομένων.
Στην ενότητα "Βάση δεδομένων", θα βρείτε τη διεύθυνση URL σύνδεσης PostgreSQL. Αυτή η διεύθυνση URL περιέχει όλες τις απαραίτητες πληροφορίες για τη σύνδεση στη βάση δεδομένων του έργου Supabase, όπως τον κεντρικό υπολογιστή, τη θύρα, το όνομα της βάσης δεδομένων, το όνομα χρήστη και τον κωδικό πρόσβασης. Θα εμφανίζεται με τη μορφή: postgres://<όνομα χρήστη>:<κωδικός πρόσβασης>@<host>:<port>/<βάση δεδομένων>

Αντιγράψτε τη διεύθυνση URL σύνδεσης PostgreSQL και διατηρήστε την ασφαλή. Θα το χρειαστείτε για να δημιουργήσετε μια σύνδεση μεταξύ της εφαρμογής σας και της βάσης δεδομένων Supabase.

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

Τώρα, ας διασφαλίσουμε ότι έχουμε δημιουργήσει τον πελάτη Prisma εκτελώντας την ακόλουθη εντολή: `npx prisma generate`.

Το Prisma Client είναι ένας πελάτης βάσης δεδομένων που δημιουργείται αυτόματα με βάση το σχήμα σας. Από προεπιλογή, το Prisma Client δημιουργείται στο φάκελο "node_modules/.prisma/client", αλλά μπορείτε [να καθορίσετε μια προσαρμοσμένη τοποθεσία εάν χρειάζεται](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path).

Στη συνέχεια, θα προχωρήσουμε στη δημιουργία της αρχικής μας μετεγκατάστασης. Εκτελέστε την ακόλουθη εντολή: `npx prisma migrate dev`. Μπορείτε να δώσετε σε κάθε μετεγκατάσταση ένα περιγραφικό όνομα.

Στο Prisma, η μετεγκατάσταση είναι μια μέθοδος που χρησιμοποιείται για τη διαχείριση προσαρμογών στο σχήμα της βάσης δεδομένων σας καθώς προχωρά ο χρόνος. Σας επιτρέπει να τροποποιήσετε τη δομή της βάσης δεδομένων σας χωρίς να χάσετε τυχόν προϋπάρχοντα δεδομένα. Αυτές οι μετεγκαταστάσεις είναι ζωτικής σημασίας, καθώς διασφαλίζουν ότι το σχήμα της βάσης δεδομένων σας ευθυγραμμίζεται με τις ανάγκες της εφαρμογής σας καθώς αλλάζουν. Με το εργαλείο μετεγκατάστασης του Prisma, μπορείτε εύκολα να εκδώσετε, να εφαρμόσετε και να επαναφέρετε αυτές τις αλλαγές, απλοποιώντας την ομαδική εργασία και διατηρώντας ένα ενιαίο σχήμα βάσης δεδομένων σε διάφορα περιβάλλοντα.

Τώρα, εάν ελέγξουμε τη βάση δεδομένων μας, θα μπορέσουμε να δούμε τις αλλαγές από την αρχική μας μετεγκατάσταση που αντικατοπτρίζονται στην ενότητα της βάσης δεδομένων.

Εκτελώντας την αρχική μετεγκατάσταση, έχουμε εφαρμόσει τις τροποποιήσεις στο σχήμα της βάσης δεδομένων μας όπως ορίζεται στο σενάριο μετεγκατάστασης.

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

### Ρύθμιση του NextAuthJS με τον προσαρμογέα Prisma

Σε μια εφαρμογή Next.js, το NextAuthJS χρησιμοποιεί τη διαδρομή catch-all, γνωστή και ως μπαλαντέρ ή εναλλακτική διαδρομή, για τη διαχείριση των αιτημάτων ελέγχου ταυτότητας. Αυτή η δυναμική διαδρομή ορίζεται χρησιμοποιώντας το σύστημα δρομολόγησης που βασίζεται σε αρχεία στο Next.js.

Δημιουργήστε έναν φάκελο με το όνομα "**api**" στον κατάλογό σας "**app**". Μέσα στο φάκελο "**api**", δημιουργήστε έναν φάκελο "**auth**". Μέσα στο φάκελο "**auth**", δημιουργήστε μια διαδρομή catch-all που ονομάζεται "**[...nextauth]**" ως φάκελο. Τέλος, δημιουργήστε ένα αρχείο "**route.ts**" μέσα στο φάκελο catch-all route και προσθέστε τον ακόλουθο κώδικα.

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

Στο αρχείο διαδρομής catch-all, εισάγουμε τη βιβλιοθήκη NextAuthJS και ρυθμίζουμε τις επιλογές ελέγχου ταυτότητας, τους παρόχους και τις διαμορφώσεις. Το NextAuthJS χειρίζεται την ανάλυση των εισερχόμενων αιτημάτων, προσδιορίζει την απαραίτητη ενέργεια ελέγχου ταυτότητας και εκτελεί την κατάλληλη λογική σύμφωνα με τις καθορισμένες επιλογές.

Ο παρεχόμενος κώδικας ρυθμίζει το NextAuthJS με τον προσαρμογέα Prisma για έλεγχο ταυτότητας χρησιμοποιώντας έναν πάροχο email. Ας εξηγήσουμε κάθε δήλωση:

Εισαγωγές:

Το PrismaAdapter και PrismaClient εισάγονται από τα @next-auth/prisma-adapter και @prisma/client, αντίστοιχα. Αυτά χρησιμοποιούνται για την ενσωμάτωση του NextAuthJS με το Prisma.
Το NextAuth εισάγεται από το next-auth και είναι η κύρια βιβλιοθήκη για το χειρισμό του ελέγχου ταυτότητας στις εφαρμογές Next.js.
Το EmailProvider εισάγεται από το next-auth/providers/email και χρησιμοποιείται ως πάροχος για έλεγχο ταυτότητας μέσω email.

Ρύθμιση Prisma:

Δημιουργείται μια παρουσία του PrismaClient χρησιμοποιώντας το new PrismaClient(). Αυτό επιτρέπει την επικοινωνία με το Prisma ORM και την υποκείμενη βάση δεδομένων.

Επιλογές ελέγχου ταυτότητας:

Το authOptions είναι ένα αντικείμενο που ορίζει τη διαμόρφωση για έλεγχο ταυτότητας στο NextAuthJS.
Η ιδιότητα adapter έχει οριστεί σε PrismaAdapter(prisma), η οποία συνδέει το NextAuthJS με το Prisma χρησιμοποιώντας το PrismaAdapter.
Ο πίνακας providers περιέχει έναν μόνο πάροχο, EmailProvider. Έχει διαμορφωθεί με τα απαραίτητα στοιχεία διακομιστή email και τη διεύθυνση email από.

NextAuth Handler:

Η συνάρτηση NextAuth καλείται με το authOptions ως όρισμα, δημιουργώντας έναν χειριστή ελέγχου ταυτότητας.
Ο χειριστής που προκύπτει εκχωρείται στη μεταβλητή handler.

Εξαγωγή:

Το handler εξάγεται ως GET και POST για υποστήριξη τόσο των αιτημάτων HTTP GET όσο και των POST.

Τώρα, ας τρέξουμε τον διακομιστή μας και ας δοκιμάσουμε τη λειτουργικότητα. Αρχικά, ξεκινήστε τον διακομιστή ανάπτυξης εκτελώντας το "yarn dev". Στη συνέχεια, ανοίξτε το πρόγραμμα περιήγησής σας και επισκεφτείτε το "localhost:3000" για να δείτε την εφαρμογή σε δράση.

Για να δοκιμάσετε τη λειτουργία ελέγχου ταυτότητας, επισκεφτείτε το "localhost:3000/api/auth/signin". Εδώ, θα ζήσετε τη μαγεία του NextAuthJS. Το παρεχόμενο πρότυπο που περιλαμβάνεται στο NextAuthJS επιτρέπει μια διαδικασία σύνδεσης χωρίς κωδικό πρόσβασης. Για να το δοκιμάσετε, εισαγάγετε μια έγκυρη διεύθυνση email.

Μόλις υποβάλετε το email, το NextAuthJS θα χειριστεί τη διαδικασία στα παρασκήνια. Αρχικά, θα δημιουργήσει και θα στείλει ένα μήνυμα ηλεκτρονικού ταχυδρομείου που περιέχει έναν μοναδικό σύνδεσμο σύνδεσης στην παρεχόμενη διεύθυνση ηλεκτρονικού ταχυδρομείου. Αυτός ο σύνδεσμος χρησιμεύει ως ασφαλές διακριτικό ελέγχου ταυτότητας για τον χρήστη. Στη συνέχεια, όταν ο χρήστης κάνει κλικ στον σύνδεσμο, το NextAuthJS θα επικυρώσει το διακριτικό και θα ελέγξει την ταυτότητα του χρήστη.

Αυτή η δυνατότητα σύνδεσης χωρίς κωδικό πρόσβασης ενισχύει την ασφάλεια και την εμπειρία χρήστη εξαλείφοντας την ανάγκη για κωδικούς πρόσβασης. Οι χρήστες μπορούν γρήγορα και με ασφάλεια να έχουν πρόσβαση στους λογαριασμούς τους κάνοντας απλά κλικ στον σύνδεσμο που έλαβαν μέσω email. Βελτιώνει τη διαδικασία σύνδεσης και μειώνει τον κίνδυνο ευπάθειας που σχετίζεται με τον κωδικό πρόσβασης.

Όταν ένας χρήστης κάνει κλικ στο μήνυμα ηλεκτρονικού ταχυδρομείου σύνδεσης που δημιουργείται από το NextAuthJS και λαμβάνει τον έλεγχο ταυτότητας, πραγματοποιούνται πολλές ενέργειες στο παρασκήνιο για να διευκολύνουν μια απρόσκοπτη εμπειρία σύνδεσης.

1. Επικύρωση συνδέσμου ηλεκτρονικού ταχυδρομείου: Όταν ο χρήστης κάνει κλικ στον σύνδεσμο σύνδεσης, το NextAuthJS επικυρώνει το διακριτικό ελέγχου ταυτότητας που είναι ενσωματωμένο στον σύνδεσμο. Αυτό το διακριτικό διασφαλίζει την ασφάλεια και την ακεραιότητα της διαδικασίας ελέγχου ταυτότητας.

2. Διαδικασία ελέγχου ταυτότητας: Μετά την επιτυχή επικύρωση διακριτικού, το NextAuthJS προσδιορίζει τον χρήστη και ολοκληρώνει τη διαδικασία ελέγχου ταυτότητας. Επαληθεύει την ταυτότητα του χρήστη με βάση το παρεχόμενο διακριτικό και τυχόν πρόσθετους παράγοντες ελέγχου ταυτότητας που έχουν διαμορφωθεί, όπως ο έλεγχος ταυτότητας πολλαπλών παραγόντων.

3. Δημιουργία περιόδου λειτουργίας: Μετά από επιτυχή έλεγχο ταυτότητας, το NextAuthJS δημιουργεί μια περίοδο λειτουργίας για τον χρήστη. Μια περίοδος σύνδεσης είναι μια μόνιμη κατάσταση που αντιπροσωπεύει την κατάσταση ελέγχου ταυτότητας του χρήστη και του επιτρέπει να έχει πρόσβαση σε προστατευμένους πόρους χωρίς να χρειάζεται εκ νέου έλεγχο ταυτότητας για επόμενα αιτήματα.

4. Cookies: Το NextAuthJS ορίζει ασφαλή cookie μόνο HTTP στο πρόγραμμα περιήγησης του χρήστη για τη διαχείριση της περιόδου σύνδεσης. Αυτά τα cookies διαδραματίζουν κρίσιμο ρόλο στη διατήρηση της κατάστασης ελέγχου ταυτότητας του χρήστη σε πολλαπλά αιτήματα. Τα cookie συνήθως περιλαμβάνουν ένα cookie περιόδου λειτουργίας και προαιρετικά ένα cookie διακριτικού ανανέωσης, ανάλογα με τη διαμόρφωση ελέγχου ταυτότητας.

Cookie περιόδου λειτουργίας: Το cookie περιόδου λειτουργίας περιέχει ένα αναγνωριστικό περιόδου σύνδεσης (π.χ. μια συμβολοσειρά που δημιουργείται τυχαία) που προσδιορίζει μοναδικά την περίοδο σύνδεσης του χρήστη. Βοηθά το NextAuthJS να συσχετίσει τα επόμενα αιτήματα με τη σωστή περίοδο λειτουργίας και χρήστη.
CSRF Token Cookie: Το NextAuthJS ορίζει ένα cookie διακριτικού CSRF (Cross-Site Request Forgery) για προστασία από επιθέσεις CSRF. Το διακριτικό CSRF είναι μια μοναδική τιμή που δημιουργείται από το NextAuthJS και αποθηκεύεται στο cookie. Χρησιμοποιείται για την επικύρωση και την επαλήθευση της γνησιότητας των επόμενων αιτημάτων που υποβάλλονται από τον χρήστη. Όταν ο χρήστης υποβάλλει φόρμες ή εκτελεί ευαίσθητες ενέργειες, το διακριτικό CSRF περιλαμβάνεται στις κεφαλίδες ή στο σώμα του αιτήματος για να διασφαλιστεί ότι το αίτημα προήλθε από την περίοδο λειτουργίας του επαληθευμένου χρήστη και όχι από κακόβουλη πηγή.
Cookie URL επανάκλησης: Το NextAuthJS ορίζει ένα cookie διεύθυνσης URL επανάκλησης για να αποθηκεύει την αρχική διεύθυνση URL στην οποία ο χρήστης προσπαθούσε να αποκτήσει πρόσβαση πριν ανακατευθυνθεί στη ροή ελέγχου ταυτότητας. Αυτό το cookie βοηθά το NextAuthJS να ανακατευθύνει τον χρήστη πίσω στην επιθυμητή σελίδα μετά από επιτυχή έλεγχο ταυτότητας. Εξασφαλίζει μια ομαλή εμπειρία χρήστη επιστρέφοντας απρόσκοπτα τον χρήστη στον προορισμό του αντί για μια γενική σελίδα προορισμού.

Χρησιμοποιώντας ασφαλή cookie μόνο HTTP, το NextAuthJS διασφαλίζει ότι η κατάσταση ελέγχου ταυτότητας παραμένει ασφαλής και αδιάβροχη. Τα cookies είναι κρυπτογραφημένα, αποτρέποντας μη εξουσιοδοτημένη πρόσβαση ή τροποποίηση από κακόβουλους παράγοντες.

Εξαιρετική δουλειά για την επιτυχή ενσωμάτωση του NextAuthJS με τον προσαρμογέα Prisma στην εφαρμογή Next.js! Με την ευκολία και την προσαρμοστικότητα που παρέχει το NextAuthJS, έχετε πλέον ένα αξιόπιστο σύστημα ελέγχου ταυτότητας.

Ελέγξτε το αποθετήριο GitHub που συνδέεται παρακάτω για τον κώδικα που χρησιμοποιείται σε αυτόν τον οδηγό: https://github.com/codelabsacademy/next-auth-guide.

Αλλά γιατί να σταματήσουμε εδώ; Εάν είστε παθιασμένοι με την ανάπτυξη ιστού και επιθυμείτε να βελτιώσετε τις δεξιότητές σας, εξετάστε το ενδεχόμενο να κάνετε αίτηση για το bootcamp ανάπτυξης ιστού. Το bootcamp μας προσφέρει μια ολοκληρωμένη εμπειρία εκμάθησης, εξοπλίζοντάς σας με τις απαραίτητες γνώσεις και πρακτικές δεξιότητες για να διαπρέψετε στον δυναμικό κόσμο της ανάπτυξης ιστού.

Με τη συμμετοχή σας στο bootcamp μας, θα αποκτήσετε πρακτική εμπειρία με τεχνολογίες αιχμής, θα εργαστείτε σε έργα του πραγματικού κόσμου και θα λάβετε εξατομικευμένη καθοδήγηση από ειδικούς του κλάδου. Είτε είστε αρχάριος είτε έμπειρος προγραμματιστής, το πρόγραμμά μας έχει σχεδιαστεί για να ανεβάσει τις δεξιότητές σας στην ανάπτυξη ιστού στο επόμενο επίπεδο.

Μη χάσετε αυτήν την ευκαιρία να επιταχύνετε το ταξίδι σας στην ανάπτυξη ιστού. Application for our web development bootcamp today και ξεκλειδώστε πλήρως τις δυνατότητές σας στον συναρπαστικό τομέα της ανάπτυξης ιστού. Μαζί, ας δημιουργήσουμε εκπληκτικές ψηφιακές εμπειρίες και ας διαμορφώσουμε το μέλλον του ιστού.

Εφαρμογή σύνδεσης χωρίς κωδικό πρόσβασης σε ένα έργο Next.js 13 με το NextAuth.js και το Prisma

Τι είναι η σύνδεση χωρίς κωδικό πρόσβασης;

Ας αρχίσουμε!

Εγκατάσταση των εξαρτήσεων μας

Ρύθμιση Prisma

PostgreSQL χρησιμοποιώντας το Supabase

Υπηρεσίες καριέρας

Ας μείνουμε σε επαφή