Next.js ile NextAuth.js ve MongoDB Kullanarak Kimlik Doğrulama

Web uygulamaları geliştirirken kimlik doğrulama, en kritik işlemlerden biridir. Çoğu zaman kullanıcıları sisteme sosyal medya sağlayıcılarıyla giriş yapmaya yönlendirmek mümkün olsa da, bazen sadece kullanıcı adı (ya da e-posta) ve şifre ile geleneksel bir kimlik doğrulama sistemi kurmak isteyebiliriz. Bu yazımızda, Next.js, NextAuth.js ve MongoDB kullanarak kullanıcı adı ve şifre doğrulama sistemini adım adım nasıl kurabileceğimizi detaylıca inceleyeceğiz.

NextAuth.js Nedir?

NextAuth.js, Next.js projelerinde oturum yönetimi ve kimlik doğrulama süreçlerini kolaylaştıran bir kütüphanedir. Standart OAuth sağlayıcılarının yanı sıra, kullanıcı adı ve şifre gibi klasik kimlik doğrulama yöntemlerini de destekler. NextAuth.js, Next.js ile doğal bir entegrasyon sunarak kimlik doğrulama işlemlerini basitleştirir.

Bu projede, kullanıcı verilerini MongoDB veritabanında saklayarak geleneksel bir kullanıcı adı ve şifre doğrulaması gerçekleştireceğiz. Ayrıca, şifreleri güvenli bir şekilde saklamak için bcrypt.js kullanacağız.

1. Next.js Projesi Oluşturma ve Gerekli Paketlerin Kurulumu

İlk olarak bir Next.js projesi oluşturmanız ve NextAuth.js, MongoDB ile bağlantı kurmak için gerekli olan kütüphaneleri yüklemeniz gerekecek.Aşağıdaki adımları izleyerek projeyi başlatıyoruz.

npx create-next-app next-auth-custom-login
cd next-auth-custom-login
npm install next-auth mongoose bcryptjs

Bu komutlar ile şu kütüphaneleri kurmuş olduk:

• next-auth: Kimlik doğrulama işlemlerini yönetmek için.
• mongoose: MongoDB ile bağlantı kurmak ve veritabanı işlemlerini yapmak için.
• bcryptjs: Şifreleri güvenli bir şekilde hash’lemek ve doğrulamak için.

2. MongoDB ile Bağlantı Kurma

MongoDB ile bağlantı kurmak için önce bir bağlantı dosyası oluşturmamız gerekiyor. Bu dosya, MongoDB’ye bağlanmamızı sağlayacak. lib/mongodb.js dosyasını oluşturun ve aşağıdaki kodu ekleyin:

import mongoose from 'mongoose';

const MONGODB_URI = process.env.MONGODB_URI;

if (!MONGODB_URI) {
  throw new Error('MONGODB_URI çevre değişkeni tanımlanmadı.');
}

let cached = global.mongoose;

if (!cached) {
  cached = global.mongoose = { conn: null, promise: null };
}

export async function connectToDatabase() {
  if (cached.conn) {
    return cached.conn;
  }

  if (!cached.promise) {
    cached.promise = mongoose.connect(MONGODB_URI, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    }).then((mongoose) => {
      return mongoose;
    });
  }

  cached.conn = await cached.promise;
  return cached.conn;
}

Bu kod, MongoDB’ye olan bağlantıyı yönetmek için kullanılacak. MongoDB bağlantısını kurabilmek için .env.local dosyasına MongoDB URI’ınızı eklemeniz gerekiyor. Örnek bir bağlantı şu şekilde olabilir:

MONGODB_URI=mongodb+srv://<kullanıcı-adı>:<şifre>@cluster0.mongodb.net/mydatabase?retryWrites=true&w=majority

3. Kullanıcı Modeli Oluşturma

MongoDB’de kullanıcı bilgilerini saklamak için bir kullanıcı şeması oluşturmamız gerekiyor. Şema, kullanıcının adını, e-postasını ve şifresini saklayacak. models/User.js adında bir dosya oluşturmamız gerekmektedir.

import mongoose from 'mongoose';

const UserSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
});

const User = mongoose.models.User || mongoose.model('User', UserSchema);
export default User;

Bu kullanıcı modeli, MongoDB’ye kullanıcı verilerini kaydetmek ve daha sonra bu verilere erişmek için kullanılacak.

4. NextAuth.js Yapılandırması

Şimdi NextAuth.js’i kullanıcı adı ve şifre ile kimlik doğrulama yapacak şekilde yapılandıralım. Bunun için, /pages/api/auth/[…nextauth].js adında bir dosya oluşturup aşağıadaki kodu ekliyoruz.

import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';
import { connectToDatabase } from '../../../lib/mongodb';
import User from '../../../models/User';
import bcrypt from 'bcryptjs';

export default NextAuth({
  session: {
    strategy: 'jwt',
  },
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        email: { label: "Email", type: "email", placeholder: "email@example.com" },
        password: { label: "Password", type: "password" }
      },
      async authorize(credentials) {
        await connectToDatabase();

        // Kullanıcının var olup olmadığını kontrol et
        const user = await User.findOne({ email: credentials.email });
        if (!user) {
          throw new Error('Kullanıcı bulunamadı.');
        }

        // Şifreyi doğrula
        const isValid = await bcrypt.compare(credentials.password, user.password);
        if (!isValid) {
          throw new Error('Geçersiz şifre.');
        }

        // Kullanıcı doğruysa, geri döndür
        return { name: user.name, email: user.email };
      },
    }),
  ],
  pages: {
    signIn: '/auth/signin',
  },
});

Yukarıdaki yapılandırma ile şunları yapıyoruz:

• CredentialsProvider ile kullanıcıdan e-posta ve şifre alarak, MongoDB’de bulunan kullanıcı ile eşleştirme yapıyoruz.
• authorize fonksiyonu, MongoDB’deki kullanıcının e-posta ve şifresini doğrulamak için kullanılıyor. Eğer bilgiler doğruysa, kullanıcı bilgilerini geri döndürür.

5. Kullanıcı Kaydı İçin API Oluşturma

Kullanıcıların sisteme kaydolabilmesi için bir API rotası oluşturalım. Bu API, kullanıcının şifresini hashleyip MongoDB’ye kaydedecek. Bunun için /pages/api/register.js dosyasını oluşturun:

import { connectToDatabase } from '../../lib/mongodb';
import User from '../../models/User';
import bcrypt from 'bcryptjs';

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).end();
  }

  const { name, email, password } = req.body;

  await connectToDatabase();

  // E-posta adresinin sistemde var olup olmadığını kontrol edin
  const existingUser = await User.findOne({ email });
  if (existingUser) {
    return res.status(400).json({ message: 'Bu e-posta ile kayıtlı bir kullanıcı zaten var.' });
  }

  // Şifreyi hashleyin
  const hashedPassword = await bcrypt.hash(password, 12);

  // Yeni kullanıcı oluşturun
  const user = new User({
    name,
    email,
    password: hashedPassword,
  });

  await user.save();

  res.status(201).json({ message: 'Kullanıcı başarıyla oluşturuldu.' });
}

Bu API rotası, kullanıcıdan gelen şifreyi hashleyip MongoDB’ye kaydeder. Eğer aynı e-posta adresiyle kayıtlı bir kullanıcı zaten varsa, bir hata döner.

6. Giriş Sayfası Oluşturma

Artık kullanıcıların giriş yapabileceği bir form oluşturalım. Bunun için /pages/auth/signin.js dosyasını oluşturup aşağıdaki kodu ekleyin:

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

export default function SignIn() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const result = await signIn('credentials', {
      redirect: false,
      email,
      password,
    });
    if (result.error) {
      alert(result.error);
    } else {
      // Giriş başarılıysa yönlendirme yapabilirsiniz.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <h1>Giriş Yap</h1>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="E-posta"
        required
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Şifre"
        required
      />
      <button type="submit">Giriş Yap</button>
    </form>
  );
}

Oluşturduğumuz form, kullanıcıların e-posta ve şifre ile giriş yapmalarını sağlar. signIn fonksiyonu, NextAuth.js ile giriş yapma işlemini başlatır.

Bu adımları takip ederek Next.js ile NextAuth.js kullanarak MongoDB üzerinde kullanıcı adı ve şifre ile kimlik doğrulama işlemi gerçekleştirebilirsiniz. Sistemi genişleterek kayıt, şifre sıfırlama ve iki faktörlü kimlik doğrulama gibi özellikler ekleyebilirsiniz.

Okuduğunuz için teşekkürler

• 👏 Beğendiyseniz alkışlayın ve beni takip edin 👉
• 📰 Daha fazla içerik görüntülemek için tıklayın
• 🔔 Beni takip edin: LinkedIn!

Her zaman gelişmek için yer olduğunu anlıyorum. Lütfen düşüncelerinizi paylaşmaktan çekinmeyin.