NextAuth এবং সার্ভারলেস রেডিস দিয়ে সিকিউর Next.js অথেনটিকেশন

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

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

NextAuth Upstash Redis Adapter

আজকের দিন পর্যন্ত, Upstash Redis NextAuth দ্বারা সাপোর্টেড ডেটাবেসগুলির একটি!

upstash-redis NextAuth adapter Upstash HTTP ক্লায়েন্ট ব্যবহার করে, যা অনেক হোস্টিং সার্ভিসে কাজ করে। আপনি প্রিফিক্সসহ একই ফ্রি টিয়ার রেডিস ডেটাবেস ব্যবহার করতে পারেন একাধিক 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, রেডিস অ্যাডাপ্টার, এবং Upstash HTTP রেডিস ক্লায়েন্ট পেতে এই কমান্ডটি ব্যবহার করুন:

$ 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 ক্রেডেনশিয়াল সরবরাহ করেন। এই উদাহরণে, এগুলো dotenv প্যাকেজ দ্বারা আমাদের অ্যাপ্লিকেশন রুট ডিরেক্টরির একটি .env ফাইল থেকে লোড হবে। GitHub প্রোভাইডারের জন্যও একই बात।

এনভায়রনমেন্ট ভেরিয়েবল সেটআপ

এনভায়রনমেন্ট ভেরিয়েবল সেটআপ করার জন্য, আপনাকে নিচের কন্টেন্টের সাথে একটি .env ফাইল তৈরি করতে হবে:

UPSTASH_REDIS_URL=
UPSTASH_REDIS_TOKEN=
GITHUB_ID=
GITHUB_SECRET=

আপনি Upstash ক্রেডেনশিয়াল Upstash কনসোল থেকে পাবেন। কনসোলে লগ ইন করুন, একটি ডেটাবেস তৈরি করুন এবং ওভারভিউতে এটিতে ক্লিক করুন। চিত্র ১ কনসোলে সেই জায়গা দেখাচ্ছে যেখানে আপনার প্রয়োজনীয় ক্রেডেনশিয়াল আছে।

আপনি GitHub প্রোভাইডার ক্রেডেনশিয়াল পাবেন আপনার GitHub অ্যাকাউন্টের জন্য একটি নতুন OAuth Application রেজিস্টার করার সময়। চিত্র ২ রেজিস্ট্রেশন ফর্ম দেখাচ্ছে। আপনার লোকাল মেশিনে উদাহরণটি চালাতে, আপনাকে https://localhost:3000 URLs হিসেবে ব্যবহার করা উচিত।

আপনার অ্যাপ রেজিস্টার করার পর, আপনাকে Client ID দেখাবে এবং "generate new client secret" বাটনে ক্লিক করে সিক্রেট জেনারেট করতে পারবেন।

সার্ভিসগুলো সেটআপ করার পর, আপনি আপনার অ্যাপ কম্পোনেন্টগুলোকেও সেশন ডেটা দিতে চাইবেন যা 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

এই কমান্ড পোর্ট ৩০০০-এ একটি HTTP সার্ভার শুরু করবে যা আপনাকে ব্রাউজারে খুলতে হবে। যদি সবকিছু ঠিক থাকে, তবে আপনাকে একটি সাইন-ইন বাটন দেখাবে। এই বাটনে ক্লিক করুন এবং অ্যাপকে আপনার GitHub অ্যাকাউন্টের সাথে কানেক্ট করার অনুমতি দিন।

সাইন আপ সফল হলে, আপনাকে ইনডেক্স পেজে রিডাইরেক্ট করা হবে এবং আপনার GitHub অ্যাকাউন্ট ইনফরমেশন দেখাবে।

একটি রেডিস ডেটাবেসের সাথে একাধিক অ্যাপ্লিকেশন ব্যবহার

Upstash প্রতিটি অ্যাকাউন্টের জন্য একটি ফ্রি রেডিস ডেটাবেস অফার করে। আপনি এই ডেটাবেসটি প্রিফিক্সসহ একাধিক ডিসকানেক্টেড অ্যাপ্লিকেশনের জন্য ব্যবহার করতে পারেন, যা স্টোরেজে লেখা সব কি-তে যোগ হবে।

এটি সেটআপ করতে, আপনাকে pages/api/auth/[...nextauth].js-এর ভিতরের কোড পরিবর্তন করতে হবে। অ্যাডাপ্টার ফ্যাক্টরি ফাংশন Upstash রেডিস ক্লায়েন্টের পাশাপাশি দ্বিতীয় আর্গুমেন্ট হিসেবে নেয়।

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

এইভাবে, আপনি নিশ্চিত হতে পারেন যে একাধিক অ্যাপের ব্যবহারকারীরা আপনার ডেটাবেসে колиশন করবে না।

উপসংহার

NextAuth আপনার অ্যাপ্লিকেশনের জন্য অথেনটিকেশন সেটআপ করার একটি হ্যান্ডি লাইব্রেরি যা কোনো ঝামেলা ছাড়া। একই সহজ ব্যবহার Upstash রেডিস থেকে আপনি আশা করতে পারেন, একটি সিম্পল রেডিস ডেটাবেস হোস্টিং সার্ভিস। Upstash রেডিসের জন্য নতুন NextAuth ডেটাবেস অ্যাডাপ্টার সাথে, এই দুটি একটি শক্তিশালী সিনার্জি তৈরি করে যা আপনাকে নতুন অ্যাপ্লিকেশন খুব দ্রুত বানাতে দেয়!

Upstash রেডিস একটি সার্ভারলেস ডেটাবেস; আপনি শুধু যতটুকু ব্যবহার করবেন ততটুকু পেমেন্ট করবেন, তাই আপনি একাধিক MVP-তে টেস্ট এবং ইটারেট করতে পারেন একটি অ্যাপের জন্য বিশাল বিল চিন্তা না করে যেটির ইউজারও এখনো নেই।