Cum se implementează autentificarea în Next.js cu Auth0

Publicat: 2022-03-10
Rezumat rapid ↬ În momentul adăugării de autentificare și autorizare la aplicațiile noastre web, există câteva lucruri pe care ar trebui să le evaluăm, de exemplu dacă trebuie să ne creăm propria platformă de securitate sau dacă ne putem baza pe un serviciu terț existent. Să vedem cum putem implementa autentificarea și autorizarea în aplicațiile Next.js, cu Auth0.

„Autentificarea” este acțiunea de validare a faptului că un utilizator este cine pretinde că este. De obicei facem acest lucru prin implementarea unui sistem de acreditări, cum ar fi utilizator/parolă, întrebări de securitate sau chiar recunoaștere facială.

„Autorizarea” determină ce poate (sau nu) face un utilizator. Dacă trebuie să ne ocupăm de autentificare și autorizare în aplicația noastră web, vom avea nevoie de o platformă sau un modul de securitate. Putem să ne dezvoltăm propria platformă, să o implementăm și să o menținem. Sau putem profita de platformele de autentificare și autorizare existente pe piață care sunt oferite ca servicii.

Când evaluăm dacă este mai bine pentru noi să ne creăm propria platformă sau să folosim un serviciu terță parte, există câteva lucruri pe care ar trebui să le luăm în considerare:

  • Proiectarea și crearea de servicii de autentificare nu este abilitățile noastre de bază. Sunt oameni care lucrează special concentrați pe subiecte de securitate care pot crea platforme mai bune și mai sigure decât noi;
  • Putem economisi timp bazându-ne pe o platformă de autentificare existentă și îl putem petrece adăugând valoare produselor și serviciilor la care ne pasă;
  • Nu stocăm informații sensibile în bazele noastre de date. Îl separăm de toate datele implicate în aplicațiile noastre;
  • Instrumentele oferite de serviciile terților au o utilizare și performanță îmbunătățite, ceea ce ne face mai ușor să administrăm utilizatorii aplicației noastre.

Luând în considerare acești factori, putem spune că bazarea pe platforme de autentificare terță parte poate fi mai ușoară, mai ieftină și chiar mai sigură decât crearea propriului nostru modul de securitate.

În acest articol, vom vedea cum să implementăm autentificarea și autorizarea în aplicațiile noastre Next.js folosind unul dintre produsele existente pe piață: Auth0.

Mai multe după săritură! Continuați să citiți mai jos ↓

Ce este Auth0?

Vă permite să adăugați securitate aplicațiilor dezvoltate folosind orice limbaj de programare sau tehnologie.

„Auth0 este o soluție flexibilă, integrată, pentru a adăuga servicii de autentificare și autorizare aplicațiilor dumneavoastră.”

— Dan Arias, auth0.com

Auth0 are mai multe caracteristici interesante, cum ar fi:

  • Single Sign-On : Odată ce vă conectați la o aplicație care utilizează Auth0, nu va trebui să vă introduceți din nou acreditările când introduceți o altă aplicație care o folosește și el. Veți fi conectat automat la toate;
  • Conectare socială : autentificați-vă folosind profilul dvs. preferat de rețea socială;
  • Autentificare cu mai mulți factori ;
  • Sunt permise mai multe protocoale standard , cum ar fi OpenID Connect, JSON Web Token sau OAuth 2.0;
  • Instrumente de raportare și analiză .

Există un plan gratuit pe care îl puteți folosi pentru a începe să vă securizați aplicațiile web, acoperind până la 7000 de utilizatori activi lunar. Veți începe să plătiți atunci când numărul de utilizatori crește.

Un alt lucru interesant despre Auth0 este că avem un SDK Next.js disponibil pentru a fi folosit în aplicația noastră. Cu această bibliotecă, creată special pentru Next.js, ne putem conecta cu ușurință la API-ul Auth0.

Auth0 SDK pentru Next.js

După cum am menționat anterior, Auth0 a creat (și menține) un SDK centrat pe Next.js, printre alte SDK-uri disponibile pentru a se conecta la API folosind diferite limbaje de programare. Trebuie doar să descarcăm pachetul NPM, să configuram câteva detalii despre contul și conexiunea noastră Auth0 și suntem gata de plecare.

Acest SDK ne oferă instrumente pentru a implementa autentificarea și autorizarea cu metode atât pe partea client, cât și pe partea serverului, utilizând rute API pe backend și React Context cu React Hooks pe frontend.

Să vedem cum funcționează unele dintre ele într-un exemplu de aplicație Next.js.

Exemplu de aplicație Next.js folosind Auth0

Să revenim la exemplul nostru anterior al platformei video și să creăm o aplicație mică pentru a arăta cum să folosești SDK-ul Auth0 Next.js. Vom configura autentificarea universală a Auth0. Vom avea câteva URL-uri video YouTube. Acestea vor fi ascunse sub o platformă de autentificare. Doar utilizatorii înregistrați vor putea vedea lista de videoclipuri prin intermediul aplicației noastre web.

Notă : Acest articol se concentrează pe configurarea și utilizarea Auth0 în aplicația dvs. Next.js. Nu vom intra în detalii precum stilul CSS sau utilizarea bazei de date. Dacă doriți să vedeți codul complet al aplicației exemplu, puteți accesa acest depozit GitHub.

Creați un cont Auth0 și configurați detaliile aplicației

În primul rând, trebuie să creăm un cont Auth0 folosind pagina de înregistrare.

crearea unui cont Auth0 folosind pagina de înregistrare
(Previzualizare mare)

După aceea, să mergem la Tabloul de bord Auth0. Accesați Aplicații și creați o nouă aplicație de tipul [„Aplicații web obișnuite”].

crearea unei noi aplicații de tip „Aplicații web obișnuite”.
(Previzualizare mare)

Acum să mergem la fila Setări a aplicației și, în secțiunea URI-uri aplicației , configurați următoarele detalii și salvați modificările:

  • Adrese URL de apel invers permise : adăugați https://localhost:3000/api/auth/callback
  • Adrese URL de deconectare permise : adăugați https://localhost:3000/
fila Setări a aplicației.
(Previzualizare mare)

Făcând acest lucru, configurăm adresa URL la care dorim să redirecționăm utilizatorii după ce se conectează la site-ul nostru (Callback) și adresa URL la care redirecționăm utilizatorii după ce se deconectează (Logout). Ar trebui să adăugăm adresele URL de producție atunci când implementăm versiunea finală a aplicației noastre pe serverul de găzduire.

Tabloul de bord Auth0 are multe configurații și personalizări pe care le putem aplica proiectelor noastre. Putem schimba tipul de autentificare pe care îl folosim, pagina de autentificare/înregistrare, datele pe care le solicităm utilizatorilor, activarea/dezactivarea noilor înregistrări, configurarea bazelor de date ale utilizatorilor și așa mai departe.

Creați aplicația Next.js

Pentru a crea o nouă aplicație Next.js, vom folosi create-next-app, care configurează totul automat pentru tine. Pentru a crea proiectul, rulați:

 npx create-next-app [name-of-the-app]

Sau

 yarn create next-app [name-of-the-app]

Pentru a porni serverul de dezvoltare local și pentru a vedea site-ul tocmai creat în browser, accesați noul folder pe care l-ați creat:

 cd [name-of-the-app]

Și fugi:

 npm run dev

Sau

 yarn dev

Instalați și configurați SDK-ul Auth0 Next.js

Să instalăm SDK-ul Auth0 Next.js în aplicația noastră:

 npm install @auth0/nextjs-auth0

Sau

 yarn add @auth0/nextjs-auth0

Acum, în fișierul nostru env.local (sau meniul de variabile de mediu al platformei noastre de găzduire), să adăugăm aceste variabile:

 AUTH0_SECRET="[A 32 characters secret used to encrypt the cookies]" AUTH0_BASE_URL="https://localhost:3000" AUTH0_ISSUER_BASE_URL="https://[Your tenant domain. Can be found in the Auth0 dashboard under settings]" AUTH0_CLIENT_ AUTH0_CLIENT_SECRET="[Can be found in the Auth0 dashboard under settings]"
opțiunile de configurare pentru SDK-ul Auth0 Next.js.
(Previzualizare mare)

Dacă doriți mai multe opțiuni de configurare, puteți arunca o privire la documente.

Creați ruta dinamică API

Next.js oferă o modalitate de a crea API-uri fără server: Rute API. Cu această caracteristică, putem crea cod care va fi executat în fiecare solicitare a utilizatorului către rutele noastre. Putem defini rute fixe, cum ar fi /api/index.js . Dar putem avea și rute API dinamice, cu parametri pe care îi putem folosi în codul nostru de rute API, cum ar fi /api/blog/[postId].js .

Să creăm fișierul /pages/api/auth/[...auth0].js , care va fi o rută API dinamică. În interiorul fișierului, să importăm metoda handleAuth din SDK-ul Auth0 și să exportăm rezultatul:

 import { handleAuth } from '@auth0/nextjs-auth0'; export default handleAuth();

Aceasta va crea și gestiona următoarele rute:

  • /api/auth/login
    Pentru a efectua autentificare sau înscriere cu Auth0.
  • /api/auth/logout
    Pentru a deconecta utilizatorul.
  • /api/auth/callback
    Pentru a redirecționa utilizatorul după o conectare cu succes.
  • /api/auth/me
    Pentru a obține informațiile despre profilul utilizatorului.

Și aceasta ar fi partea serverului a aplicației noastre. Dacă dorim să ne autentificăm la aplicația noastră sau să creăm un cont nou, ar trebui să https://localhost:3000/api/auth/login . Ar trebui să adăugăm un link către acea rută în aplicația noastră. Același lucru pentru deconectarea de la site-ul nostru: adăugați un link la https://localhost:3000/api/auth/logout .

Adăugați componenta UserProvider

Pentru a gestiona starea de autentificare a utilizatorului pe front-end-ul aplicației noastre web, putem folosi componenta UserProvider React, disponibilă pe SDK-ul Auth0 Next.js. componenta folosește React Context intern.

Dacă doriți să accesați starea de autentificare a utilizatorului pe o componentă, ar trebui să o includeți cu o componentă UserProvider .

 <UserProvider> <Component {...props} /> </UserProvider>

Dacă dorim să accesăm toate paginile din aplicația noastră, ar trebui să adăugăm componenta în fișierul pages/_app.js . pages/_app.js suprascrie componenta React App . Este o caracteristică pe care Next.js o expune pentru a personaliza aplicația noastră. Puteți citi mai multe despre el aici.

 import React from 'react'; import { UserProvider } from '@auth0/nextjs-auth0'; export default function App({ Component, pageProps }) { return ( <UserProvider> <Component {...pageProps} /> </UserProvider> ); }

Avem un React hook useUser care accesează starea de autentificare expusă de UserProvider . Îl putem folosi, de exemplu, pentru a crea un fel de pagină de bun venit. Să schimbăm codul fișierului pages/index.js :

 import { useUser } from "@auth0/nextjs-auth0"; export default () => { const { user, error, isLoading } = useUser(); if (isLoading) return <div>Loading...</div>; if (error) return <div>{error.message}</div>; if (user) { return ( <div> <h2>{user.name}</h2> <p>{user.email}</p> <a href="/api/auth/logout">Logout</a> </div> ); } return <a href="/api/auth/login">Login</a>; };

Obiectul user conține informații legate de identitatea utilizatorului. Dacă persoana care vizitează pagina nu este autentificată (nu avem un obiect user disponibil), vom afișa un link către pagina de autentificare. Dacă utilizatorul este deja autentificat, vom afișa proprietățile user.name și user.email pe pagină și un link de deconectare.

Să creăm un fișier videos.js, cu o listă de trei adrese URL video YouTube care vor fi vizibile numai pentru persoanele înregistrate. Pentru a permite numai utilizatorilor conectați să vadă această pagină, vom folosi metoda withPageAuthRequired din SDK.

 import { withPageAuthRequired } from "@auth0/nextjs-auth0"; export default () => { return ( <div> <a href="https://www.youtube.com/watch?v=5qap5aO4i9A">LoFi Music</a> <a href="https://www.youtube.com/watch?v=fEvM-OUbaKs">Jazz Music</a> <a href="https://www.youtube.com/watch?v=XULUBg_ZcAU">Piano Music</a> </div> ); }; export const getServerSideProps = withPageAuthRequired();

Luați în considerare faptul că aplicația noastră web permite oricărei persoane să se înregistreze pentru un cont, folosind platforma Auth0. De asemenea, utilizatorul poate reutiliza un cont Auth0 existent, deoarece implementăm Conectarea universală.

Ne putem crea propria pagină de înregistrare pentru a solicita mai multe detalii despre utilizator sau pentru a adăuga informații de plată pentru a-i factura lunar pentru serviciul nostru. De asemenea, putem folosi metodele expuse în SDK pentru a gestiona autorizarea într-un mod automat.

Concluzie

În acest articol, am văzut cum să ne securizăm aplicațiile Next.js folosind Auth0, o platformă de autentificare și autorizare. Evaluăm beneficiile utilizării unui serviciu terță parte pentru autentificarea aplicațiilor noastre web în comparație cu crearea propriei platforme de securitate. Am creat un exemplu de aplicație Next.js și l-am securizat folosind planul gratuit Auth0 și SDK-ul Auth0 Next.js.

Dacă doriți să implementați un exemplu de aplicație Auth0 în Vercel, o puteți face aici.

Lectură suplimentară și resurse

  • Auth0 Depozitul GitHub SDK Next.js, Auth0, GitHub
  • „Ghidul suprem pentru autentificarea Next.js cu Auth0”, Sandrino Di Mattia, blogul Auth0
    În aplicația noastră exemplu, am folosit randarea pe server, cu rute API și o abordare fără server. Dacă utilizați Next.js pentru un site static sau un server personalizat pentru a vă găzdui aplicația, acest articol conține câteva detalii despre cum să implementați autentificarea.
  • „Nouă experiență de conectare universală”, Auth0 Universal Login, Auth0 Docs
  • „Autentificare universală centralizată vs. autentificare încorporată”, Autentificare universală Auth0, Documente Auth0