Next.js सबसे लोकप्रिय फ्रंटएंड फ्रेमवर्क में से एक है, जिसके मूल में रिएक्ट है। यह स्थिर HTML उत्पन्न कर सकता है या क्लाइंट और सर्वर पर गतिशील रूप से प्रस्तुत कर सकता है। यह इसे हर प्रकार के अनुप्रयोगों और वेबसाइटों के लिए एक बहुमुखी उपकरण बनाता है। और सबसे अच्छी बात यह है कि, यह खुला स्रोत है, और आप इसे निःशुल्क उपयोग कर सकते हैं!
NextAuth, Next.js के लिए एक तृतीय-पक्ष लाइब्रेरी है जो आपको विभिन्न पहचान प्रदाताओं और डेटाबेस को एकीकृत करने में मदद करती है। आप साइन अप करते समय अपने उपयोगकर्ताओं का समय बचा सकते हैं और अभी भी आपके चुने हुए डेटाबेस में उनकी सभी आवश्यक खाता जानकारी रख सकते हैं। NextAuth 50 से अधिक प्रमाणीकरण प्रदाताओं के लिए समर्थन के साथ आता है, जिसमें GitHub, Google, Facebook, Coinbase, और कई अन्य शामिल हैं।
NextAuth Upstash Redis एडेप्टर
आज तक, Upstash Redis, NextAuth द्वारा समर्थित डेटाबेसों में से एक है!
upstash-redis NextAuth adapter Upstash HTTP क्लाइंट का उपयोग करता है, जो कई होस्टिंग सेवाओं पर काम करता है। आप उपसर्गों के साथ कई NextAuth सक्षम अनुप्रयोगों के लिए एक फ्री टियर Redis डेटाबेस का उपयोग कर सकते हैं।
तो, आइए इस ताज़ा रिलीज़ किए गए एडेप्टर के साथ NextAuth के बारे में जानें।
Upstash Redis के साथ NextAuth उदाहरण
इस ट्यूटोरियल के लिए आपके पास Node.js का कम से कम संस्करण 16.13.2 इंस्टॉल होना चाहिए। आपको GitHub और Upstash खाते की भी आवश्यकता है।
एप्लिकेशन सेट करना
आपको एक बुनियादी Next.js ऐप बनाना होगा; इस उदाहरण के लिए लर्न-स्टार्टर टेम्प्लेट ठीक है।
आप निम्न आदेश का उपयोग कर सकते हैं:
$ npx create-next-app nextauth-upstash-redis \
--use-npm \
--example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
क्रेडेंशियल के सेटअप को थोड़ा आसान बनाने के लिए आप dotenv पैकेज का उपयोग करेंगे। dotenv, NextAuth, Redis अडैप्टर और Upstash HTTP Redis क्लाइंट प्राप्त करने के लिए, इस कमांड का उपयोग करें:
$ npm i dotenv next-auth @upstash/redis @next-auth/upstash-redis-adapter
प्रामाणिक API समापन बिंदु बनाना
NextAuth के लिए API एंडपॉइंट एक साधारण JS फ़ाइल है, इसे pages/api/auth/[...nextauth].js पर बनाएं। निम्नलिखित सामग्री के साथ:
import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";
import { UpstashRedisAdapter } from "@next-auth/upstash-redis-adapter";
import { Redis } from "@upstash/redis";
import "dotenv/config";
export default NextAuth({
adapter: UpstashRedisAdapter(
new Redis({
url: process.env.UPSTASH_REDIS_URL,
token: process.env.UPSTASH_REDIS_TOKEN,
})
),
providers: [
GithubProvider({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
}),
],
});
UpstashRedisAdapter upstashRedisClient, . को लपेटता है और आप इसे पर्यावरण चर से अपस्टैश क्रेडेंशियल्स के साथ आपूर्ति करते हैं। इस उदाहरण में, उन्हें एक .env . से dotenv पैकेज के माध्यम से लोड किया जाएगा हमारे आवेदन रूट निर्देशिका में फ़ाइल। वही GitHub प्रदाता के लिए जाता है।
पर्यावरण चर सेट करना
पर्यावरण चर सेट करने के लिए, आपको एक .env . बनाना होगा निम्नलिखित सामग्री के साथ फाइल करें:
UPSTASH_REDIS_URL=
UPSTASH_REDIS_TOKEN=
GITHUB_ID=
GITHUB_SECRET=
आपको Upstash के क्रेडेंशियल Upstash कंसोल से मिलते हैं। कंसोल में लॉग इन करें, एक डेटाबेस बनाएं और ओवरव्यू में उस पर क्लिक करें। चित्र 1 कंसोल में वह स्थान दिखाता है जिसमें आपके लिए आवश्यक क्रेडेंशियल शामिल हैं।
अपने GitHub खाते के लिए एक नया OAuth एप्लिकेशन पंजीकृत करते समय आपको GitHub प्रदाता क्रेडेंशियल मिलते हैं। चित्र 2 पंजीकरण प्रपत्र दिखाता है। अपने स्थानीय मशीन पर उदाहरण चलाने के लिए, आपको https://localhost:3000 URL के रूप में उपयोग करना चाहिए।
अपना ऐप पंजीकृत करने के बाद, आपको क्लाइंट आईडी के साथ प्रस्तुत किया जाता है और "नया क्लाइंट रहस्य उत्पन्न करें" बटन पर क्लिक करके रहस्य उत्पन्न कर सकते हैं।
सेवाओं को सेट करने के बाद, आप अपने ऐप घटकों को सत्र डेटा NextAuth फ़ेच के साथ भी आपूर्ति करना चाहते हैं।
इसके लिए pages/_app.js . पर एक नई फाइल बनाएं निम्नलिखित सामग्री के साथ:
import { SessionProvider } from "next-auth/react";
export default function App({
Component,
pageProps: { session, ...pageProps },
}) {
return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
);
}
यह कोड आपके Next.js ऐप के सभी घटकों को सत्र डेटा प्रदान करेगा ताकि आप जांच सकें कि वर्तमान उपयोगकर्ता लॉग इन है या नहीं।
यह जांचने के लिए कि क्या सब कुछ काम करता है, आपको page/index.js पर इंडेक्स पेज को भी अपडेट करना होगा। इस कोड के साथ:
import { useSession, signIn, signOut } from "next-auth/react";
export default function Home() {
const { data: session } = useSession();
if (session) {
const { email, image, name } = session.user;
return (
<>
<img src={image} width="150" /> <br />
Signed in as {name} ({email}) <br />
<button onClick={signOut}>Sign out</button>
</>
);
}
return <button onClick={signIn}>Sign in</button>;
}
यदि कोई सत्र मौजूद है, तो यह वर्तमान उपयोगकर्ता की प्रोफ़ाइल छवि, नाम और ईमेल पता प्रदर्शित करेगा। यदि नहीं, तो यह केवल एक साइन-इन बटन दिखाता है जो उपयोगकर्ता को स्वचालित रूप से एक लॉगिन पृष्ठ पर रीडायरेक्ट कर देगा।
आवेदन का परीक्षण
पूरे सेटअप का परीक्षण करने के लिए, आपको निम्न आदेश चलाना होगा:
$ npm run dev
यह कमांड पोर्ट 3000 पर एक HTTP सर्वर शुरू करेगा जिसे आपको एक ब्राउज़र में खोलना होगा। यदि सब कुछ ठीक रहा, तो आपको साइन-इन बटन के साथ प्रस्तुत किया जाएगा। इस बटन पर क्लिक करें और ऐप को अपने GitHub खाते से कनेक्ट होने दें।
यदि साइनअप सफल होता है, तो आपको अनुक्रमणिका पृष्ठ पर पुनर्निर्देशित किया जाएगा और आप अपने GitHub खाते की जानकारी देखेंगे।
एक Redis डेटाबेस के साथ कई ऐप्लिकेशन का उपयोग करना
Upstash प्रत्येक खाते के लिए एक निःशुल्क Redis डेटाबेस प्रदान करता है। आप इस डेटाबेस का उपयोग कई डिस्कनेक्ट किए गए अनुप्रयोगों के लिए कर सकते हैं, एक उपसर्ग के साथ जो स्टोरेज में लिखी गई सभी कुंजियों में जोड़ा जाएगा।
इसे सेट करने के लिए, आपको pages/api/auth/[...nextauth].js के अंदर कोड बदलना होगा . एडेप्टर फ़ैक्टरी फ़ंक्शन अपस्टैश रेडिस क्लाइंट के अलावा दूसरा तर्क लेता है।
UpstashRedisAdapter(
new Redis({
url: process.env.UPSTASH_REDIS_URL,
token: process.env.UPSTASH_REDIS_TOKEN,
}),
{ baseKeyPrefix: "app-specific-prefix-1:" }
);
इस तरह, आप सुरक्षित रह सकते हैं कि एकाधिक ऐप्स के उपयोगकर्ता आपके डेटाबेस में न टकराएं।
निष्कर्ष
NextAuth बिना किसी परेशानी के आपके एप्लिकेशन के लिए प्रमाणीकरण सेट करने के लिए एक आसान लाइब्रेरी है। अपस्टैश रेडिस, एक साधारण रेडिस डेटाबेस होस्टिंग सेवा से आप उपयोग में उतनी ही आसानी की उम्मीद कर सकते हैं। Upstash Redis के लिए नए NextAuth डेटाबेस एडॉप्टर के साथ, ये एक शक्तिशाली तालमेल बनाने के लिए जो आपको कुछ ही समय में नए एप्लिकेशन को मंथन करने देता है!
Upstash Redis एक सर्वर रहित डेटाबेस है; आप केवल उसी के लिए भुगतान करते हैं जिसका आप उपयोग करते हैं, इसलिए आप एक ऐसे ऐप के लिए बहुत अधिक बिल की चिंता किए बिना कई एमवीपी पर परीक्षण और पुनरावृति कर सकते हैं, जिसमें उपयोगकर्ता भी नहीं हैं।