OAuth 2.0 এবং Social Login ইন্টিগ্রেশন

Next.js অ্যাপ্লিকেশনগুলোতে OAuth 2.0 এবং সোশ্যাল লগিন (যেমন Google, Facebook, GitHub) ইন্টিগ্রেট করা একটি গুরুত্বপূর্ণ ফিচার, যা ইউজারদের অ্যাক্সেস এবং অ্যানথেনটিকেশন সহজ করে তোলে। OAuth 2.0 এবং সোশ্যাল লগিন সিস্টেমের মাধ্যমে ইউজাররা সহজেই নিজেদের সোশ্যাল অ্যাকাউন্ট ব্যবহার করে লগইন করতে পারেন, যা নিরাপত্তা এবং ব্যবহারকারীর সুবিধার জন্য উপকারী।

Next.js এ OAuth 2.0 এবং সোশ্যাল লগিন ইন্টিগ্রেট করার জন্য NextAuth.js একটি জনপ্রিয় লাইব্রেরি যা আপনাকে সহজে এই কাজগুলো করতে সাহায্য করে। NextAuth.js সাপোর্ট করে বহু ধরনের সোসিয়াল লগিন পদ্ধতি, যেমন: Google, Facebook, GitHub, Twitter ইত্যাদি।

১. NextAuth.js ইনস্টলেশন

NextAuth.js ব্যবহার করতে হলে প্রথমে আপনাকে এই প্যাকেজটি ইনস্টল করতে হবে।

npm install next-auth

এই লাইব্রেরি আপনাকে OAuth 2.0 ভিত্তিক সোশ্যাল লগিন ইন্টিগ্রেশন করতে সাহায্য করবে এবং সহজে JWT (JSON Web Tokens) ব্যবহার করার সুবিধা দেবে।

২. Next.js এ NextAuth.js কনফিগারেশন

NextAuth.js কে কনফিগার করার জন্য আপনাকে pages/api/auth/[...nextauth].js ফাইল তৈরি করতে হবে, যেখানে আপনি আপনার OAuth পদ্ধতিগুলি কনফিগার করবেন।

কনফিগারেশন ফাইলের উদাহরণ:

// pages/api/auth/[...nextauth].js

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import FacebookProvider from "next-auth/providers/facebook";

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,  // Google Client ID
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,  // Google Client Secret
    }),
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID,  // Facebook Client ID
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET,  // Facebook Client Secret
    })
  ],
  pages: {
    signIn: '/auth/signin',  // কাস্টম সাইন ইন পেজ (ঐচ্ছিক)
  },
  session: {
    strategy: "jwt",  // JWT ভিত্তিক সেশন ব্যবহার
  },
  callbacks: {
    async jwt({ token, account }) {
      if (account) {
        token.accessToken = account.access_token; // Access token যুক্ত করা
      }
      return token;
    },
  },
  secret: process.env.NEXTAUTH_SECRET,  // সিক্রেট কী (যেমন JWT সাইনিং)
});

এখানে, Google এবং Facebook এর জন্য দুটি OAuth পদ্ধতি কনফিগার করা হয়েছে। প্রতিটি প্রোভাইডারের জন্য আপনার clientId এবং clientSecret পেতে হবে যা আপনি সংশ্লিষ্ট সোশ্যাল প্ল্যাটফর্মের ডেভেলপার কনসোল থেকে পেতে পারেন।

সোশ্যাল লগিন প্রোভাইডার কনফিগার করার জন্য প্রাথমিক পদক্ষেপ:

1. Google: Google Developer Console এ গিয়ে একটি প্রজেক্ট তৈরি করুন এবং OAuth 2.0 credentials তৈরি করুন।
2. Facebook: Facebook Developer Console এ গিয়ে অ্যাপ তৈরি করে OAuth 2.0 credentials সংগ্রহ করুন।

৩. সাইন ইন পেজ তৈরি করা

NextAuth.js আপনার অ্যাপ্লিকেশনে একটি ডিফল্ট সাইন ইন পেজ সরবরাহ করে, তবে আপনি চাইলে কাস্টম সাইন ইন পেজও তৈরি করতে পারেন। উদাহরণস্বরূপ, কাস্টম সাইন ইন পেজটি pages/auth/signin.js এ তৈরি করতে পারেন।

// pages/auth/signin.js

import { signIn } from "next-auth/react";

export default function SignIn() {
  return (
    <div>
      <h1>Sign In</h1>
      <button onClick={() => signIn("google")}>Sign in with Google</button>
      <button onClick={() => signIn("facebook")}>Sign in with Facebook</button>
    </div>
  );
}

এখানে, signIn() ফাংশনটি ব্যবহার করে আপনি সোশ্যাল প্রোভাইডার (যেমন Google বা Facebook) দিয়ে লগইন করতে পারবেন।

৪. Auth Context এবং ইউজার ডেটা অ্যাক্সেস করা

NextAuth.js ব্যবহার করে লগইন হওয়া ইউজারের ডেটা অ্যাক্সেস করার জন্য আপনি useSession হুক ব্যবহার করতে পারেন, যা আপনাকে লগইন স্ট্যাটাস এবং ইউজারের তথ্য সরবরাহ করবে।

// pages/index.js

import { useSession, signIn, signOut } from "next-auth/react";

export default function Home() {
  const { data: session } = useSession();

  if (session) {
    return (
      <div>
        <h1>Welcome, {session.user.name}!</h1>
        <button onClick={() => signOut()}>Sign out</button>
      </div>
    );
  } else {
    return (
      <div>
        <h1>Please sign in</h1>
        <button onClick={() => signIn("google")}>Sign in with Google</button>
      </div>
    );
  }
}

এখানে, useSession হুকটি আপনার অ্যাপের মধ্যে ইউজারের লগইন স্ট্যাটাস এবং তথ্য নিয়ন্ত্রণ করতে সাহায্য করবে। signIn() এবং signOut() ফাংশনগুলি দিয়ে আপনি লগইন এবং লগআউট করতে পারবেন।

৫. JWT (JSON Web Tokens) ব্যবহার করা

NextAuth.js JWT (JSON Web Tokens) সাপোর্ট করে, যা আপনাকে সার্ভার এবং ক্লায়েন্টের মধ্যে নিরাপদভাবে ইউজারের তথ্য ট্রান্সফার করতে সাহায্য করে। উপরের কনফিগারেশনে আমরা jwt স্ট্রাটেজি ব্যবহার করেছি যা JWT ভিত্তিক সেশন তৈরি করবে।

JWT কনফিগারেশন উদাহরণ:

callbacks: {
  async jwt({ token, account }) {
    if (account) {
      token.accessToken = account.access_token;  // অ্যাক্সেস টোকেন JWT তে যোগ করা
    }
    return token;
  },
}

এখানে, যখন ইউজার সাইন ইন করেন, তখন অ্যাক্সেস টোকেন JWT তে যুক্ত হয়ে যায় এবং এটি পরবর্তীতে API রিকোয়েস্টে ব্যবহার করা যায়।

৬. ডিপ্লয়মেন্ট

Next.js অ্যাপ্লিকেশন হোস্টিং করার জন্য Vercel বা অন্য কোন সার্ভারে ডিপ্লয় করা যেতে পারে। Vercel এ ডিপ্লয় করার সময় পরিবেশ ভেরিয়েবলগুলি (যেমন GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, NEXTAUTH_SECRET) কনফিগার করতে ভুলবেন না।

সারাংশ

Next.js এ OAuth 2.0 এবং সোশ্যাল লগিন ইন্টিগ্রেশন করা খুবই সহজ। NextAuth.js লাইব্রেরি ব্যবহার করে আপনি Google, Facebook, GitHub এবং অন্যান্য সোশ্যাল প্রোভাইডারদের মাধ্যমে ইউজারদের লগইন করাতে পারেন। এটি JWT (JSON Web Tokens) ব্যবহার করে সেশন ম্যানেজমেন্ট এবং নিরাপদ অথেন্টিকেশন সিস্টেম তৈরি করতে সাহায্য করে।