सेशन प्रबंधन और useSession हुक
सर्वर और क्लाइंट कंपोनेंट में सेशन डेटा प्राप्त करें और प्रमाणीकरण स्थिति के आधार पर पेज सुरक्षित करें।
सेशन प्रबंधन और useSession हुक, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
Auth.js में Session प्रकार
Auth.js दो session रणनीतियों का समर्थन करता है: JWT (डिफ़ॉल्ट, कुकी में स्टेटलेस टोकन) और database (डेटाबेस में session रिकॉर्ड, जिसे सर्वर पर अमान्य किया जा सकता है)।
Client Components में useSession
useSession() एक Client Component हुक है जो वर्तमान session पढ़ता है। यह data (session), status ('loading' | 'authenticated' | 'unauthenticated') और एक update फ़ंक्शन लौटाता है।
'use client';
import { useSession } from 'next-auth/react';
export function UserAvatar() {
const { data: session, status } = useSession();
if (status === 'loading') return <Spinner />;
if (status === 'unauthenticated') return <Link href="/login">Sign in</Link>;
return <img src={session.user?.image ?? ''} alt={session.user?.name ?? ''} />;
}SessionProvider सेटअप
अपने ऐप (या Client Component के किसी उपवृक्ष) को SessionProvider में लपेटें, ताकि useSession session संदर्भ तक पहुँच सके।
// app/providers.tsx
'use client';
import { SessionProvider } from 'next-auth/react';
export function Providers({ children }: { children: React.ReactNode }) {
return <SessionProvider>{children}</SessionProvider>;
}
// app/layout.tsx
import { Providers } from './providers';
export default function RootLayout({ children }) {
return <html><body><Providers>{children}</Providers></body></html>;
}Server Components में auth()
Server Components के लिए सीधे auth() का उपयोग करें—न हुक चाहिए, न प्रदाता। यह session को सर्वर-पक्ष की कुकी से पढ़ता है।
import { auth } from '@/auth';
export default async function Header() {
const session = await auth();
return (
<nav>
{session ? (
<span>Hello, {session.user?.name}</span>
) : (
<Link href="/login">Sign in</Link>
)}
</nav>
);
}Client Routes को सुरक्षित करना
प्रमाणीकरण न किए गए उपयोगकर्ताओं को साइन-इन पेज पर अपने-आप रीडायरेक्ट करने के लिए useSession में required: true विकल्प का उपयोग करें।
'use client';
import { useSession } from 'next-auth/react';
export default function ProtectedPage() {
const { data: session } = useSession({ required: true });
// session is never null here — unauthenticated users are redirected
return <div>Welcome, {session?.user?.name}</div>;
}Session अपडेट करना
साइन-आउट करके फिर से साइन-इन किए बिना session को रीफ़्रेश करने के लिए useSession से लौटे update() फ़ंक्शन को कॉल करें, जैसे प्रोफ़ाइल अपडेट के बाद।
const { data: session, update } = useSession();
async function handleNameChange(newName: string) {
await updateUserName(newName); // API call
await update({ user: { name: newName } }); // refresh session
}JWT Session कॉलबैक
साइन-इन के समय JWT टोकन में कस्टम डेटा जोड़ने के लिए jwt कॉलबैक का और उसे session ऑब्जेक्ट में उपलब्ध कराने के लिए session कॉलबैक का उपयोग करें।
callbacks: {
async jwt({ token, user }) {
if (user) token.role = user.role; // add on first sign-in
return token;
},
async session({ session, token }) {
session.user.role = token.role as string;
return session;
},
},Session की समय-सीमा
Auth.js config में session की अधिकतम आयु कॉन्फ़िगर करें। सक्रिय होने पर JWT session हर अनुरोध के साथ अपने-आप रीफ़्रेश होते हैं।
export const { handlers, auth } = NextAuth({
session: {
strategy: 'jwt',
maxAge: 30 * 24 * 60 * 60, // 30 days
updateAge: 24 * 60 * 60, // refresh if older than 1 day
},
});डेटाबेस Session अमान्य करना
डेटाबेस session को सर्वर पर रद्द किया जा सकता है, जो ज़बरदस्ती लॉगआउट कराने में उपयोगी है। उसे तुरंत अमान्य करने के लिए डेटाबेस से session रिकॉर्ड हटा दें।
// Server Action to log out all devices:
async function logOutAllDevices() {
'use server';
const session = await auth();
if (session) await db.session.deleteMany({ where: { userId: session.user.id } });
redirect('/login');
}Client Components में भूमिका-आधारित पहुँच
useSession से session की भूमिका पढ़ें और उसके आधार पर उपयोगकर्ता इंटरफ़ेस को सशर्त रूप से रेंडर करें।
const { data: session } = useSession();
const isAdmin = session?.user?.role === 'admin';
return (
<>
{isAdmin && <AdminPanel />}
<UserContent />
</>
);त्वरित जाँच
Client Components में useSession() के काम करने के लिए आपके ऐप को कौन-सा प्रदाता लपेटना आवश्यक है?
पुनरावलोकन
Server Components में session तक पहुँचने के लिए auth() और SessionProvider से लिपटे Client Components में useSession() का उपयोग करें। JWT/session कॉलबैक से कस्टम डेटा जोड़ें, client-side session को update() से अपडेट करें और session की समय-सीमा के लिए maxAge कॉन्फ़िगर करें।
एआई शिक्षक के साथ React सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 88
- पाठ
- 324
अक्सर पूछे जाने वाले प्रश्न
क्या “सेशन प्रबंधन और useSession हुक” पाठ निःशुल्क है?
हाँ—“सेशन प्रबंधन और useSession हुक” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“सेशन प्रबंधन और useSession हुक” में मैं क्या सीखूँगा?
सर्वर और क्लाइंट कंपोनेंट में सेशन डेटा प्राप्त करें और प्रमाणीकरण स्थिति के आधार पर पेज सुरक्षित करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“सेशन प्रबंधन और useSession हुक” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Next.js App Router में Auth.js सेट अप करना
- सेशन प्रबंधन और useSession हुक
- क्रेडेंशियल प्रदाता और कस्टम लॉगिन
- मिडलवेयर-आधारित रूट सुरक्षा