0Pricing
React Academy · Ders

Kimlik Bilgileri Sağlayıcısı ve Özel Giriş

Kimlik bilgileri sağlayıcısı ve özel giriş formuyla kullanıcıları bir veritabanına karşı kimlik doğrulamasından geçirin.

Kimlik Bilgileri Sağlayıcısı ve Özel Giriş, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 3. 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.

Credentials Sağlayıcısı Ne Zaman Kullanılmalı

OAuth sağlayıcısı yerine kendi veritabanınızda (e-posta ve parola) kimlik doğrulaması yaparken Credentials sağlayıcısını kullanın. Bu yöntem, parola karmalarının ve güvenliğin dikkatle ele alınmasını gerektirir.

Credentials Sağlayıcısını Tanımlama

Sağlayıcılar dizisine Credentials ekleyin. authorize işlevi gönderilen kimlik bilgilerini alır ve bir kullanıcı nesnesi veya null döndürür.

import Credentials from 'next-auth/providers/credentials';
import bcrypt from 'bcryptjs';

export const { handlers, auth } = NextAuth({
  providers: [
    Credentials({
      name: 'Credentials',
      credentials: {
        email: { label: 'Email', type: 'email' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials) {
        const user = await db.user.findUnique({ where: { email: credentials.email as string } });
        if (!user) return null;
        const valid = await bcrypt.compare(credentials.password as string, user.passwordHash);
        if (!valid) return null;
        return { id: user.id, name: user.name, email: user.email };
      },
    }),
  ],
});

Özel Giriş Formu

next-auth/react içinden signIn('credentials', { email, password }) çağıran bir İstemci Bileşeni olarak giriş formu oluşturun.

'use client';
import { signIn } from 'next-auth/react';

export function LoginForm() {
  const [error, setError] = useState('');

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = new FormData(e.currentTarget);
    const result = await signIn('credentials', {
      email: form.get('email'),
      password: form.get('password'),
      redirect: false, // handle redirect manually
    });
    if (result?.error) setError('Invalid email or password');
    else router.push('/dashboard');
  }

  return (
    <form onSubmit={handleSubmit}>
      {error && <p className="error">{error}</p>}
      <input name="email" type="email" required />
      <input name="password" type="password" required />
      <button type="submit">Sign in</button>
    </form>
  );
}

Hata Yönetimi için redirect: false

Sonuç nesnesini almak ve hataları hata sayfasına yönlendirilmek yerine bileşende işlemek için signIn() işlevine redirect: false aktarın.

const result = await signIn('credentials', { email, password, redirect: false });
if (result?.error) {
  // result.error is 'CredentialsSignin' for auth failures
  setError('Invalid email or password');
}

authorize içinde Zod Doğrulaması

Veritabanına erişmeden önce authorize işlevinin içinde kimlik bilgilerini Zod ile doğrulayın.

import { z } from 'zod';

const schema = z.object({ email: z.string().email(), password: z.string().min(8) });

async authorize(credentials) {
  const parsed = schema.safeParse(credentials);
  if (!parsed.success) return null;
  const { email, password } = parsed.data;
  // ... db lookup
}

Kimlik Bilgileri için Oturum Stratejisi

Kimlik bilgileri sağlayıcısı, JWT oturum stratejisi gerektirir (oturumlar için veritabanı bağdaştırıcısı gerekmez). session: { strategy: 'jwt' } seçeneğini açıkça ayarlayın.

export const { handlers, auth } = NextAuth({
  session: { strategy: 'jwt' },
  providers: [Credentials({ ... })],
});

Oturuma Özel Alanlar Ekleme

Ek kullanıcı verilerini JWT ve oturum geri çağırma işlevleri üzerinden geçirerek useSession() içinde erişilebilir hâle getirin.

callbacks: {
  async jwt({ token, user }) {
    if (user) { token.id = user.id; token.role = user.role; }
    return token;
  },
  async session({ session, token }) {
    session.user.id = token.id as string;
    session.user.role = token.role as string;
    return session;
  },
},

Parola Özeti Oluşturma

Parolaları depolamadan önce her zaman bcrypt ile özetleyin. Düz metin parolaları asla depolamayın.

import bcrypt from 'bcryptjs';

// On registration:
const passwordHash = await bcrypt.hash(password, 12);
await db.user.create({ data: { email, passwordHash } });

// On login (in authorize):
const valid = await bcrypt.compare(submittedPassword, user.passwordHash);

Oturum Açma Denemelerini Sınırlandırma

Kimlik bilgileri uç noktasını, ara katman yazılımı veya bellek içi bir depo kullanarak oturum açma denemelerini hız sınırlamasına tabi tutup kaba kuvvet saldırılarına karşı koruyun.

// middleware.ts or in a rate-limiting library
import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';

const ratelimit = new Ratelimit({ redis: Redis.fromEnv(), limiter: Ratelimit.slidingWindow(10, '10 s') });

// Check in authorize before DB query:
const { success } = await ratelimit.limit(credentials.email as string);
if (!success) return null;

Kayıt Akışı

Kayıt işlemi Auth.js'den ayrıdır — bir Server Action veya API rotası üzerinden kullanıcıyı veritabanınızda (özetlenmiş parolayla) oluşturun, ardından signIn('credentials', ...) ile oturum açmasını sağlayın.

Kısa Kontrol

Özel bir oturum açma formunda signIn() çağrısı yaparken neden redirect: false göndermelisiniz?

Özet

Kimlik bilgileri sağlayıcısı, gönderilen form verileriyle authorize işlevinizi çağırır. Zod ile doğrulama yapın, özetlenmiş parolaları bcrypt ile karşılaştırın ve bir kullanıcı nesnesi veya null döndürün. Özel hata işleme için formda redirect: false kullanın ve kimlik bilgileriyle her zaman JWT stratejisini kullanın.

Sıkça Sorulan Sorular

“Kimlik Bilgileri Sağlayıcısı ve Özel Giriş” dersi ücretsiz mi?

Evet — “Kimlik Bilgileri Sağlayıcısı ve Özel Giriş” 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.

“Kimlik Bilgileri Sağlayıcısı ve Özel Giriş” dersinde ne öğreneceğim?

Kimlik bilgileri sağlayıcısı ve özel giriş formuyla kullanıcıları bir veritabanına karşı kimlik doğrulamasından geçirin. 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 3. dersidir.

“Kimlik Bilgileri Sağlayıcısı ve Özel Giriş” 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