NextAuth और Serverless Redis के साथ Next.js प्रमाणीकरण सुरक्षित करें

परिचय

Next.js अपने मूल में React के साथ सबसे लोकप्रिय फ्रंटएंड फ्रेमवर्क में से एक है। यह स्थिर HTML उत्पन्न कर सकता है या क्लाइंट और सर्वर पर डायनामिक रूप से रेंडर कर सकता है। यह इसे हर प्रकार के एप्लिकेशन और वेबसाइट के लिए एक बहुमुखी उपकरण बनाता है। और सबसे अच्छी बात यह है कि यह ओपन-सोर्स है, और आप इसे मुफ्त में उपयोग कर सकते हैं!

NextAuth Next.js के लिए एक थर्ड-पार्टी लाइब्रेरी है जो आपको विभिन्न पहचान प्रदाताओं और डेटाबेस को इंटीग्रेट करने में मदद करती है। आप अपने उपयोगकर्ताओं का साइन-अप में समय बचा सकते हैं और फिर भी अपने चुने हुए डेटाबेस में उनकी सभी आवश्यक खाता जानकारी रख सकते हैं। NextAuth 50 से अधिक प्रमाणीकरण प्रदाताओं के लिए समर्थन के साथ आता है, जिसमें GitHub, Google, Facebook, Coinbase, और कई अन्य शामिल हैं।

NextAuth Upstash Redis एडाप्टर

आज तक, Upstash Redis NextAuth द्वारा समर्थित डेटाबेस में से एक है!

upstash-redis NextAuth एडाप्टर Upstash HTTP क्लाइंट का उपयोग करता है, जो कई होस्टिंग सेवाओं पर काम करता है। आप प्रीफिक्स के साथ एक फ्री टियर Redis डेटाबेस का उपयोग कई NextAuth-सक्षम एप्लिकेशन के लिए कर सकते हैं।

तो, आइए इस नए जारी एडाप्टर के साथ NextAuth में गोता लगाएं।

Upstash Redis के साथ NextAuth उदाहरण

इस ट्यूटोरियल के लिए आपके पास Node.js का कम से कम संस्करण 16.13.2 इंस्टॉल होना चाहिए। आपको एक GitHub और Upstash खाते की भी आवश्यकता है।

एप्लिकेशन सेटअप करना

आपको एक बेसिक Next.js ऐप बनाने की आवश्यकता है; इस उदाहरण के लिए learn-starter टेम्पलेट ठीक है।

आप निम्न कमांड का उपयोग कर सकते हैं:

$ 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 को लपेटता है, और आप इसे पर्यावरण चर से Upstash क्रेडेंशियल्स के साथ आपूर्ति करते हैं। इस उदाहरण में, उन्हें हमारे एप्लिकेशन रूट डायरेक्टरी में एक .env फाइल से dotenv पैकेज के माध्यम से लोड किया जाएगा। GitHub प्रदाता के लिए भी यही लागू होता है।

पर्यावरण चर सेट करना

पर्यावरण चर सेट करने के लिए, आपको निम्न सामग्री के साथ एक .env फाइल बनानी होगी:

UPSTASH_REDIS_URL=
UPSTASH_REDIS_TOKEN=
GITHUB_ID=
GITHUB_SECRET=

आप Upstash कंसोल से Upstash क्रेडेंशियल्स प्राप्त करते हैं। कंसोल में लॉग इन करें, एक डेटाबेस बनाएं और अवलोकन में उस पर क्लिक करें। चित्र 1 कंसोल में वह स्थान दिखाता है जिसमें आपके द्वारा आवश्यक क्रेडेंशियल्स हैं।

आप अपने GitHub खाते के लिए एक नया OAuth एप्लिकेशन रजिस्टर करते समय GitHub प्रदाता क्रेडेंशियल्स प्राप्त करते हैं। चित्र 2 पंजीकरण फॉर्म दिखाता है। अपने स्थानीय मशीन पर उदाहरण चलाने के लिए, आपको URL के रूप में https://localhost:3000 का उपयोग करना चाहिए।

अपना ऐप पंजीकृत करने के बाद, आपको क्लाइंट आईडी प्रस्तुत की जाती है और "नया क्लाइंट सीक्रेट उत्पन्न करें" बटन पर क्लिक करके सीक्रेट उत्पन्न कर सकते हैं।

सेवाएं सेट अप करने के बाद, आप अपने ऐप कंपोनेंट को उस सत्र डेटा के साथ आपूर्ति करना चाहेंगे जो 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 />
        साइन इन किया गया {name} ({email}) के रूप में<br />
        <button onClick={signOut}>साइन आउट</button>
      </>
    );
  }
  return <button onClick={signIn}>साइन इन</button>;
}

यदि कोई सत्र मौजूद है, तो यह वर्तमान उपयोगकर्ता की प्रोफ़ाइल छवि, नाम और ईमेल पता प्रदर्शित करेगा। यदि नहीं, तो यह केवल एक साइन-इन बटन दिखाता है जो स्वचालित रूप से उपयोगकर्ता को लॉगिन पेज पर रीडायरेक्ट कर देगा।

एप्लिकेशन टेस्ट करना

पूरे सेटअप को टेस्ट करने के लिए, आपको निम्न कमांड चलाना होगा:

$ npm run dev

यह कमांड पोर्ट 3000 पर एक HTTP सर्वर शुरू करेगा जिसे आपको ब्राउज़र में खोलना होगा। यदि सब कुछ ठीक रहा, तो आपको एक साइन-इन बटन प्रस्तुत किया जाएगा। इस बटन पर क्लिक करें और ऐप को अपने GitHub खाते से कनेक्ट करने की अनुमति दें।

यदि साइनअप सफल रहा, तो आपको इंडेक्स पेज पर रीडायरेक्ट किया जाएगा और आपकी GitHub खाता जानकारी दिखाई देगी।

एक Redis डेटाबेस के साथ कई एप्लिकेशन का उपयोग करना

Upstash हर खाते के लिए एक फ्री Redis डेटाबेस प्रदान करता है। आप इस डेटाबेस का उपयोग प्रीफिक्स के साथ कई डिस्कनेक्टेड एप्लिकेशन के लिए कर सकते हैं जो स्टोरेज में लिखी गई सभी कुंजियों में जोड़ा जाएगा।

इसे सेट अप करने के लिए, आपको pages/api/auth/[...nextauth].js के अंदर कोड बदलना होगा। एडाप्टर फ़ैक्टरी फ़ंक्शन Upstash Redis क्लाइंट के अलावा दूसरा तर्क लेता है।

UpstashRedisAdapter(
  new Redis({
    url: process.env.UPSTASH_REDIS_URL,
    token: process.env.UPSTASH_REDIS_TOKEN,
  }),
  {
    baseKeyPrefix: "app-specific-prefix-1:"
  }
);

इस तरह, आप सुनिश्चित हो सकते हैं कि कई ऐप्स के उपयोगकर्ता आपके डेटाबेस में टकराएंगे नहीं।

निष्कर्ष

NextAuth आपके एप्लिकेशन के लिए बिना किसी परेशानी के प्रमाणीकरण सेट अप करने के लिए एक आसान लाइब्रेरी है। वही उपयोग में आसानी आप Upstash Redis से उम्मीद कर सकते हैं, एक सरल Redis डेटाबेस होस्टिंग सर्विस। Upstash Redis के लिए नए NextAuth डेटाबेस एडाप्टर के साथ, ये एक शक्तिशाली तालमेल बनाते हैं जो आपको बिना समय नए एप्लिकेशन बनाने देता है!

Upstash Redis एक सर्वरलेस डेटाबेस है; आप केवल उसी के लिए भुगतान करते हैं जो आप उपयोग करते हैं, इसलिए आप कई MVPs पर टेस्ट और पुनरावृति कर सकते हैं बिना एक ऐसे ऐप के लिए भारी बिल की चिंता किए जिसमें उपयोगकर्ता भी नहीं हैं।