NextAuth এবং সার্ভারলেস রেডিসের সাথে Next.js প্রমাণীকরণ

Next.js হল অন্যতম জনপ্রিয় ফ্রন্টএন্ড ফ্রেমওয়ার্ক যার মূলে রয়েছে রিঅ্যাক্ট। এটি স্ট্যাটিক এইচটিএমএল তৈরি করতে পারে বা ক্লায়েন্ট এবং সার্ভারে গতিশীলভাবে রেন্ডার করতে পারে। এটি প্রতিটি ধরণের অ্যাপ্লিকেশন এবং ওয়েবসাইটগুলির জন্য এটিকে একটি বহুমুখী হাতিয়ার করে তোলে৷ এবং সবচেয়ে ভাল জিনিস হল, এটি ওপেন সোর্স, এবং আপনি এটি বিনামূল্যে ব্যবহার করতে পারেন!

NextAuth হল Next.js-এর জন্য একটি তৃতীয় পক্ষের লাইব্রেরি যা আপনাকে বিভিন্ন পরিচয় প্রদানকারী এবং ডেটাবেস একত্রিত করতে সাহায্য করে। আপনি সাইন আপ করার সময় আপনার ব্যবহারকারীদের সময় বাঁচাতে পারেন এবং এখনও আপনার নির্বাচিত ডাটাবেসে তাদের সমস্ত প্রয়োজনীয় অ্যাকাউন্ট তথ্য থাকতে পারে। NextAuth GitHub, Google, Facebook, Coinbase এবং আরও অনেকগুলি সহ 50 টিরও বেশি প্রমাণীকরণ প্রদানকারীর সমর্থন নিয়ে আসে৷

NextAuth Upstash Redis Adapter

আজ অবধি, 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

Auth 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 />
        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-এর ভিতরে কোড পরিবর্তন করতে হবে . অ্যাডাপ্টার ফ্যাক্টরি ফাংশন 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 একটি সার্ভারহীন ডাটাবেস; আপনি যা ব্যবহার করেন তার জন্য আপনি শুধুমাত্র অর্থ প্রদান করেন, তাই আপনি এমন একটি অ্যাপের জন্য একটি বিশাল বিলের বিষয়ে চিন্তা না করে একাধিক MVP পরীক্ষা করতে এবং পুনরাবৃত্তি করতে পারেন যার ব্যবহারকারী নেই৷