मध्ये प्रमाणीकरण आणि अधिकृतता Next.js

या विभागात, आम्ही तुम्हाला तुमच्या अर्जामध्ये वापरकर्ता प्रमाणीकरण आणि प्रवेश नियंत्रण लागू करण्याबाबत मार्गदर्शन करू Next.js. Firebase Auth0 सारख्या सेवा वापरून सुरक्षित वापरकर्ता लॉगिन आणि प्रभावी वापरकर्ता परवानगी व्यवस्थापन कसे मिळवायचे ते तुम्ही शिकाल .

सह वापरकर्ता प्रमाणीकरण Firebase

Firebase प्रमाणीकरण प्रणाली तयार करण्यासाठी साधनांचा सर्वसमावेशक संच प्रदान करते. Firebase खाली तुमच्या अनुप्रयोगात वापरकर्ता प्रमाणीकरण कसे सेट करायचे याचे उदाहरण आहे Next.js:

एक प्रकल्प सेट करा Firebase आणि प्रमाणीकरण सेवा सक्षम करा.

JavaScript SDK स्थापित करा Firebase:

npm install firebase

Firebase तुमच्या अर्जामध्ये कॉन्फिगर करा:

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

वापरकर्ता प्रमाणीकरण लागू करा:

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

Auth0 सह वापरकर्ता प्रमाणीकरण

Auth0 हे प्रमाणीकरण आणि अधिकृतता प्लॅटफॉर्म आहे जे तुमच्या अनुप्रयोगामध्ये सुरक्षित वापरकर्ता प्रमाणीकरण समाकलित करणे सोपे करते. तुमच्या अॅपमध्ये वापरकर्ता प्रमाणीकरणासाठी तुम्ही Auth0 कसे वापरू शकता ते येथे आहे Next.js:

Auth0 खात्यासाठी साइन अप करा आणि अनुप्रयोग तयार करा.

Auth0 SDK स्थापित करा:

npm install @auth0/auth0-react

तुमच्या अर्जामध्ये Auth0 कॉन्फिगर करा:

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

वापरकर्ता प्रमाणीकरण लागू करा:

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

प्रवेश नियंत्रण आणि अधिकृतता

प्रमाणीकरणाव्यतिरिक्त, प्रवेश नियंत्रण आणि अधिकृतता सुनिश्चित करते की वापरकर्त्यांकडे तुमच्या अनुप्रयोगाच्या काही भागांमध्ये प्रवेश करण्यासाठी योग्य परवानग्या आहेत. तुम्ही Firebase वापरकर्ता गुणधर्मांवर आधारित सानुकूल अधिकृतता तर्क वापरून वापरकर्ता भूमिका आणि परवानग्या व्यवस्थापित करू शकता किंवा लागू करू शकता.

निष्कर्ष

या विभागात तुम्हाला तुमच्या ऍप्लिकेशनमध्ये वापरकर्ता प्रमाणीकरण आणि ऍक्सेस कंट्रोल कसे लागू करायचे ते दाखवले आहे किंवा Auth0 Next.js सारख्या सेवांचा वापर करून. Firebase सुरक्षित वापरकर्ता लॉगिन सुनिश्चित करून आणि वापरकर्ता परवानग्या प्रभावीपणे नियंत्रित करून, तुम्ही तुमच्या अनुप्रयोगामध्ये अधिक सुरक्षित आणि अधिक अनुकूल वापरकर्ता अनुभव तयार करू शकता.