0Pricing
React Academy · Ders

Oturum Yönetimi ve useSession Hook'u

Sunucu ve istemci bileşenlerinde oturum verilerine erişin ve sayfaları kimlik doğrulama durumuna göre koruyun.

Oturum Yönetimi ve useSession Hook'u, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Auth.js Oturum Türleri

Auth.js iki oturum stratejisini destekler: JWT (varsayılan, çerezde durum bilgisi tutmayan belirteç) ve veritabanı (veritabanındaki oturum kaydı; sunucu tarafında geçersiz kılınabilir).

İstemci Bileşenlerinde useSession

useSession(), geçerli oturumu okuyan bir İstemci Bileşeni kancasıdır. data (oturum), status ('loading' | 'authenticated' | 'unauthenticated') ve bir update işlevi döndürür.

'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 Ayarları

useSession oturum bağlamına erişebilsin diye uygulamanızı (veya bir İstemci Bileşeni alt ağacını) SessionProvider ile sarın.

// 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>;
}

Sunucu Bileşenlerinde auth()

Sunucu Bileşenleri için auth() işlevini doğrudan kullanın; kancaya veya sağlayıcıya gerek yoktur. Oturumu sunucu tarafındaki çerezden okur.

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

İstemci Rotalarını Koruma

Kimliği doğrulanmamış kullanıcıları otomatik olarak giriş sayfasına yönlendirmek için useSession işlevini required: true seçeneğiyle kullanın.

'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>;
}

Oturumu Güncelleme

Oturumu kapatıp yeniden açmadan yenilemek için useSession tarafından döndürülen update() işlevini, örneğin profil güncellemesinden sonra, çağırın.

const { data: session, update } = useSession();

async function handleNameChange(newName: string) {
  await updateUserName(newName); // API call
  await update({ user: { name: newName } }); // refresh session
}

JWT Oturum Geri Çağrıları

Giriş sırasında JWT belirtecine özel veriler eklemek için jwt geri çağrısını, bu verileri oturum nesnesinde kullanıma sunmak için de session geri çağrısını kullanın.

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

Oturum Süresinin Dolması

Auth.js config dosyasında oturumun azami yaşını yapılandırın. JWT oturumları etkin olduklarında her istekle otomatik olarak yenilenir.

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

Veritabanı Oturumlarını Geçersiz Kılma

Veritabanı oturumları sunucu tarafında iptal edilebilir; bu, zorunlu çıkış yaptırmak için kullanışlıdır. Oturumu hemen geçersiz kılmak için oturum kaydını veritabanından silin.

// 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');
}

İstemci Bileşenlerinde Role Dayalı Erişim

Oturum rolünü useSession ile okuyun ve kullanıcı arayüzünü buna göre koşullu olarak oluşturun.

const { data: session } = useSession();
const isAdmin = session?.user?.role === 'admin';

return (
  <>
    {isAdmin && <AdminPanel />}
    <UserContent />
  </>
);

Hızlı Kontrol

useSession() işlevinin İstemci Bileşenlerinde çalışması için uygulamanızı hangi sağlayıcı sarmalamalıdır?

Özet

Sunucu Bileşenlerinde oturuma erişmek için auth(), SessionProvider ile sarılmış İstemci Bileşenlerinde ise useSession() kullanın. JWT ve oturum geri çağrılarıyla özel veriler ekleyin, oturumları istemci tarafında update() ile güncelleyin ve oturumun sona ermesi için maxAge değerini yapılandırın.

Sıkça Sorulan Sorular

“Oturum Yönetimi ve useSession Hook'u” dersi ücretsiz mi?

Evet — “Oturum Yönetimi ve useSession Hook'u” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“Oturum Yönetimi ve useSession Hook'u” dersinde ne öğreneceğim?

Sunucu ve istemci bileşenlerinde oturum verilerine erişin ve sayfaları kimlik doğrulama durumuna göre koruyun. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Oturum Yönetimi ve useSession Hook'u” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Next.js App Router'da Auth.js Kurulumu
  2. Oturum Yönetimi ve useSession Hook'u
  3. Kimlik Bilgileri Sağlayıcısı ve Özel Giriş
  4. Middleware Tabanlı Rota Koruması
← React Academy Sayfasına Dön