এই টিউটোরিয়ালে, আপনি শিখবেন কীভাবে একটি Next.js অ্যাপ্লিকেশনে Auth.js এবং Upstash Redis ব্যবহার করে ইউজার অথেন্টিকেশন ইমপ্লিমেন্ট করতে হয়। আপনি শিখবেন কীভাবে প্রয়োজনীয় এনভায়রনমেন্ট সেট আপ করতে হয়, নিরাপদ ইউজার সাইন-ইন এবং সাইন-আপের জন্য কাস্টম অথেন্টিকেশন প্রোভাইডার তৈরি করতে হয়, এবং সেশন ম্যানেজ করার জন্য Upstash Redis কে ডেটাবেস হিসেবে ইন্টিগ্রেট করতে হয়।

প্রত্যোজনীয় শর্তাবলী

আপনার নিচের مواردগুলো থাকতে হবে:

• Node.js 18 বা তার بالاتر
• একটি Upstash অ্যাকাউন্ট

টেক স্ট্যাক

একটি Upstash Redis ইনস্ট্যান্স সেট আপ করুন

আপনার Upstash ড্যাশবোর্ডে, Redis ট্যাবে যান এবং একটি ডেটাবেস তৈরি করুন।

নিচে স্ক্রোল করুন যতক্ষণ না REST API সেকশনটি পান, এবং .env বাটনটি সিলেক্ট করুন। কন্টেন্ট কপি করে কোথাও সেফ রাখুন।

একটি নতুন Next.js অ্যাপ্লিকেশন তৈরি করুন

চলুন একটি নতুন Next.js প্রজেক্ট তৈরি করে শুরু করি। আপনার টার্মিনাল খুলুন এবং নিচের কমান্ডটি রান করুন:

npx create-next-app@latest my-app

প্রম্পট করার সময়, নিচের অপশনগুলো বেছে নিন:

• Yes যখন TypeScript ব্যবহার করার জন্য বলা হবে।
• No যখন ESLint ব্যবহার করার জন্য বলা হবে।
• Yes যখন Tailwind CSS ব্যবহার করার জন্য বলা হবে।
• No যখন src/ ডিরেক্টরি ব্যবহার করার জন্য বলা হবে।
• Yes যখন App Router ব্যবহার করার জন্য বলা হবে।
• No যখন Turbopack ব্যবহার করার জন্য বলা হবে।
• No যখন ডিফল্ট ইমপোর্ট অ্যালিয়াস (@/*) কাস্টোমাইজ করার জন্য বলা হবে।

এটি হলে, প্রজেক্ট ডিরেক্টরিতে যান এবং ডেভেলপমেন্ট মোডে অ্যাপটি চালান নিচের কমান্ড দিয়ে:

cd my-app npm run dev

অ্যাপটি localhost:3000-এ চলছে বলে উচিত। ডেভেলপমেন্ট সার্ভার বন্ধ করুন প্রয়োজনীয় ডিপেন্ডেন্সি ইনস্টল করতে নিচের কমান্ডগুলো দিয়ে:

npm install @upstash/redis nanoid npm install next-auth @auth/core @auth/upstash-redis-adapter

ইনস্টল করা লাইব্রেরিগুলো شامل:

• nanoid: যুনিক, সিকিউর আইডি জেনারেট করার জন্য লাইব্রেরি।
• next-auth: Next.js- এর জন্য তৈরি অথেন্টিকেশন সলিউশন।
• @auth/core: Auth.js-এ অথেন্টিকেশন হ্যান্ডেল করার জন্য কোর প্যাকেজ।
• @upstash/redis: HTTP রিকোয়েস্ট দিয়ে Upstash Redis-এ ইন্টারঅ্যাক্ট করার SDK।
• @auth/upstash-redis-adapter: Auth.js কে Upstash Redis-এ ইন্টিগ্রেট করার জন্য অ্যাডাপ্টার।

এখন, আপনার প্রজেক্টের রুটে একটি .env ফাইল তৈরি করুন। আপনি AUTH_SECRET, UPSTASH_REDIS_REST_URL এবং UPSTASH_REDIS_REST_TOKEN ভ্যালুগুলো ব্যবহার করবেন।

.env ফাইলটিতে নিচের موارد থাকবে:

# .env # Auth.js Environment Variable AUTH_SECRET="..." # Upstash Redis Environment Variables UPSTASH_REDIS_REST_URL="https://...upstash.io" UPSTASH_REDIS_REST_TOKEN="..."

Upstash Redis ক্লায়েন্ট ইনস্ট্যানশিয়েট করুন

lib ডিরেক্টরিতে redis.ts নামে একটি ফাইল তৈরি করুন নিচের কোডসহ:

// File: lib/redis.ts import { Redis } from '@upstash/redis' export default new Redis({ url: process.env.UPSTASH_REDIS_REST_URL, token: process.env.UPSTASH_REDIS_REST_TOKEN, })

উপরের কোডে, একটি Edge-কম্প্যাটিবল Redis ক্লায়েন্ট ইনস্ট্যান্স এক্সপোর্ট করা হয়েছে যেটি অ্যাপ্লিকেশন জুড়ে ব্যবহার করা হবে।

ইউজার টাইপস এবং ক্রেডেনশিয়ালস হেল্পারস সেট আপ করুন

lib ডিরেক্টরিতে types.ts নামে একটি ফাইল তৈরি করুন নিচের কোডসহ:

// File: lib/types.ts export interface UserType { id?: string email: string name?: string image?: string password?: string emailVerified?: string }

UserType ইন্টারফেস অ্যাপ্লিকেশনে ইউজার অবজেক্টের স্ট্রাকচার ডিফাইন করে। এতে অন্তর্ভুক্ত:

• id (অপশনাল): ইউজারের জন্য একটি যুনিক আইডেন্টিফায়ার।
• email (রিকোয়ার্ড): ইউজারের ইমেইল অ্যাড্রেস।
• name (অপশনাল): ইউজারের নাম।
• image (অপশনাল): ইউজারের প্রোফাইল ইমেজের URL বা পাথ।
• password (অপশনাল): ইউজারের হ্যাশড পাসওয়ার্ড।
• emailVerified (অপশনাল): একটি টাইমস্ট্যাম্প বা স্ট্রিং যা ইঙ্গিত দেয় ইউজারের ইমেইল ভেরিফাইড হয়েছে কিনা/কখন।

এই ইন্টারফেসটি অ্যাপ্লিকেশন জুড়ে ইউজার ডেটার জন্য একটি টাইপ ডেফিনিশন হিসেবে কাজ করে।

আরও, lib ডিরেক্টরিতে credentials.ts নামে একটি ফাইল তৈরি করুন নিচের কোডসহ:

// File: lib/credentials.ts export function generateRandomToken() { const array = new Uint8Array(20) crypto.getRandomValues(array) return Array.from(array, (byte) => byte.toString(16).padStart(2, '0')).join('') } export function generateRandomString(inputValue: string) { const encoder = new TextEncoder() const data = encoder.encode(inputValue) return crypto.subtle.digest('SHA-256', data).then((hashBuffer) => { return Array.from(new Uint8Array(hashBuffer)) .map((byte) => byte.toString(16).padStart(2, '0')) .join('') }) } export async function hashPassword(password: string) { const encoder = new TextEncoder() const data = encoder.encode(password) const hashBuffer = await crypto.subtle.digest('SHA-256', data) return Array.from(new Uint8Array(hashBuffer)) .map((byte) => byte.toString(16).padStart(2, '0')) .join('') } export async function comparePassword(password: string, hash: string) { const hashedPassword = await hashPassword(password) return hashedPassword === hash }

উপরের কোডে, Edge-কম্প্যাটিবল ইউটিলিটি ফাংশনগুলো ডিফাইন করা হয়েছে সিকিউর টোকেন এবং হ্যাশড পাসওয়ার্ড জেনারেট ও ম্যানেজ করার জন্য:

• generateRandomToken: একটি ২০-বাইট র‍্যান্ডম অ্যারে জেনারেট করে এবং সেটিকে হেক্সাডেসিমেল স্ট্রিং-এ কনভার্ট করে ক্রিপ্টোগ্রাফিক্যালি সিকিউর র‍্যান্ডম টোকেন তৈরি করে।
• generateRandomString: একটি ইনপুট স্ট্রিং গ্রহণ করে, সেটিকে বাইটসে এনকোড করে, SHA-256 দিয়ে হ্যাশ করে, এবং হ্যাশটিকে হেক্সাডেসিমেল স্ট্রিং হিসেবে রিটার্ন করে। ইনপুট ভ্যালু থেকে কনসিস্টেন্ট, যুনিক স্ট্রিং জেনারেট করার জন্য উপযোগী।
• hashPassword: একটি প্লেইনটেক্সট পাসওয়ার্ড SHA-256 দিয়ে হ্যাশ করে এবং ফলাফল হ্যাশটিকে হেক্সাডেসিমেল স্ট্রিং-এ কনভার্ট করে। এটি পাসওয়ার্ড নিরাপদে স্টোর করার জন্য ব্যবহার হয়।
• comparePassword: একটি প্লেইনটেক্সট পাসওয়ার্ডকে একটি হ্যাশড পাসওয়ার্ডের সাথে তুলনা করে ইনপুট হ্যাশ করে এবং চেক করে সেটি স্টোরড হ্যাশের সাথে মিলে যাচ্ছে কিনা।

Auth.js-এ Upstash Redis অ্যাডাপ্টার ব্যবহার করা

lib ডিরেক্টরিতে auth.ts নামে একটি ফাইল তৈরি করুন নিচের কোডসহ:

// File: lib/auth.ts import { UpstashRedisAdapter } from '@auth/upstash-redis-adapter' import NextAuth from 'next-auth' import providers from './providers' import redis from './redis' export const { handlers, signIn, signOut, auth } = NextAuth(() => ({ providers, session: { strategy: 'jwt' }, adapter: UpstashRedisAdapter(redis), }))

উপরের কোডে, অথেন্টিকেশন সেট আপ করা হচ্ছে handlers, signIn, signOut, এবং auth ফাংশনগুলো তৈরি করে একটি কাস্টম কনফিগারেশন দিয়ে। এটি JWT-ভিত্তিক সেশন স্ট্র্যাটেজি ব্যবহার করে, UpstashRedisAdapter ব্যবহার করে Upstash Redis ডেটাবেসের সাথে সংযুক্ত হয় ইউজার ডেটা স্টোর করার জন্য, এবং providers মডিউলে ডিফাইন করা অথেন্টিকেশন প্রোভাইডারদের একটি অ্যারে। এই সেটআপটি Upstash Redis কে ব্যাকএন্ড হিসেবে অথেন্টিকেশন এবং সেশন ম্যানেজমেন্টের স্মূথ ইন্টিগ্রেশন সক্ষম করে।

Auth.js-এ কাস্টম অথেন্টিকেশন প্রোভাইডার সেট আপ করুন

lib ডিরেক্টরিতে providers.ts নামে একটি ফাইল তৈরি করুন নিচের কোডসহ:

// File: lib/providers.ts import { nanoid } from 'nanoid' import Credentials from 'next-auth/providers/credentials' import { comparePassword, generateRandomString, hashPassword } from './credentials' import redis from './redis' import { UserType } from './types' export default [ Credentials({ credentials: { email: {}, password: {}, }, authorize: async (credentials, request) => { let type try { const tmp = new URL(request.url).searchParams.get('kind') if (tmp && typeof tmp === 'string') type = tmp } catch (e) {} if (!type || !credentials.email || typeof credentials.email !== 'string' || !credentials.password || typeof credentials.password !== 'string') return null const randomizedPassword = await generateRandomString(credentials.password) const userByEmail = await redis.get(`user:email:${credentials.email}`) if (userByEmail) { if (type !== 'in') { console.log(`can not sign in in a non sign-in mode.`) throw new Error(`can not sign in in a non sign-in mode.`) } const user = await redis.get(`user:${userByEmail}`) if (!user) { console.log(`Found the user by email from user:email:${userByEmail}, but the user object is missing at user:${userByEmail}`) return null } if (user.password) { const hashedPassword = await hashPassword(randomizedPassword) const isPasswordCorrect = await comparePassword(user.password, hashedPassword) if (isPasswordCorrect) { const { password, ...rest } = user return rest } throw new Error(`incorrect password for credentials.`) } throw new Error(`you are using some other authentication method already, but not credentials.`) } else { if (type !== 'up') { console.log(`can not sign up in a non sign-up mode.`) throw new Error(`can not sign up in a non sign-up mode.`) } const newUser = { name: null, image: null, emailVerified: null, email: credentials.email, password: randomizedPassword, } const tmp = nanoid() await redis.set(`user:email:${credentials.email}`, tmp) await redis.set(`user:${tmp}`, newUser) return newUser } }, }), ]

উপরের কোডে, একটি কাস্টম, ক্রেডেনশিয়ালস-ভিত্তিক অথেন্টিকেশন প্রোভাইডারের অ্যারে এক্সপোর্ট করা হয়েছে। Credentials প্রোভাইডারটি সাইন-ইন এবং সাইন-আপ লজিক দুটোই হ্যান্ডেল করে: এটি চেক করে ইউজার Redis-এ এক্সিস্ট করে কিনা এবং إما তাদের পাসওয়ার্ড ভ্যালিডেট করে অথবা একটি নতুন ইউজার তৈরি করে। যদি সাইন-ইন হয়, তবে এটি প্রদত্ত পাসওয়ার্ড (র‍্যান্ডম স্ট্রিং দিয়ে হ্যাশ করা) স্টোরড পাসওয়ার্ডের সাথে তুলনা করে; যদি সাইন-আপ হয়, তবে Upstash Redis-এ একটি নতুন ইউজার এন্ট্রি তৈরি করে। কোডটি Upstash Redis ব্যবহার করে ইউজার ডেটা স্টোরেজ এবং নিশ্চিত করে প্রসেসটি হয়תו সাইন-আপ অথবা সাইন-ইন মোডে URL-এ kind প্যারামিটার অনুযায়ী।

Auth.js-চালিত অথেন্টিকেশন API রুটস সেট আপ করুন

app/api/auth/[...nextauth] ডিরেক্টরিতে route.ts নামে একটি ফাইল তৈরি করুন নিচের কোডসহ:

// File: app/api/auth/[...nextauth]/route.ts export const runtime = 'edge' import { handlers } from '@/lib/auth' export const { GET, POST } = handlers

উপরের কোডে, দুটি এন্ডপয়েন্ট হ্যান্ডলার GET এবং POST এক্সপোর্ট করা হয়েছে যা @/lib/auth.ts ফাইল থেকে এক্সপোর্ট করা handlers ফাংশন দ্বারা হ্যান্ডেল হয়।

app/api/refresh ডিরেক্টরিতে route.ts নামে একটি ফাইল তৈরি করুন নিচের কোডসহ:

// File: app/api/refresh/route.ts export const runtime = 'edge' export const dynamic = 'force-dynamic' export const fetchCache = 'force-no-store' import { auth } from '@/lib/auth' import redis from '@/lib/redis' import { UserType } from '@/lib/types' import { encode } from '@auth/core/jwt' import { cookies } from 'next/headers' import { NextResponse } from 'next/server' export async function GET(request: Request) { const useSecureCookie = request.url.startsWith('https:') const salt = useSecureCookie ? '__Secure-authjs.session-token' : 'authjs.session-token' if (!process.env.AUTH_SECRET) return new NextResponse(null, { status: 500 }) const [session, cookieStore] = await Promise.all([auth(), cookies()]) if (!session?.user?.email) return new NextResponse(null, { status: 400 }) const userByEmail = await redis.get(`user:email:${session.user.email}`) const userData = await redis.get(`user:${userByEmail}`) if (!userData?.email) cookieStore.set(salt, toString(), { secure: useSecureCookie, path: '/', httpOnly: true, sameSite: 'lax', maxAge: 0 }) else { const { image, password, ...rest } = userData const saltVal = await encode({ salt, secret: process.env.AUTH_SECRET, token: { ...rest, picture: image } }) cookieStore.set(salt, saltVal, { secure: useSecureCookie, path: '/', httpOnly: true, sameSite: 'lax' }) } return new NextResponse() }

উপরের কোডে, একটি Edge-কম্প্যাটিবল API রুট তৈরি করা হয়েছে ইউজার সেশন রিফ্রেশ করার জন্য। এটি ইউজার সেশন এবং Redis থেকে সম্পর্কিত ডেটা ফেচ করে, ইউজারের ইমেইল ভেরিফাই করে, এবং সেশন কুকি আপডেট করে। যদি ইউজার ডেটা ইনভ্যালিড বা অনুপস্থিত হয়, তবে সেশন কুকি ক্লিয়ার করা হয়; অন্যথায়, একটি নতুন সাইনড টোকেন জেনারেট হয় এবং কুকিতে স্টোর হয়।

app/api/user ডিরেক্টরিতে route.ts নামে একটি ফাইল তৈরি করুন নিচের কোডসহ:

// File: app/api/user/route.ts export const runtime = 'edge' export const dynamic = 'force-dynamic' export const fetchCache = 'force-no-store' import { auth } from '@/lib/auth' import redis from '@/lib/redis' import { UserType } from '@/lib/types' import { NextResponse } from 'next/server' export async function POST(request: Request) { try { const session = await auth() if (!session?.user?.email) return new NextResponse(null, { status: 400 }) const body = await request.json() const userByEmail = await redis.get(`user:email:${session.user.email}`) const userData = await redis.get(`user:${userByEmail}`) if (!userData) return new NextResponse(null, { status: 404 }) if (body.name) userData.name = body.name if (body.image) userData.image = body.image await redis.set(`user:${userByEmail}`, userData) return new NextResponse() } catch (e: any) { const message = e.message || e.toString() console.log(message) return new NextResponse(message, { status: 500 }) } }

উপরের কোডে, একটি Edge-কম্প্যাটিবল API রুট তৈরি করা হয়েছে ইউজার ডেটা আপডেট করার জন্য। এটি ইউজারকে অথেন্টিকেট করে, তাদের ইমেইল ব্যবহার করে Redis থেকে ডেটা ফেচ করে, এবং তাদের ইনফরমেশন (যেমন নাম বা ইমেজ) রিকোয়েস্ট বডি অনুযায়ী আপডেট করে। যদি ইউজার না পাওয়া যায় বা এরর হয়, তবে উপযুক্ত স্ট্যাটাস কোড এবং রেসপন্স রিটার্ন করা হয়।

Auth.js-এ Next.js মিডলওয়্যার সেট আপ করুন

আপনার প্রজেক্টের রুট ডিরেক্টরিতে middleware.ts নামে একটি ফাইল তৈরি করুন নিচের কোডসহ:

// File: middleware.ts export { auth as middleware } from '@/lib/auth' export const config = { matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'], }

উপরের কোডে, মিডলওয়্যার তৈরি করা হয়েছে @/lib/auth মডিউল থেকে auth ফাংশন রি-এক্সপোর্ট করে। মিডলওয়্যারটি সব রুটে অথেন্টিকেশন প্রয়োগ করে API রুট, স্ট্যাটিক ফাইল, ইমেজ অ্যাসেট, এবং ফavicon ছাড়া, যেহেতু matcher কনফিগারেশনে নির্দিষ্ট করা হয়েছে। এটি নিশ্চিত করে যে এক্সক্লুডেড রুটগুলো বাদে Auth.js-এ সেট আপ করা অথেন্টিকেশন লজিক দ্বারা প্রোটেক্টেড।

Next.js App Router কম্পোনেন্টে Auth.js ব্যবহার করুন

app ডিরেক্টরিতে NextAuthProvider.tsx নামে একটি ফাইল তৈরি করুন নিচের কোডসহ:

// File: app/NextAuthProvider.tsx 'use client' import { SessionProvider } from 'next-auth/react' type Props = { children?: React.ReactNode } export default function ({ children }: Props) { return {children} }

উপরের কোডে, একটি ক্লায়েন্ট-সাইড রিয়েক্ট কম্পোনেন্ট তৈরি করা হয়েছে অ্যাপ্লিকেশনটিকে NextAuth-এর SessionProvider দিয়ে র‍্যাপ করার জন্য। কম্পোনেন্টটি children প্রপস হিসেবে গ্রহণ করে এবং নিশ্চিত করে যে র‍্যাপ করা কম্পোনেন্টগুলোর NextAuth দ্বারা প্রদত্ত ইউজার সেশন কনটেক্স্টে অ্যাক্সেস থাকে। এই সেটআপটি Next.js-এ অ্যাপ্লিকেশন জুড়ে অথেন্টিকেশন স্টেট ম্যানেজ করার জন্য অপরিহার্য।

app ডিরেক্টরিতে csrf.tsx নামে একটি ফাইল তৈরি করুন নিচের কোডসহ:

// File: app/csrf.tsx 'use client' import { getCsrfToken } from 'next-auth/react' import { useEffect, useState } from 'react' export function CSRFInput() { const [csrfToken, setCsrfToken] = useState() useEffect(() => { getCsrfToken().then((res) => setCsrfToken(res)) }, []) return  }

উপরের কোডে, একটি ক্লায়েন্ট-সাইড রিয়েক্ট কম্পোনেন্ট এক্সপোর্ট করা হয়েছে যা NextAuth-এর getCsrfToken ফাংশন ব্যবহার করে একটি CSRF টোকেন ফেচ করে এবং স্টেট ভেরিয়েবলে স্টোর করে। কম্পোনেন্টটি একটি হিডেন ইনপুট ফিল্ড রেন্ডার করে যেটিতে CSRF টোকেন থাকে, সিকিউর ফর্ম সাবমিশন অনুমোদন করে টোকেনকে একটি হিডেন ভ্যালু হিসেবে অন্তর্ভুক্ত করে। এটি ক্রস-সাইট রিকোয়েস্ট ফোরজারি আক্রমণ থেকে রক্ষা করার জন্য উপযোগী।

app ডিরেক্টরিতে provider.tsx নামে একটি ফাইল তৈরি করুন নিচের কোডসহ:

// File: app/provider.tsx 'use client' import { Button } from '@/components/ui/button' import { Icon } from '@iconify/react' import { signIn } from 'next-auth/react' export default function ({ provider, prefix }: { prefix: string; provider: { name: string; id: string } }) { return (  signIn(provider.id)} key={provider.name} variant="outline" className="flex w-full gap-x-3"> {provider.id === 'google' && }  {prefix} with {provider.name}   ) }

উপরের কোডে, একটি রিয়েক্ট কম্পোনেন্ট এক্সপোর্ট করা হয়েছে বিভিন্ন অথেন্টিকেশন প্রোভাইডারের জন্য কাস্টোমাইজেবল সাইন-ইন বাটন রেন্ডার করার জন্য। এটি provider (যে садржит name এবং id) এবং prefix প্রপস হিসেবে গ্রহণ করে। বাটনটি নির্দিষ্ট প্রোভাইডারের জন্য signIn ফাংশন ট্রিগার করে এবং প্রোভাইডারের id অনুযায়ী ডাইনামিক্যালি একটি আইকন এবং লেবেল ডিসপ্লে করে।

app ডিরেক্টরিতে layout.tsx ফাইল আপডেট করুন নিচের কোডসহ:

// File: app/layout.tsx import './globals.css' import NextAuthProvider from './NextAuthProvider' export default function ({ children, }: Readonly<{ children: React.ReactNode }>) { return (    
{children}
    ) }

উপরের কোডে, Next.js লেয়াউট পুরো পেজকে গ্লোবাল স্টাইল এবং অথেন্টিকেশন কনটেক্স্ট দিয়ে র‍্যাপ করে। এটি globals.css ইম্পোর্ট করে গ্লোবাল স্টাইলিং এর জন্য এবং NextAuthProvider অথেন্টিকেশন স্টেট ম্যানেজ করার জন্য। children প্রপ নেস্টেড পেজ কনটেন্টকে রিপ্রেজেন্ট করে, যা একটি স্টাইলড কন্টেইনারের ভিতরে র‍্যাপড থাকে রেসপন্সিভ প্যাডিং এবং ম্যাক্সিমাম প্রস্থসহ, সব পেজের জন্য একটি কনসিস্টেন্ট লেয়াউট প্রদান করে।

ক্লায়েন্ট-সাইড পেজে ইউজার অথেন্টিকেশন স্টেট লোড করুন

app ডিরেক্টরিতে page.tsx ফাইল আপডেট করুন নিচের কোডসহ:

// File: app/page.tsx 'use client' import { signOut, useSession } from 'next-auth/react' export default function () { const { data, status } = useSession() return ( <> {JSON.stringify({ data, status })}  signOut()}>Sign Out  ) }

উপরের কোডে, একটি ক্লায়েন্ট-সাইড রিয়েক্ট কম্পোনেন্ট এক্সপোর্ট করা হয়েছে যা ইউজারের সেশন ডেটা ডিসপ্লে করে এবং একটি "Sign Out" বাটন প্রদান করে। এটি NextAuth-এর useSession হুক ব্যবহার করে সেশন ডেটা এবং স্ট্যাটাস রিট্রিভ করে, সেগুলো JSON স্ট্রিং হিসেবে ডিসপ্লে করে। signOut ফাংশনটি কল হয় যখন বাটনে ক্লিক করা হয়, যা ইউজারকে লগ আউট করতে দেয়।

একটি ডাইনামিক সাইন-ইন পেজ বানান (Auth.js ব্যবহার করে)

app/signin ডিরেক্টরিতে page.tsx নামে একটি ফাইল তৈরি করুন নিচের কোডসহ:

// File: app/signin/page.tsx export const runtime = 'edge' import { CSRFInput } from '@/app/csrf' import Provider from '@/app/provider' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { auth } from '@/lib/auth' import providers from '@/lib/providers' import { unstable_noStore } from 'next/cache' import Link from 'next/link' import { redirect } from 'next/navigation' export default async function () { unstable_noStore() const session = await auth() if (session) redirect('/') return ( 
 
 
 
Sign In
 
Enter your email below to sign in to your account
 
 {providers .filter((provider) => (typeof provider === 'function' ? provider({}).id : provider.id) !== 'credentials') .map((provider) => (  ))} 
OR
 
 
 Email  
 
 Password   
  Sign In  
 
 Don't have an account?{' '}  Sign up  
 
 
 ) }

উপরের কোডে, একটি সাইন-ইন পেজ তৈরি করা হয়েছে। এটি চেক করে ইউজার সেশন ইতিমধ্যে এক্সিস্ট করে কিনা; যদি হয়, তবে হোমপেজে রিডাইরেক্ট করে। পেজটি একটি সাইন-ইন ফর্ম দেখায় যেখানে ইউজাররা তাদের ইমেইল এবং পাসওয়ার্ড দিয়ে লগ ইন করতে পারেন, পлюস বিভিন্ন প্রোভাইডার দিয়ে সাইন-ইন করার অপশন। এতে CSRF টোকেনও আছে সিকিউরিটির জন্য এবং নতুন ইউজারদের জন্য সাইন-আপ পেজের লিংক।

একটি ডাইনামিক সাইন-আপ পেজ বানান (Auth.js ব্যবহার করে)

app/signup ডিরেক্টরিতে page.tsx নামে একটি ফাইল তৈরি করুন নিচের কোডসহ:

// File: app/signup/page.tsx export const runtime = 'edge' import { CSRFInput } from '@/app/csrf' import Provider from '@/app/provider' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { auth } from '@/lib/auth' import providers from '@/lib/providers' import { unstable_noStore } from 'next/cache' import Link from 'next/link' import { redirect } from 'next/navigation' export default async function () { unstable_noStore() const session = await auth() if (session) redirect('/') return ( 
 
 
 
Sign Up
 
Enter your email below to sign up with an account
 
 {providers .filter((provider) => (typeof provider === 'function' ? provider({}).id : provider.id) !== 'credentials') .map((provider) => (  ))} 
OR
 
 
 Email  
 
 
 Password 
   
  Sign Up  
 
 Don't have an account?{' '}  Sign In  
 
 
 ) }

উপরের কোডে, একটি সাইন-আপ পেজ তৈরি করা হয়েছে। এটি চেক করে ইউজার সেশন ইতিমধ্যে এক্সিস্ট করে কিনা; যদি হয়, তবে হোমপেজে রিডাইরেক্ট করে। পেজটি একটি সাইন-আপ ফর্ম দেখায় যেখানে ইউজাররা তাদের ইমেইল এবং পাসওয়ার্ড দিয়ে রেজিস্টার করতে পারেন, পлюস বিভিন্ন প্রোভাইডার দিয়ে সাইন-ইন করার অপশন। এতে CSRF টোকেনও আছে সিকিউরিটির জন্য এবং এক্সিস্টিং ইউজারদের জন্য সাইন-ইন পেজের লিংক।

এখানেও অনেক কিছু শিখলাম! এখন আপনি সম্পূর্ণ হয়ে গেলেন ✨

রেফারেন্স

আরো বিস্তারিত জানতে, এই ব্লগে উদ্ধৃত রেফারেন্সগুলো এক্সপ্লোর করুন।

• GitHub Repository
• Auth.js - Credentials Authentication
• Auth.js - Upstash Redis Adapter
• Next.js - Cookies

উপসংহার

এই টিউটোরিয়ালে, আপনি শিখেছেন কীভাবে একটি Next.js অ্যাপ্লিকেশনে Auth.js এবং Upstash Redis ব্যবহার করে ইউজার অথেন্টিকেশন ইমপ্লিমেন্ট করতে হয়। আপনি এনভায়রনমেন্ট ভেরিয়েবল সেটআপ, একটি Redis ক্লায়েন্ট তৈরি, এবং একটি কাস্টম অথেন্টিকেশন প্রোভাইডার ইমপ্লিমেন্টেশন শিখেছেন। ডিটেকশন, আপনি শিখেছেন কীভাবে Next.js-এ API রুট সেট আপ করতে হয় ইউজার সাইন-ইন এবং সাইন-আপ প্রসেস হ্যান্ডেল করার জন্য, এবং সেশন ম্যানেজমেন্ট। এই ধাপগুলো অনুসরণ করে, আপনি কার্যকরভাবে ইউজার অথেন্টিকেশন এবং ডেটা স্টোরেজ ম্যানেজ করতে পারবেন আপনার Next.js অ্যাপ্লিকেশনগুলোতে Upstash Redis দিয়ে।