JWT (JSON Web Tokens) এর মাধ্যমে Authentication

JWT (JSON Web Tokens) একটি জনপ্রিয় অটেনটিকেশন পদ্ধতি, যা সাধারণত ব্যবহারকারীদের সাইন ইন ও সাইন আউট করার জন্য এবং তাদের পরিচয় যাচাই করার জন্য ব্যবহৃত হয়। Next.js এ JWT ব্যবহার করে Authentication সিস্টেম তৈরি করা যায়, যেখানে ব্যবহারকারীর তথ্যকে নিরাপদে স্টোর এবং ভ্যালিডেট করা হয়।

এখানে আমরা দেখব কিভাবে Next.js অ্যাপে JWT ব্যবহার করে Authentication প্রক্রিয়া তৈরি করা যায়।

১. JWT কী?

JWT (JSON Web Token) একটি ওপেন স্ট্যান্ডার্ড (RFC 7519) যা দুটি পক্ষের মধ্যে নিরাপদভাবে তথ্য আদান-প্রদান করতে ব্যবহৃত হয়। এটি সাধারণত তিনটি অংশে বিভক্ত:

1. Header: এই অংশটি JWT এর ধরনের (যেমন JWT) এবং হ্যাশিং অ্যালগরিদমের তথ্য ধারণ করে।
2. Payload: এই অংশে ক্লেইম থাকে, যা কোনো নির্দিষ্ট তথ্য যেমন ইউজারের আইডি বা ইমেইল ধারণ করে।
3. Signature: এই অংশটি নিরাপত্তার জন্য ব্যবহৃত হয়। এটি হেডার ও পে-লোডের উপর ভিত্তি করে তৈরি হয় এবং একটি সিক্রেট কী বা রেসিপি দিয়ে স্বাক্ষরিত হয়।

JWT সাধারণত Authorization প্রক্রিয়ায় ব্যবহার করা হয়, যেখানে ব্যবহারকারী সফলভাবে লগইন করার পর একটি টোকেন প্রদান করা হয়, যা পরবর্তী রিকোয়েস্টে প্রমাণ হিসেবে ব্যবহৃত হয়।

২. Next.js এ JWT Authentication Implement করা

Next.js এ JWT Authentication ইমপ্লিমেন্ট করার জন্য সাধারণত সার্ভার সাইড বা API রাউট ব্যবহার করা হয়। JWT টোকেনটি সাধারণত HTTP রিকোয়েস্টের Authorization হেডারে পাঠানো হয়, যা সার্ভার বা API দ্বারা যাচাই করা হয়।

উদাহরণ: Next.js এ JWT Authentication

এই উদাহরণে, আমরা একটি সাইন ইন পেজ তৈরি করব, যেখানে ব্যবহারকারী তার ক্রেডেনশিয়ালস দিয়ে লগইন করবে এবং একটি JWT টোকেন পাবে। তারপর, এটি পরবর্তী API রিকোয়েস্টে ব্যবহার করা হবে।

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

প্রথমে একটি লগইন পেজ তৈরি করুন, যেখানে ব্যবহারকারী তার ইউজারনেম এবং পাসওয়ার্ড দেবে।

pages/login.js:

import { useState } from 'react';
import { useRouter } from 'next/router';

export default function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const router = useRouter();

  const handleSubmit = async (e) => {
    e.preventDefault();

    const res = await fetch('/api/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ email, password }),
    });

    const data = await res.json();
    
    if (data.token) {
      // JWT টোকেন পাওয়া গেলে তাকে localStorage এ স্টোর করে হোম পেজে রিডিরেক্ট করা হচ্ছে
      localStorage.setItem('token', data.token);
      router.push('/');
    } else {
      alert('Invalid credentials');
    }
  };

  return (
    <div>
      <h1>Login</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <button type="submit">Login</button>
      </form>
    </div>
  );
}

এখানে, আমরা একটি সাইন ইন ফর্ম তৈরি করেছি, যা ব্যবহারকারীর ইমেইল এবং পাসওয়ার্ড নেয় এবং /api/login API এ POST রিকোয়েস্ট পাঠায়। সফলভাবে লগইন হলে JWT টোকেন localStorage এ সেভ করা হয় এবং ব্যবহারকারীকে হোম পেজে রিডিরেক্ট করা হয়।

৪. API রাউট তৈরি করা

এখন, আমরা /api/login এ একটি POST রিকোয়েস্ট হ্যান্ডলার তৈরি করব যা ইউজারের ক্রেডেনশিয়ালস যাচাই করবে এবং JWT টোকেন প্রদান করবে।

pages/api/login.js:

import jwt from 'jsonwebtoken';

const users = [
  { email: 'user@example.com', password: 'password123', id: 1 },
  { email: 'admin@example.com', password: 'admin123', id: 2 },
];

export default function handler(req, res) {
  if (req.method === 'POST') {
    const { email, password } = req.body;
    
    // ইউজারের ক্রেডেনশিয়ালস যাচাই
    const user = users.find((user) => user.email === email && user.password === password);
    
    if (user) {
      // JWT টোকেন তৈরি
      const token = jwt.sign({ id: user.id, email: user.email }, 'your-secret-key', { expiresIn: '1h' });
      res.status(200).json({ token });
    } else {
      res.status(401).json({ message: 'Invalid credentials' });
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

এখানে, jwt.sign() ফাংশন ব্যবহার করে একটি JWT টোকেন তৈরি করা হয়েছে। এই টোকেনটিতে ইউজারের ইমেইল এবং আইডি পে-লোড হিসেবে রয়েছে, এবং এটি একটি সিক্রেট কী দিয়ে সাইন করা হয়েছে।

৫. JWT টোকেন ভ্যালিডেট করা

এখন, আপনি যেকোনো API রিকোয়েস্টের জন্য JWT টোকেন ভ্যালিডেট করতে পারেন। এটি সাধারণত একটি middleware হিসেবে কাজ করে, যেটি রিকোয়েস্টের Authorization হেডার থেকে টোকেন বের করে এবং তা যাচাই করে।

pages/api/protected.js:

import jwt from 'jsonwebtoken';

export default function handler(req, res) {
  if (req.method === 'GET') {
    const token = req.headers['authorization']?.split(' ')[1];  // Bearer token

    if (!token) {
      return res.status(403).json({ message: 'No token provided' });
    }

    try {
      // JWT টোকেন যাচাই
      const decoded = jwt.verify(token, 'your-secret-key');
      res.status(200).json({ message: 'Access granted', user: decoded });
    } catch (error) {
      res.status(403).json({ message: 'Invalid or expired token' });
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

এখানে, jwt.verify() ফাংশন ব্যবহার করে টোকেনটি যাচাই করা হচ্ছে। যদি টোকেনটি বৈধ হয়, তবে ব্যবহারকারীর তথ্য ফেরত পাঠানো হবে, অন্যথায় এক্সেস অস্বীকার করা হবে।

৬. JWT ব্যবহার করার সুবিধা এবং নিরাপত্তা

• নিরাপত্তা: JWT টোকেনগুলি সিক্রেট কী দিয়ে সাইন করা থাকে, তাই এগুলো সহজে পরিবর্তন করা যায় না।
• স্টেটলেস: JWT হলো স্টেটলেস (Stateless)। এর মানে হল যে সার্ভারকে কোনো স্টেট ম্যানেজমেন্ট করতে হয় না, কারণ সমস্ত তথ্য টোকেনের মধ্যে থাকে।
• সেশন ম্যানেজমেন্ট সহজ: JWT সেশন ম্যানেজমেন্টে সহায়তা করে, যেখানে টোকেনটি ব্যতীত সার্ভারের কোনো সেশন ডেটা নেই।

সারাংশ

Next.js এ JWT Authentication ব্যবহার করে আপনি সুরক্ষিত এবং কার্যকরভাবে ব্যবহারকারীদের লগইন এবং সেশন ম্যানেজমেন্ট করতে পারবেন। JWT একটি স্টেটলেস অথেনটিকেশন সিস্টেম, যা নিরাপদে ব্যবহারকারীর তথ্য সংরক্ষণ এবং যাচাই করতে সহায়তা করে।