Kimlik doğrulama, her modern web uygulamasının temel taşıdır, ancak kurulumu, geliştiricilerin karşılaştığı en zaman alıcı zorluklardan biri olmaya devam ediyor. **Better Auth API** ile tanışın—kullanıcı yönetimini nasıl uyguladığımızı dönüştürmeyi vaat eden, çerçeveden bağımsız bir kimlik doğrulama çözümü. Bu kapsamlı kılavuzda, Bun'ı ışık hızında performans için kullanarak Better Auth'un gücünü ve basitliğini gösteren eksiksiz bir tam yığın uygulama oluşturmayı adım adım inceleyeceğiz.
Geliştirici Ekibinizin maksimum verimlilikle birlikte çalışması için entegre, Hepsi Bir Arada bir platform mu istiyorsunuz?
Apidog tüm taleplerinizi karşılar ve Postman'ı çok daha uygun bir fiyata değiştirir!
Better Auth API Nedir?
Better Auth API, herhangi bir JavaScript ortamında sorunsuz çalışmak üzere tasarlanmış modern, açık kaynaklı bir kimlik doğrulama çerçevesidir. Sizi belirli ekosistemlere kilitleyen geleneksel kimlik doğrulama kütüphanelerinin aksine, Better Auth, ister ön uçta React, Vue, Svelte veya vanilla JavaScript, ister arka uçta Node.js, Bun veya Deno kullanıyor olun, yığınınızla uyum sağlayan bir birleşik API sunar. Eklenti tabanlı mimarisi, geleneksel e-posta/şifreden OAuth sağlayıcılarına, geçiş anahtarlarına ve sihirli bağlantılara kadar birden fazla kimlik doğrulama stratejisini desteklerken, tür güvenliğini ve mükemmel geliştirici deneyimini korur.
Better Auth ile Başlarken: Ön Koşullar ve Proje Kurulumu
Koda dalmadan önce aşağıdakilerin yüklü olduğundan emin olun:
- Bun 1.0+: Olağanüstü hızı ve modern araçları nedeniyle bu eğitim boyunca Bun kullanacağız.
- Node.js 18+: Arka uç çalışma zamanı için gereklidir.
- Bir kod düzenleyici: TypeScript desteği için VS Code önerilir.
Bu kurulum npm ile mükemmel çalışsa da, 3-5 kat daha hızlı paket kurulumu ve daha akıcı bir geliştirme deneyimi sunan Bun iş akışını göstereceğiz.
Örnek Bir Proje Oluşturma: Adım Adım Uygulama
Bir React ön ucu ve Express arka ucu ile eksiksiz bir kimlik doğrulama sistemi oluşturalım, veritabanı kalıcılığı da dahil.
Adım 1: Express ve Drizzle ORM ile Arka Uç Kurulumu
1. **Arka Uç Projesini Başlatın**
Önce, arka uç dizininizi oluşturun ve içine girin:
mkdir better-auth-backend
cd better-auth-backend
bun init -y
2. **Bağımlılıkları Yükleyin**
Sunucu için Express'e, kimlik doğrulama için Better Auth'a ve veritabanı yönetimi için Drizzle ORM'ye ihtiyacımız olacak:
bun add express better-auth drizzle-orm
bun add -D @types/bun @types/express drizzle-kit
3. **Ortam Değişkenlerini Yapılandırın**
Hassas yapılandırmayı depolamak için bir .env dosyası oluşturun:
BETTER_AUTH_SECRET=your-secret-key-here # Generate with: openssl rand -base64 32
BETTER_AUTH_URL=http://localhost:3000
DATABASE_URL=local.db
*BETTER_AUTH_SECRET* better-auth web sitesinde de oluşturulabilir.
4. **Drizzle ORM ile Veritabanı Şeması Oluşturun**
Better Auth, mükemmel TypeScript desteği sağlayan ve yerel modül sorunlarını önleyen Drizzle ile en iyi şekilde çalışır. src/db/schema.ts dosyasını oluşturun:
import { sqliteTable, text, integer } from "drizzle-orm/sqlite-core";
export const user = sqliteTable("user", {
id: text("id").primaryKey(),
name: text('name').notNull(),
email: text('email').notNull().unique(),
emailVerified: integer('email_verified', { mode: 'boolean' }).notNull().default(false),
image: text('image'),
createdAt: integer('created_at', { mode: 'timestamp' }).notNull(),
updatedAt: integer('updated_at', { mode: 'timestamp' }).notNull(),
});
export const session = sqliteTable("session", {
id: text("id").primaryKey(),
expiresAt: integer('expires_at', { mode: 'timestamp' }).notNull(),
token: text('token').notNull().unique(),
createdAt: integer('created_at', { mode: 'timestamp' }).notNull(),
userId: text('user_id').notNull(),
});
export const account = sqliteTable("account", {
id: text("id").primaryKey(),
accountId: text('account_id').notNull(),
providerId: text('provider_id').notNull(),
userId: text('user_id').notNull(),
accessToken: text('access_token'),
refreshToken: text('refresh_token'),
createdAt: integer('created_at', { mode: 'timestamp' }).notNull(),
});
export const verification = sqliteTable("verification", {
id: text("id").primaryKey(),
identifier: text('identifier').notNull(),
value: text('value').notNull(),
expiresAt: integer('expires_at', { mode: 'timestamp' }).notNull(),
});
5. **Veritabanı Bağlantısını Yapılandırın**
Bun'ın yerel SQLite bağlamasını kullanarak src/db/index.ts dosyasını oluşturun:
import { Database } from "bun:sqlite";
import { drizzle } from "drizzle-orm/bun-sqlite";
const sqlite = new Database("local.db");
export const db = drizzle(sqlite);
6. **Better Auth Yapılandırmasını Ayarlayın**
Better Auth API'yi yapılandırmak için src/lib/auth.ts dosyasını oluşturun:
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { db } from "../db";
import { user, session, account, verification } from "../db/schema";
export const auth = betterAuth({
database: drizzleAdapter(db, {
provider: "sqlite",
schema: {
user: user,
session: session,
account: account,
verification: verification,
},
}),
emailAndPassword: {
enabled: true,
},
trustedOrigins: ["http://localhost:5173"],
});
7. **Express Sunucusu Oluşturun**
src/index.ts içinde Better Auth API işleyicisini bağlayın:
import express from "express";
import cors from "cors";
import { toNodeHandler } from "better-auth/node";
import { auth } from "./lib/auth";
const app = express();
const PORT = process.env.PORT || 3000;
app.use(
cors({
origin: "http://localhost:5173",
credentials: true,
})
);
// Mount Better Auth API at /api/auth
app.use("/api/auth", toNodeHandler(auth));
app.use(express.json());
app.get("/api/me", async (req, res) => {
const session = await auth.api.getSession({
headers: req.headers,
});
if (!session) {
return res.status(401).json({ error: "Unauthorized" });
}
res.json({ user: session.user });
});
app.listen(PORT, () => {
console.log(`Server running on http://localhost:${PORT}`);
});
8. **Veritabanı Geçişini Çalıştırın**
Arka uç kök dizininde drizzle.config.ts dosyasını oluşturun:
import { defineConfig } from "drizzle-kit";
export default defineConfig({
dialect: "sqlite",
schema: "./src/db/schema.ts",
out: "./drizzle",
dbCredentials: {
url: "local.db",
},
});
Tabloları oluşturmak için geçişi çalıştırın:
bunx drizzle-kit push
Adım 2: React ve Vite ile Ön Uç Kurulumu
1. **React Uygulaması Oluşturun**
Yeni bir terminalde ön ucu başlatın:
bun create vite better-auth-frontend --template react-ts
cd better-auth-frontend
2. **Bağımlılıkları Yükleyin**
bun add better-auth
3. **Tailwind CSS'i Yapılandırın (V4 Güncellemesi)**
Tailwind CSS v4 sonrası farklı bir kurulum gerektirir. Yeni paketleri yükleyin:
bun add -D tailwindcss postcss @tailwindcss/postcss
Proje kök dizininde tailwind.config.js dosyasını oluşturun:
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
postcss.config.js dosyasını oluşturun:
export default {
plugins: {
"@tailwindcss/postcss": {},
},
}
src/index.css dosyasını oluşturun:
@import "tailwindcss";
body {
margin: 0;
font-family: system-ui, -apple-system, sans-serif;
}
4. **Better Auth İstemcisini Kurun**
src/lib/auth-client.ts dosyasını oluşturun:
import { createAuthClient } from "better-auth/react";
export const authClient = createAuthClient({
baseURL: "http://localhost:3000",
});
export const { signIn, signUp, useSession } = authClient;
5. **Kimlik Doğrulama Arayüzünü Oluşturun**
src/App.tsx dosyasını eksiksiz bir kimlik doğrulama arayüzü ile değiştirin:
import { useState } from 'react';
import { useSession, signIn, signUp } from './lib/auth-client';
function App() {
const { data: session, isPending } = useSession();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [name, setName] = useState('');
const handleSignUp = async (e: React.FormEvent) => {
e.preventDefault();
await signUp.email({
name,
email,
password,
callbackURL: '/',
});
};
const handleSignIn = async (e: React.FormEvent) => {
e.preventDefault();
await signIn.email({
email,
password,
});
};
const handleSignOut = async () => {
await authClient.signOut();
};
if (isPending) return <div className="flex items-center justify-center min-h-screen">Yükleniyor...</div>;
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
<div className="max-w-md w-full bg-white rounded-lg shadow-md p-6">
<h1 className="text-2xl font-bold text-center mb-6 text-gray-800">
Better Auth API Test
</h1>
{session?.user ? (
<div className="space-y-4">
<div className="bg-green-50 p-4 rounded-md">
<p className="text-green-800 font-semibold">Giriş yapıldı:</p>
<p className="text-green-700">{session.user.email}</p>
<p className="text-green-600 text-sm">{session.user.name}</p>
</div>
<button
onClick={handleSignOut}
className="w-full bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-md transition"
>
Çıkış Yap
</button>
</div>
) : (
<div className="space-y-4">
<form onSubmit={handleSignUp} className="space-y-3">
<h2 className="text-lg font-semibold text-gray-700">Kaydol</h2>
<input
type="text"
placeholder="Ad"
value={name}
onChange={(e) => setName(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
<input
type="email"
placeholder="E-posta"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
<input
type="password"
placeholder="Şifre"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
<button
type="submit"
className="w-full bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-md transition"
>
Hesap Oluştur
</button>
</form>
<form onSubmit={handleSignIn} className="space-y-3">
<h2 className="text-lg font-semibold text-gray-700">Giriş Yap</h2>
<input
type="email"
placeholder="E-posta"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
<input
type="password"
placeholder="Şifre"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
<button
type="submit"
className="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md transition"
>
Giriş Yap
</button>
</form>
</div>
)}
</div>
</div>
);
}
export default App;
Adım 3: Entegrasyonu Test Etme
1. **Arka Uç Sunucusunu Başlatın**
cd better-auth-backend
bun dev
2. **Ön Uç Geliştirmeyi Başlatın**
cd better-auth-frontend
bun dev
3. **Kimlik Doğrulama Akışını Test Edin**
- Tarayıcınızda
http://localhost:5173adresini açın - Kaydolma formunu kullanarak yeni bir kullanıcı kaydedin
- Tablolar dolarken veritabanı dosyasının büyüdüğünü gözlemleyin
- Oturum yönetimini doğrulamak için çıkış yapın ve tekrar giriş yapın
- Oturum uç noktasını kontrol edin:
http://localhost:3000/api/auth/session
Better Auth API'nin Temel Faydaları
**Better Auth API**, kendisini birkaç çekici avantajla öne çıkarır:
- **Çerçeve Bağımsızlığı**: NextAuth.js veya Firebase Auth'un aksine, Better Auth JavaScript'in çalıştığı her yerde çalışır. Aynı kimlik doğrulama mantığı, web, mobil ve API istemcilerine değişiklik yapmadan hizmet verir.
- **Çoklu Kimlik Doğrulama Stratejileri**: Kimlik bilgileri, OAuth 2.0, geçiş anahtarları, iki faktörlü kimlik doğrulama ve sihirli bağlantılar için kutudan çıktığı haliyle destek. Her strateji, tek bir yapılandırma satırı ile etkinleştirilebilen bir eklentidir.
- **Tür Güvenliği**: Veritabanı şemanızdan çıkarılan türlerle tam TypeScript desteği, kimlik doğrulama kod tabanlarında yaygın olan "any" türü karmaşasını ortadan kaldırır.
- **Veritabanı Esnekliği**: Drizzle ORM adaptörü, kimlik doğrulama mantığınızı değiştirmeden SQLite, PostgreSQL ve MySQL arasında geçiş yapabileceğiniz anlamına gelir. Bu eğitim basitlik için SQLite kullanır, ancak aynı kod üretim veritabanlarına ölçeklenebilir.
- **Eklenti Ekosistemi**: Organizasyon desteğine mi ihtiyacınız var? Çoklu kiracılık mı? Yönetici rolleri mi? Better Auth'un eklenti sistemi, çekirdeği şişirmeden işlevselliği genişletmenizi sağlar.
- **Performans**: Çalışma zamanı olarak Bun ile, soğuk başlangıçlar 100 ms'nin altındadır ve tüm kimlik doğrulama akışı mütevazı donanımda 50 ms'nin altında tamamlanır.
Sıkça Sorulan Sorular
S1: Better Auth API'yi Bun yerine npm ile kullanabilir miyim?
Cevap: Kesinlikle. Bu kılavuz performans avantajları için Bun'ı kullanırken, her komutun bir npm karşılığı vardır. bun add yerine npm install, bun dev yerine npm run dev ve bunx yerine npx kullanın. Tek Bun'a özgü kod, Node.js ortamları için better-sqlite3 ile değiştirilebilecek olan bun:sqlite içe aktarmasıdır.
S2: Neden Drizzle ORM'ye ihtiyacımız oldu? Better Auth tabloları otomatik olarak oluşturamaz mı?
Cevap: Better Auth, açık veritabanı yönetimi ilkesini takip eder. Drizzle, tür güvenli geçişler, şema sürümleme sağlar ve kazara veri kaybını önler. drizzle-kit push komutu, veritabanı evriminiz üzerinde tam kontrol sağlayan tek seferlik bir kurulumdur.
S3: "Missing parameter name" hatasıyla karşılaşırsam ne olur?
Cevap: Bu, Express'te joker karakterlerle app.all() kullanıldığında ortaya çıkar. Çözüm, bunun yerine app.use("/api/auth", toNodeHandler(auth)) kullanmaktır. Better Auth'un işleyicisi tüm alt yolları dahili olarak yönettiği için Express'in joker karakter eşleştirmesine ihtiyacı yoktur.
S4: Sosyal kimlik doğrulama sağlayıcılarını nasıl eklerim?
Cevap: Better Auth yapılandırmanızda OAuth eklentilerini etkinleştirin. Örneğin, GitHub eklemek için:
import { betterAuth } from "better-auth";
import { github } from "better-auth/plugins";
export const auth = betterAuth({
plugins: [
github({
clientId: process.env.GITHUB_CLIENT_ID,
clientSecret: process.env.GITHUB_CLIENT_SECRET,
})
]
});
S5: Better Auth API üretim için hazır mı?
Cevap: Evet. Better Auth, binlerce kullanıcısı olan birkaç SaaS ürünü için kimlik doğrulamayı desteklemektedir. Çerçeve, güvenli oturum yönetimi, CSRF koruması uygular ve OWASP yönergelerini takip eder. Ancak, her zaman kendi özel uygulamanızı denetleyin ve bağımlılıkları güncel tutun.
Sonuç
**Better Auth API** gibi modern çözümlerle sıfırdan kimlik doğrulama oluşturmak artık gerekli değil. Bu kılavuzda, veritabanı şemasından kullanıcı arayüzü bileşenlerine kadar eksiksiz bir kimlik doğrulama sistemini birkaç dakika içinde oluşturduk! Better Auth'un esnekliği, Drizzle ORM'nin tür güvenliği ve Bun'ın performansının birleşimi, prototipten üretime ölçeklenebilen bir geliştirici deneyimi yaratır.
Adım adım süreç, kimlik doğrulamanın kritik olmasına rağmen karmaşık olmak zorunda olmadığını gösteriyor. Better Auth'un eklenti mimarisinden ve çerçeveden bağımsız tasarımından yararlanarak, güvenlik uygulamalarıyla uğraşmak yerine kullanıcılarınız için önemli olan özellikleri oluşturmaya odaklanabilirsiniz.
İster bir yan proje ister bir kurumsal uygulama geliştiriyor olun, Better Auth API, ihtiyaçlarınıza uyum sağlayan güvenli, ölçeklenebilir kimlik doğrulama için bir temel sağlar—tersi değil.
Geliştirici Ekibinizin maksimum verimlilikle birlikte çalışması için entegre, Hepsi Bir Arada bir platform mu istiyorsunuz?
Apidog tüm taleplerinizi karşılar ve Postman'ı çok daha uygun bir fiyata değiştirir!