Next.js में Auth.js और अपस्टैश रेडिस का उपयोग करके सुरक्षित यूजर ऑथेंटिकेशन

इस ट्यूटोरियल में, आप Auth.js और अपस्टैश रेडिस का उपयोग करके Next.js एप्लिकेशन में यूजर ऑथेंटिकेशन लागू करना सीखेंगे। आप सीखेंगे कि आवश्यक एनवायरनमेंट कैसे सेट अप करें, सुरक्षित यूजर साइन-इन और साइन-अप के लिए कस्टम ऑथेंटिकेशन प्रोवाइडर कैसे बनाएं, और सत्र प्रबंधन के लिए अपस्टैश रेडिस को डेटाबेस के रूप में कैसे इंटीग्रेट करें।

पूर्वापेक्षाएँ

आपको निम्नलिखित की आवश्यकता होगी:

Node.js 18 या बाद का संस्करण
एक अपस्टैश अकाउंट

टेक स्टैक

टेक्नोलॉजी	विवरण
Next.js	वेब के लिए रिएक्ट फ्रेमवर्क।
Upstash	सर्वरलेस डेटाबेस प्लेटफॉर्म। आप सत्र और यूजर जानकारी प्रबंधित करने के लिए अपस्टैश रेडिस का उपयोग करेंगे।

अपस्टैश रेडिस इंस्टेंस सेट अप करें

अपने अपस्टैश डैशबोर्ड में, Redis टैब पर जाएं और एक डेटाबेस बनाएं।

Next.js में Auth.js और अपस्टैश रेडिस का उपयोग करके सुरक्षित यूजर ऑथेंटिकेशन

नीचे स्क्रॉल करें जब तक आपको REST API सेक्शन न मिल जाए, और .env बटन चुनें। सामग्री कॉपी करें और इसे कहीं सुरक्षित रखें।

Next.js में Auth.js और अपस्टैश रेडिस का उपयोग करके सुरक्षित यूजर ऑथेंटिकेशन

नया Next.js एप्लिकेशन बनाएं

आइए एक नया Next.js प्रोजेक्ट बनाकर शुरू करें। अपना टर्मिनल खोलें और निम्न कमांड चलाएं:

npx create-next-app@latest my-app

जब संकेत दिया जाए, तो चुनें:

TypeScript उपयोग करने के लिए Yes।
ESLint उपयोग करने के लिए No।
Tailwind CSS उपयोग करने के लिए Yes।
src/ डायरेक्टरी उपयोग करने के लिए No।
App Router उपयोग करने के लिए Yes।
Turbopack उपयोग करने के लिए No।
डिफॉल्ट इम्पोर्ट एलियास (@/*) कस्टमाइज़ करने के लिए 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: यूनिक, सुरक्षित IDs जनरेट करने के लिए लाइब्रेरी।
next-auth: Next.js के लिए बिल्ट ऑथेंटिकेशन सॉल्यूशन।
@auth/core: Auth.js में ऑथेंटिकेशन हैंडल करने के लिए कोर पैकेज।
@upstash/redis: HTTP अनुरोधों के माध्यम से अपस्टैश रेडिस के साथ इंटरैक्ट करने के लिए SDK।
@auth/upstash-redis-adapter: Auth.js को अपस्टैश रेडिस के साथ इंटीग्रेट करने के लिए एडाप्टर।

अब, अपने प्रोजेक्ट के रूट पर एक .env फ़ाइल बनाएं। आप AUTH_SECRET, UPSTASH_REDIS_REST_URL और UPSTASH_REDIS_REST_TOKEN वैल्यूज का उपयोग करने जा रहे हैं।

.env फ़ाइल में निम्न होना चाहिए:

# .env 
# Auth.js एनवायरनमेंट वेरिएबल 
AUTH_SECRET="..." 
# अपस्टैश रेडिस एनवायरनमेंट वेरिएबल्स 
UPSTASH_REDIS_REST_URL="https://...upstash.io" 
UPSTASH_REDIS_REST_TOKEN="..."

अपस्टैश रेडिस क्लाइंट इंस्टेंटिएट करें

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, 
})

ऊपर दिए कोड में, एक एज-कम्पैटिबल रेडिस क्लाइंट इंस्टेंस एक्सपोर्ट किया गया है जिसका उपयोग पूरे एप्लिकेशन में किया जा सकता है।

यूजर टाइप्स और क्रेडेंशियल्स हेल्पर्स सेट अप करें

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 
}

ऊपर दिए कोड में, सुरक्षित टोकन और हैश्ड पासवर्ड जनरेट करने और प्रबंधित करने के लिए एज-कम्पैटिबल यूटिलिटी फंक्शन्स परिभाषित हैं:

generateRandomToken: 20-बाइट रैंडम ऐरे जनरेट करके और इसे हेक्साडेसिमल स्ट्रिंग में बदलकर क्रिप्टोग्राफिकली सिक्योर रैंडम टोकन बनाता है।
generateRandomString: एक इनपुट स्ट्रिंग स्वीकार करता है, इसे बाइट्स में एन्कोड करता है, SHA-256 का उपयोग करके हैश करता है, और हैश को हेक्साडेसिमल स्ट्रिंग के रूप में लौटाता है। इनपुट वैल्यूज से सुसंगत, यूनिक स्ट्रिंग्स जनरेट करने के लिए उपयोगी।
hashPassword: SHA-256 का उपयोग करके प्लेनटेक्स्ट पासवर्ड को हैश करता है और परिणामी हैश को हेक्साडेसिमल स्ट्रिंग में बदलता है। इसका उपयोग पासवर्ड को सुरक्षित रूप से स्टोर करने के लिए किया जाता है।
comparePassword: इनपुट को हैश करके और जांच करके कि यह स्टोर्ड हैश से मेल खाता है या नहीं, एक प्लेनटेक्स्ट पासवर्ड की तुलना हैश्ड पासवर्ड से करता है।

Auth.js के साथ अपस्टैश रेडिस एडाप्टर का उपयोग करें

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, और providers मॉड्यूल में परिभाषित ऑथेंटिकेशन प्रोवाइडर्स की एक सरणी। यह सेटअप अपस्टैश रेडिस को बैकएंड के रूप में ऑथेंटिकेशन और सत्र प्रबंधन के साथ सहज इंटीग्रेशन को सक्षम बनाता है।

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 प्रोवाइडर साइन-इन और साइन-अप दोनों लॉजिक को संभालता है: यह जांचता है कि यूजर रेडिस में मौजूद है या नहीं और या तो उनके पासवर्ड को मान्य करता है या एक नया यूजर बनाता है। यदि साइन-इन कर रहे हैं, तो यह प्रदान किए गए पासवर्ड (रैंडम स्ट्रिंग का उपयोग करके हैश्ड) की तुलना स्टोर्ड पासवर्ड से करता है; यदि साइन-अप कर रहे हैं, तो यह अपस्टैश रेडिस में एक नया यूजर एंट्री बनाता है। कोड यूजर डेटा स्टोरेज के लिए अपस्टैश रेडिस का उपयोग करता है और सुनिश्चित करता है कि प्रक्रिया 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() 
}

ऊपर दिए कोड में, यूजर के सत्र को रीफ्रेश करने के लिए एक एज-कम्पैटिबल API रूट बनाया जा रहा है। यह यूजर सत्र और रेडिस से संबंधित डेटा प्राप्त करता है, यूजर के ईमेल को वेरिफाई करता है, और सत्र कुकी को अपडेट करता है। यदि यूजर डेटा अमान्य या गायब है, तो सत्र कुकी क्लियर हो जाती है; अन्यथा, एक नया साइन्ड टोकन जनरेट होता है और कुकी में स्टोर होता है।

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 }) 
  } 
}

ऊपर दिए कोड में, यूजर डेटा अपडेट करने के लिए एक एज-कम्पैटिबल API रूट बनाया जा रहा है। यह यूजर को ऑथेंटिकेट करता है, उनके ईमेल का उपयोग करके रेडिस से उनका डेटा प्राप्त करता है, और अनुरोध बॉडी के आधार पर उनकी जानकारी (जैसे नाम या इमेज) को अपडेट करता है। यदि यूजर नहीं मिलता या कोई त्रुटि होती है, तो उचित स्टेटस कोड और प्रतिक्रियाएं लौटाई जाती हैं।

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 फंक्शन को री-एक्सपोर्ट करके मिडलवेयर बनाया गया है। मिडलवेयर matcher कॉन्फिगरेशन द्वारा निर्दिष्ट अनुसार API रूट्स, स्टेटिक फ़ाइलों, इमेज एसेट्स, और फेविकॉन को छोड़कर सभी रूट्स पर ऑथेंटिकेशन लागू करता है। यह सुनिश्चित करता है कि बहिष्कृत रूट्स के अलावा सभी रूट्स 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 ( 
     
  ) 
}

ऊपर दिए कोड में, विभिन्न ऑथेंटिकेशन प्रोवाइडर्स के लिए कस्टमाइज़ेबल साइन-इन बटन रेंडर करने के लिए एक रिएक्ट कंपोनेंट एक्सपोर्ट किया गया है। यह 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 })} 
       
     
  ) 
}

ऊपर दिए कोड में, एक क्लाइंट-साइड रिएक्ट कंपोनेंट एक्सपोर्ट किया गया है जो यूजर के सत्र डेटा को प्रदर्शित करता है और "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 
          अपना ईमेल दर्ज करें अपने अकाउंट में साइन इन करने के लिए 
         
        {providers 
          .filter((provider) => (typeof provider === 'function' ? provider({}).id : provider.id) !== 'credentials') 
          .map((provider) => ( 
             
          ))} 
        OR 
         
           
            Email 
             
           
           
            Password 
             
             
           
           
         
         
          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 
          अपना ईमेल दर्ज करें अकाउंट के साथ साइन अप करने के लिए 
         
        {providers 
          .filter((provider) => (typeof provider === 'function' ? provider({}).id : provider.id) !== 'credentials') 
          .map((provider) => ( 
             
          ))} 
        OR 
         
           
            Email 
             
           
           
             
              Password 
             
             
             
           
           
         
         
          Don't have an account?{' '} 
           
            Sign In 
           
         
       
     
  ) 
}

ऊपर दिए कोड में, एक साइन-अप पेज बनाया जा रहा है। यह जांचता है कि क्या यूजर सत्र पहले से मौजूद है; यदि हां, तो यह होमपेज पर रीडायरेक्ट करता है। पेज एक साइन-अप फॉर्म प्रदर्शित करता है जहां यूजर अपना ईमेल और पासवर्ड दर्ज कर सकते हैं, साथ ही विभिन्न प्रोवाइडर्स का उपयोग करके साइन इन करने के विकल्प भी। इसमें सुरक्षा के लिए CSRF टोकन और मौजूदा यूजर्स के लिए साइन-इन पेज का लिंक भी शामिल है।

यह बहुत कुछ सीखने वाला था! अब आपका काम हो गया ✨

संदर्भ

अधिक विस्तृत जानकारी के लिए, इस ब्लॉग में उद्धृत संदर्भों का पता लगाएं।

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

निष्कर्ष

इस ट्यूटोरियल में, आपने सीखा कि Auth.js और अपस्टैश रेडिस का उपयोग करके Next.js एप्लिकेशन में यूजर ऑथेंटिकेशन कैसे लागू करें। आपने एनवायरनमेंट वेरिएबल्स के सेटअप, रेडिस क्लाइंट के निर्माण, और कस्टम ऑथेंटिकेशन प्रोवाइडर के कार्यान्वयन को सीखा। इसके अतिरिक्त, आपने Next.js में API रूट्स सेट अप करना सीखा जो यूजर साइन-इन और साइन-अप प्रक्रियाओं को संभालते हैं, साथ ही सत्र प्रबंधन भी। इन चरणों का पालन करके, आप अपस्टैश रेडिस के साथ अपने Next.js एप्लिकेशन में यूजर ऑथेंटिकेशन और डेटा स्टोरेज को प्रभावी ढंग से प्रबंधित कर सकते हैं।