टोकन प्रमाणीकरण एक लोकप्रिय रणनीति है जिसका उपयोग वेब और मोबाइल एप्लिकेशन को अनधिकृत पहुंच से सुरक्षित रखने में किया जाता है। Next.js में, आप Next-auth द्वारा प्रदान की गई प्रमाणीकरण सुविधाओं का उपयोग कर सकते हैं।

वैकल्पिक रूप से, आप JSON वेब टोकन (JWTs) का उपयोग करके एक कस्टम टोकन-आधारित प्रमाणीकरण प्रणाली विकसित करने का विकल्प चुन सकते हैं। ऐसा करके, आप सुनिश्चित करते हैं कि प्रमाणीकरण तर्क पर आपका अधिक नियंत्रण है; अनिवार्य रूप से, आपके प्रोजेक्ट की आवश्यकताओं से सटीक रूप से मेल खाने के लिए सिस्टम को अनुकूलित करना।

Next.js प्रोजेक्ट सेट करें

आरंभ करने के लिए, अपने टर्मिनल पर नीचे दिए गए कमांड को चलाकर Next.js इंस्टॉल करें।

npx create-next-app@latest next-auth-jwt --experimental-app

यह मार्गदर्शिका उपयोगी होगी Next.js 13 जिसमें ऐप निर्देशिका शामिल है.

इसके बाद, इन निर्भरताओं को अपने प्रोजेक्ट में स्थापित करें एनपीएम, नोड पैकेज मैनेजर.

npm install jose universal-cookie

जोस एक जावास्क्रिप्ट मॉड्यूल है जो JSON वेब टोकन के साथ काम करने के लिए उपयोगिताओं का एक सेट प्रदान करता है

यूनिवर्सल-कुकी निर्भरता क्लाइंट-साइड और सर्वर-साइड दोनों वातावरणों में ब्राउज़र कुकीज़ के साथ काम करने का एक आसान तरीका प्रदान करती है।

आप इस प्रोजेक्ट का कोड इसमें पा सकते हैं गिटहब रिपॉजिटरी.

लॉगिन फॉर्म यूजर इंटरफेस बनाएं

खोलें स्रोत/ऐप निर्देशिका, एक नया फ़ोल्डर बनाएं और उसे नाम दें लॉग इन करें. इस फ़ोल्डर के अंदर, एक नया जोड़ें पेज.जे.एस फ़ाइल करें और नीचे दिया गया कोड शामिल करें।

"use client";
import { useRouter } from"next/navigation";
exportdefaultfunctionLoginPage() {
return (



 Username:
"text" name="username" />
 </label>

 Password:
"password" name="password" />
 </label>
"submit">Login</button>
 </form>
 );
}

उपरोक्त कोड एक लॉगिन पेज कार्यात्मक घटक बनाता है जो उपयोगकर्ताओं को उपयोगकर्ता नाम और पासवर्ड दर्ज करने की अनुमति देने के लिए ब्राउज़र पर एक सरल लॉगिन फॉर्म प्रस्तुत करेगा।

क्लाइंट का उपयोग करें कोड में कथन यह सुनिश्चित करता है कि सर्वर-ओनली और क्लाइंट-ओनली कोड के बीच एक सीमा घोषित की गई है अनुप्रयोग निर्देशिका।

इस मामले में, इसका उपयोग यह घोषित करने के लिए किया जाता है कि लॉगिन पृष्ठ में कोड, विशेष रूप से हैंडलसबमिट करेंफ़ंक्शन केवल क्लाइंट पर निष्पादित होता है; अन्यथा, Next.js एक त्रुटि देगा।

अब, आइए इसके लिए कोड परिभाषित करें हैंडलसबमिट करें समारोह। कार्यात्मक घटक के अंदर, निम्नलिखित कोड जोड़ें।

const router = useRouter();
const handleSubmit = async (event) => {
 event.preventDefault();
const formData = new FormData(event.target);
const username = formData.get("username");
const password = formData.get("password");
const res = await fetch("/api/login", {
 method: "POST",
 body: JSON.stringify({ username, password }),
 });
const { success } = await res.json();
if (success) { 
 router.push("/protected");
 router.refresh();
 } else {
 alert("Login failed");
 }
 };

लॉगिन प्रमाणीकरण तर्क को प्रबंधित करने के लिए, यह फ़ंक्शन लॉगिन फॉर्म से उपयोगकर्ता क्रेडेंशियल कैप्चर करता है। इसके बाद यह सत्यापन के लिए उपयोगकर्ता विवरण के साथ गुजरते हुए एपीआई एंडपॉइंट पर एक POST अनुरोध भेजता है।

यदि क्रेडेंशियल मान्य हैं, तो यह दर्शाता है कि लॉगिन प्रक्रिया सफल रही - एपीआई प्रतिक्रिया में सफलता की स्थिति देता है। हैंडलर फ़ंक्शन उपयोगकर्ता को निर्दिष्ट यूआरएल पर नेविगेट करने के लिए नेक्स्ट.जेएस राउटर का उपयोग करेगा, इस मामले में, संरक्षित मार्ग।

लॉगिन एपीआई एंडपॉइंट को परिभाषित करें

के अंदर स्रोत/ऐप निर्देशिका, एक नया फ़ोल्डर बनाएं और उसे नाम दें एपीआई. इस फ़ोल्डर के अंदर, एक नया जोड़ें लॉगिन/रूट.जे.एस फ़ाइल करें और नीचे दिया गया कोड शामिल करें।

import { SignJWT } from"jose";
import { NextResponse } from"next/server";
import { getJwtSecretKey } from"@/libs/auth";
exportasyncfunctionPOST(request) {
const body = await request.json();
if (body.username "admin" && body.password "admin") {
const token = awaitnew SignJWT({
 username: body.username,
 })
 .setProtectedHeader({ alg: "HS256" })
 .setIssuedAt()
 .setExpirationTime("30s") 
 .sign(getJwtSecretKey());
const response = NextResponse.json(
 { success: true },
 { status: 200, headers: { "content-type": "application/json" } }
 );
 response.cookies.set({
 name: "token",
 value: token,
 path: "/",
 });
return response;
 }
return NextResponse.json({ success: false });
}

इस एपीआई का प्राथमिक कार्य मॉक डेटा का उपयोग करके POST अनुरोधों में पारित लॉगिन क्रेडेंशियल को सत्यापित करना है।

सफल सत्यापन पर, यह प्रमाणित उपयोगकर्ता विवरण से जुड़ा एक एन्क्रिप्टेड JWT टोकन उत्पन्न करता है। अंत में, यह क्लाइंट को एक सफल प्रतिक्रिया भेजता है, जिसमें प्रतिक्रिया कुकीज़ में टोकन भी शामिल है; अन्यथा, यह विफलता स्थिति प्रतिक्रिया देता है।

टोकन सत्यापन तर्क लागू करें

टोकन प्रमाणीकरण में प्रारंभिक चरण एक सफल लॉगिन प्रक्रिया के बाद टोकन उत्पन्न करना है। अगला कदम टोकन सत्यापन के लिए तर्क को लागू करना है।

मूलतः, आप इसका उपयोग करेंगे jwtसत्यापित करें द्वारा प्रदान किया गया फ़ंक्शन जोस बाद के HTTP अनुरोधों के साथ पारित JWT टोकन को सत्यापित करने के लिए मॉड्यूल।

में स्रोत निर्देशिका, एक नई बनाएँ libs/auth.js फ़ाइल करें और नीचे दिया गया कोड शामिल करें।

import { jwtVerify } from"jose";
exportfunctiongetJwtSecretKey() {
const secret = process.env.NEXT_PUBLIC_JWT_SECRET_KEY;
if (!secret) {
thrownewError("JWT Secret key is not matched");
 }
returnnew TextEncoder().encode(secret);
}
exportasyncfunctionverifyJwtToken(token) {
try {
const { payload } = await jwtVerify(token, getJwtSecretKey());
return payload;
 } catch (error) {
returnnull;
 }
}

गुप्त कुंजी का उपयोग टोकन पर हस्ताक्षर करने और सत्यापन करने में किया जाता है। डिकोड किए गए टोकन हस्ताक्षर की अपेक्षित हस्ताक्षर से तुलना करके, सर्वर प्रभावी ढंग से सत्यापित कर सकता है कि प्रदान किया गया टोकन वैध है, और अंततः, उपयोगकर्ताओं के अनुरोधों को अधिकृत करता है।

बनाएं .env रूट निर्देशिका में फ़ाइल करें और निम्नानुसार एक अद्वितीय गुप्त कुंजी जोड़ें:

NEXT_PUBLIC_JWT_SECRET_KEY=your_secret_key

एक संरक्षित मार्ग बनाएं

अब, आपको एक ऐसा मार्ग बनाने की आवश्यकता है जिस तक केवल प्रमाणित उपयोगकर्ता ही पहुंच प्राप्त कर सकें। ऐसा करने के लिए, एक नया बनाएं संरक्षित/पेज.जे.एस फ़ाइल में स्रोत/ऐप निर्देशिका। इस फ़ाइल के अंदर, निम्नलिखित कोड जोड़ें।

exportdefaultfunctionProtectedPage() {
return<h1>Very protected pageh1>;
 }

प्रमाणीकरण स्थिति को प्रबंधित करने के लिए एक हुक बनाएं

में एक नया फोल्डर बनाएं स्रोत निर्देशिका और इसे नाम दें हुक. इस फ़ोल्डर के अंदर एक नया जोड़ें उपयोगAuth/index.js फ़ाइल करें और नीचे दिया गया कोड शामिल करें।

"use client" ;
import React from"react";
import Cookies from"universal-cookie";
import { verifyJwtToken } from"@/libs/auth";
exportfunctionuseAuth() {
const [auth, setAuth] = React.useState(null);
const getVerifiedtoken = async () => {
const cookies = new Cookies();
const token = cookies.get("token")?? null;
const verifiedToken = await verifyJwtToken(token);
 setAuth(verifiedToken);
 };
 React.useEffect(() => {
 getVerifiedtoken();
 }, []);
return auth;
}

यह हुक क्लाइंट साइड पर प्रमाणीकरण स्थिति का प्रबंधन करता है। यह कुकीज़ में मौजूद JWT टोकन की वैधता को लाता है और सत्यापित करता है सत्यापितJwtToken फ़ंक्शन, और फिर प्रमाणित उपयोगकर्ता विवरण सेट करता है प्रमाणन राज्य।

ऐसा करने से, यह अन्य घटकों को प्रमाणित उपयोगकर्ता की जानकारी तक पहुंचने और उसका उपयोग करने की अनुमति देता है। प्रमाणीकरण स्थिति के आधार पर यूआई अपडेट करना, बाद में एपीआई अनुरोध करना, या उपयोगकर्ता भूमिकाओं के आधार पर विभिन्न सामग्री प्रस्तुत करना जैसे परिदृश्यों के लिए यह आवश्यक है।

इस मामले में, आप विभिन्न सामग्री को प्रस्तुत करने के लिए हुक का उपयोग करेंगे घर उपयोगकर्ता की प्रमाणीकरण स्थिति के आधार पर मार्ग।

एक वैकल्पिक दृष्टिकोण जिस पर आप विचार कर सकते हैं वह है प्रबंधन Redux टूलकिट का उपयोग करके राज्य प्रबंधन या एक को नियोजित करना जोताई जैसा राज्य प्रबंधन उपकरण. यह दृष्टिकोण गारंटी देता है कि घटकों को प्रमाणीकरण स्थिति या किसी अन्य परिभाषित स्थिति तक वैश्विक पहुंच मिल सकती है।

आगे बढ़ें और खोलें ऐप/पेज.जेएस फ़ाइल, बॉयलरप्लेट नेक्स्ट.जेएस कोड हटाएं, और निम्नलिखित कोड जोड़ें।

"use client" ;
import { useAuth } from"@/hooks/useAuth";
import Link from"next/link";
exportdefaultfunctionHome() {
const auth = useAuth();
return<>
Public Home Page</h1>

उपरोक्त कोड का उपयोग करता है उपयोग प्रमाणीकरण प्रमाणीकरण स्थिति को प्रबंधित करने के लिए हुक। ऐसा करने पर, यह सशर्त रूप से एक लिंक के साथ एक सार्वजनिक होम पेज प्रस्तुत करता है लॉग इन करें जब उपयोगकर्ता प्रमाणित नहीं होता है तो पेज रूट करता है, और प्रमाणित उपयोगकर्ता के लिए एक पैराग्राफ प्रदर्शित करता है।

संरक्षित मार्गों तक अधिकृत पहुंच लागू करने के लिए एक मिडलवेयर जोड़ें

में स्रोत निर्देशिका, एक नई बनाएँ मिडलवेयर.जे.एस फ़ाइल करें, और नीचे कोड जोड़ें।

import { NextResponse } from"next/server";
import { verifyJwtToken } from"@/libs/auth";
const AUTH_PAGES = ["/login"];
const isAuthPages = (url) => AUTH_PAGES.some((page) => page.startsWith(url));
exportasyncfunctionmiddleware(request) {
const { url, nextUrl, cookies } = request;
const { value: token } = cookies.get("token")?? { value: null };
const hasVerifiedToken = token && (await verifyJwtToken(token));
const isAuthPageRequested = isAuthPages(nextUrl.pathname);
if (isAuthPageRequested) {
if (!hasVerifiedToken) {
const response = NextResponse.next();
 response.cookies.delete("token");
return response;
 }
const response = NextResponse.redirect(new URL(`/`, url));
return response;
 }
if (!hasVerifiedToken) {
const searchParams = new URLSearchParams(nextUrl.searchParams);
 searchParams.set("next", nextUrl.pathname);
const response = NextResponse.redirect(
new URL(`/login?${searchParams}`, url)
 );
 response.cookies.delete("token");
return response;
 }
return NextResponse.next();
}
exportconst config = { matcher: ["/login", "/protected/:path*"] };

यह मिडलवेयर कोड एक गार्ड के रूप में कार्य करता है। यह सुनिश्चित करने के लिए जाँच करता है कि जब उपयोगकर्ता संरक्षित पृष्ठों तक पहुँचना चाहते हैं, तो वे अनधिकृत उपयोगकर्ताओं को लॉगिन पृष्ठ पर पुनर्निर्देशित करने के अलावा, मार्गों तक पहुँचने के लिए प्रमाणित और अधिकृत हैं।

Next.js अनुप्रयोगों को सुरक्षित करना

टोकन प्रमाणीकरण एक प्रभावी सुरक्षा तंत्र है। हालाँकि, यह आपके एप्लिकेशन को अनधिकृत पहुंच से सुरक्षित रखने के लिए उपलब्ध एकमात्र रणनीति नहीं है।

गतिशील साइबर सुरक्षा परिदृश्य के विरुद्ध अनुप्रयोगों को मजबूत करने के लिए, व्यापक सुरक्षा अपनाना महत्वपूर्ण है दृष्टिकोण जो संपूर्ण गारंटी के लिए संभावित सुरक्षा खामियों और कमजोरियों को समग्र रूप से संबोधित करता है सुरक्षा।