Autentifikacija i autorizacija u Next.js

U ovom odjeljku vodit ćemo vas kroz implementaciju provjere autentičnosti korisnika i kontrole pristupa u vašoj Next.js aplikaciji. Naučit ćete kako postići sigurne prijave korisnika i učinkovito upravljanje korisničkim dozvolama korištenjem usluga kao što su Firebase ili Auth0.

Autentikacija korisnika sa Firebase

Firebase pruža opsežan skup alata za izgradnju autentifikacijskih sustava. Ispod je primjer kako postaviti autentifikaciju korisnika koristeći Firebase u svojoj Next.js aplikaciji:

Postavite Firebase projekt i omogućite usluge provjere autentičnosti.

Instalirajte Firebase JavaScript SDK:

npm install firebase

Konfigurirajte Firebase u svojoj aplikaciji:

import firebase from 'firebase/app';  
import 'firebase/auth';  
  
const firebaseConfig = {  
  apiKey: 'YOUR_API_KEY',  
  authDomain: 'YOUR_AUTH_DOMAIN',  
  projectId: 'YOUR_PROJECT_ID',  
  storageBucket: 'YOUR_STORAGE_BUCKET',  
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',  
  appId: 'YOUR_APP_ID',  
};  
  
if(!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);  
}  

Implementirajte autentifikaciju korisnika:

import firebase from 'firebase/app';  
import 'firebase/auth';  
  
// Sign up with email and password  
const signUpWithEmail = async(email, password) => {  
  try {  
    await firebase.auth().createUserWithEmailAndPassword(email, password);  
  } catch(error) {  
    console.error(error);  
  }  
};  
  
// Sign in with email and password  
const signInWithEmail = async(email, password) => {  
  try {  
    await firebase.auth().signInWithEmailAndPassword(email, password);  
  } catch(error) {  
    console.error(error);  
  }  
};  

Autentifikacija korisnika s Auth0

Auth0 je platforma za autentifikaciju i autorizaciju koja olakšava integraciju sigurne autentifikacije korisnika u vašu aplikaciju. Evo kako možete koristiti Auth0 za autentifikaciju korisnika u svojoj Next.js aplikaciji:

Prijavite se za Auth0 račun i izradite aplikaciju.

Instalirajte Auth0 SDK:

npm install @auth0/auth0-react

Konfigurirajte Auth0 u svojoj aplikaciji:

import { Auth0Provider } from '@auth0/auth0-react';  
  
const Auth0ProviderWithHistory =({ children }) => {  
  const domain = 'YOUR_AUTH0_DOMAIN';  
  const clientId = 'YOUR_CLIENT_ID';  
  
  return( 
    <Auth0Provider  
      domain={domain}  
      clientId={clientId}  
      redirectUri={window.location.origin}  
    >  
      {children}  
    </Auth0Provider>  
 );  
};  

Implementirajte autentifikaciju korisnika:

import { useAuth0 } from '@auth0/auth0-react';  
  
function AuthButton() {  
  const { isAuthenticated, loginWithRedirect, logout } = useAuth0();  
  
  if(isAuthenticated) {  
    return <button onClick={() => logout()}>Log out</button>;  
  } else {  
    return <button onClick={() => loginWithRedirect()}>Log in</button>;  
  }  
}  

Kontrola pristupa i autorizacija

Uz autentifikaciju, kontrola pristupa i autorizacija osiguravaju da korisnici imaju odgovarajuća dopuštenja za pristup određenim dijelovima vaše aplikacije. Možete upravljati korisničkim ulogama i dozvolama pomoću Firebase ili implementirati prilagođenu logiku autorizacije na temelju korisničkih atributa.

Zaključak

Ovaj odjeljak vam je pokazao kako implementirati autentifikaciju korisnika i kontrolu pristupa u vašoj Next.js aplikaciji koristeći usluge kao što su Firebase ili Auth0. Osiguravanjem sigurne prijave korisnika i učinkovitom kontrolom korisničkih dopuštenja, možete stvoriti sigurnije i prilagođenije korisničko iskustvo u svojoj aplikaciji.