Otentikasi lan Wewenang ing Next.js

Ing bagean iki, kita bakal nuntun sampeyan kanggo ngetrapake otentikasi pangguna lan kontrol akses ing Next.js aplikasi sampeyan. Sampeyan bakal sinau carane entuk login pangguna sing aman lan manajemen ijin pangguna sing efektif nggunakake layanan kaya Firebase utawa Auth0.

Otentikasi pangguna karo Firebase

Firebase nyedhiyakake set lengkap alat kanggo mbangun sistem otentikasi. Ing ngisor iki conto carane nyiyapake otentikasi pangguna Firebase ing aplikasi sampeyan Next.js:

Nggawe Firebase proyek lan aktifake layanan otentikasi.

Instal Firebase JavaScript SDK:

npm install firebase

Konfigurasi Firebase ing aplikasi sampeyan:

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

Ngleksanakake otentikasi pangguna:

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

Otentikasi pangguna karo Auth0

Auth0 minangka platform otentikasi lan wewenang sing ndadekake gampang nggabungake otentikasi pangguna sing aman menyang aplikasi sampeyan. Mangkene carane sampeyan bisa nggunakake Auth0 kanggo otentikasi pangguna ing Next.js aplikasi sampeyan:

Ndaftar kanggo akun Auth0 lan nggawe aplikasi.

Instal Auth0 SDK:

npm install @auth0/auth0-react

Konfigurasi Auth0 ing aplikasi sampeyan:

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

Ngleksanakake otentikasi pangguna:

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

Kontrol Akses lan Wewenang

Saliyane otentikasi, kontrol akses lan wewenang mesthekake yen pangguna duwe ijin sing cocog kanggo ngakses bagean tartamtu saka aplikasi sampeyan. Sampeyan bisa ngatur peran lan ijin pangguna nggunakake Firebase utawa ngetrapake logika wewenang khusus adhedhasar atribut pangguna.

Kesimpulan

Bagean iki wis nuduhake sampeyan carane ngetrapake otentikasi pangguna lan kontrol akses ing Next.js aplikasi sampeyan nggunakake layanan kaya Firebase utawa Auth0. Kanthi mesthekake login pangguna sing aman lan ngontrol ijin pangguna kanthi efektif, sampeyan bisa nggawe pengalaman pangguna sing luwih aman lan cocog ing aplikasi sampeyan.