Better Auth مع Next.js 15: الدليل الشامل للمصادقة في 2026

npx create-next-app@latest better-auth-demo --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
cd better-auth-demo

npm install better-auth
npm install -D @types/better-sqlite3

npm install drizzle-orm @neondatabase/serverless
npm install -D drizzle-kit

DATABASE_URL="postgresql://user:password@localhost:5432/better_auth_demo"
BETTER_AUTH_SECRET="مفتاحك-السري-يجب-أن-يكون-32-حرفاً-على-الأقل"
BETTER_AUTH_URL="http://localhost:3000"
 
GITHUB_CLIENT_ID="معرف-عميل-github"
GITHUB_CLIENT_SECRET="سر-عميل-github"
GOOGLE_CLIENT_ID="معرف-عميل-google"
GOOGLE_CLIENT_SECRET="سر-عميل-google"

openssl rand -base64 32

import { neon } from "@neondatabase/serverless";
import { drizzle } from "drizzle-orm/neon-http";
 
const sql = neon(process.env.DATABASE_URL!);
export const db = drizzle(sql);

import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { db } from "@/db";
 
export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: "pg",
  }),
 
  emailAndPassword: {
    enabled: true,
    requireEmailVerification: false, // فعّلها في الإنتاج
  },
 
  socialProviders: {
    github: {
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    },
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    },
  },
 
  session: {
    expiresIn: 60 * 60 * 24 * 7, // 7 أيام
    updateAge: 60 * 60 * 24, // تحديث الجلسة كل 24 ساعة
    cookieCache: {
      enabled: true,
      maxAge: 5 * 60, // تخزين مؤقت لمدة 5 دقائق
    },
  },
});

import { auth } from "@/lib/auth";
import { toNextJsHandler } from "better-auth/next-js";
 
export const { GET, POST } = toNextJsHandler(auth);

npx better-auth generate

npx drizzle-kit push

CREATE TABLE "user" (
  "id" TEXT PRIMARY KEY,
  "name" TEXT NOT NULL,
  "email" TEXT UNIQUE NOT NULL,
  "emailVerified" BOOLEAN DEFAULT FALSE,
  "image" TEXT,
  "createdAt" TIMESTAMP DEFAULT NOW(),
  "updatedAt" TIMESTAMP DEFAULT NOW()
);
 
CREATE TABLE "session" (
  "id" TEXT PRIMARY KEY,
  "userId" TEXT NOT NULL REFERENCES "user"("id"),
  "token" TEXT UNIQUE NOT NULL,
  "expiresAt" TIMESTAMP NOT NULL,
  "ipAddress" TEXT,
  "userAgent" TEXT
);
 
CREATE TABLE "account" (
  "id" TEXT PRIMARY KEY,
  "userId" TEXT NOT NULL REFERENCES "user"("id"),
  "accountId" TEXT NOT NULL,
  "providerId" TEXT NOT NULL,
  "accessToken" TEXT,
  "refreshToken" TEXT,
  "expiresAt" TIMESTAMP,
  "password" TEXT
);
 
CREATE TABLE "verification" (
  "id" TEXT PRIMARY KEY,
  "identifier" TEXT NOT NULL,
  "value" TEXT NOT NULL,
  "expiresAt" TIMESTAMP NOT NULL
);

import { createAuthClient } from "better-auth/react";
 
export const authClient = createAuthClient({
  baseURL: process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000",
});
 
export const {
  signIn,
  signUp,
  signOut,
  useSession,
} = authClient;

NEXT_PUBLIC_APP_URL="http://localhost:3000"

"use client";
 
import { useState } from "react";
import { signUp } from "@/lib/auth-client";
import { useRouter } from "next/navigation";
import Link from "next/link";
 
export default function SignUpPage() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const router = useRouter();
 
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");
    setLoading(true);
 
    const { error } = await signUp.email({
      email,
      password,
      name,
    });
 
    if (error) {
      setError(error.message || "حدث خطأ ما");
      setLoading(false);
      return;
    }
 
    router.push("/dashboard");
  };
 
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="max-w-md w-full space-y-8 p-8 bg-white rounded-xl shadow-lg">
        <div className="text-center">
          <h2 className="text-3xl font-bold text-gray-900">إنشاء حساب</h2>
          <p className="mt-2 text-gray-600">ابدأ رحلتك اليوم</p>
        </div>
 
        <form onSubmit={handleSubmit} className="space-y-6">
          {error && (
            <div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm">
              {error}
            </div>
          )}
 
          <div>
            <label htmlFor="name" className="block text-sm font-medium text-gray-700">
              الاسم الكامل
            </label>
            <input
              id="name"
              type="text"
              required
              value={name}
              onChange={(e) => setName(e.target.value)}
              className="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              placeholder="أحمد محمد"
            />
          </div>
 
          <div>
            <label htmlFor="email" className="block text-sm font-medium text-gray-700">
              البريد الإلكتروني
            </label>
            <input
              id="email"
              type="email"
              required
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              placeholder="ahmed@example.com"
            />
          </div>
 
          <div>
            <label htmlFor="password" className="block text-sm font-medium text-gray-700">
              كلمة المرور
            </label>
            <input
              id="password"
              type="password"
              required
              minLength={8}
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              placeholder="8 أحرف على الأقل"
            />
          </div>
 
          <button
            type="submit"
            disabled={loading}
            className="w-full py-3 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition disabled:opacity-50"
          >
            {loading ? "جاري إنشاء الحساب..." : "إنشاء حساب"}
          </button>
        </form>
 
        <div className="relative">
          <div className="absolute inset-0 flex items-center">
            <div className="w-full border-t border-gray-300" />
          </div>
          <div className="relative flex justify-center text-sm">
            <span className="px-2 bg-white text-gray-500">أو تابع باستخدام</span>
          </div>
        </div>
 
        <div className="grid grid-cols-2 gap-3">
          <button
            onClick={() => signIn.social({ provider: "github" })}
            className="flex items-center justify-center px-4 py-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition"
          >
            GitHub
          </button>
          <button
            onClick={() => signIn.social({ provider: "google" })}
            className="flex items-center justify-center px-4 py-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition"
          >
            Google
          </button>
        </div>
 
        <p className="text-center text-sm text-gray-600">
          لديك حساب بالفعل؟{" "}
          <Link href="/auth/sign-in" className="text-blue-600 hover:underline">
            تسجيل الدخول
          </Link>
        </p>
      </div>
    </div>
  );
}

"use client";
 
import { useState } from "react";
import { signIn } from "@/lib/auth-client";
import { useRouter } from "next/navigation";
import Link from "next/link";
 
export default function SignInPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const router = useRouter();
 
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");
    setLoading(true);
 
    const { error } = await signIn.email({
      email,
      password,
    });
 
    if (error) {
      setError(error.message || "بيانات اعتماد غير صحيحة");
      setLoading(false);
      return;
    }
 
    router.push("/dashboard");
  };
 
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="max-w-md w-full space-y-8 p-8 bg-white rounded-xl shadow-lg">
        <div className="text-center">
          <h2 className="text-3xl font-bold text-gray-900">مرحباً بعودتك</h2>
          <p className="mt-2 text-gray-600">سجّل الدخول إلى حسابك</p>
        </div>
 
        <form onSubmit={handleSubmit} className="space-y-6">
          {error && (
            <div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm">
              {error}
            </div>
          )}
 
          <div>
            <label htmlFor="email" className="block text-sm font-medium text-gray-700">
              البريد الإلكتروني
            </label>
            <input
              id="email"
              type="email"
              required
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
          </div>
 
          <div>
            <label htmlFor="password" className="block text-sm font-medium text-gray-700">
              كلمة المرور
            </label>
            <input
              id="password"
              type="password"
              required
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
          </div>
 
          <div className="flex items-center justify-between">
            <label className="flex items-center">
              <input type="checkbox" className="rounded border-gray-300" />
              <span className="ml-2 text-sm text-gray-600">تذكرني</span>
            </label>
            <Link href="/auth/forgot-password" className="text-sm text-blue-600 hover:underline">
              نسيت كلمة المرور؟
            </Link>
          </div>
 
          <button
            type="submit"
            disabled={loading}
            className="w-full py-3 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition disabled:opacity-50"
          >
            {loading ? "جاري تسجيل الدخول..." : "تسجيل الدخول"}
          </button>
        </form>
 
        <div className="relative">
          <div className="absolute inset-0 flex items-center">
            <div className="w-full border-t border-gray-300" />
          </div>
          <div className="relative flex justify-center text-sm">
            <span className="px-2 bg-white text-gray-500">أو تابع باستخدام</span>
          </div>
        </div>
 
        <div className="grid grid-cols-2 gap-3">
          <button
            onClick={() => signIn.social({ provider: "github" })}
            className="flex items-center justify-center px-4 py-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition"
          >
            GitHub
          </button>
          <button
            onClick={() => signIn.social({ provider: "google" })}
            className="flex items-center justify-center px-4 py-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition"
          >
            Google
          </button>
        </div>
 
        <p className="text-center text-sm text-gray-600">
          ليس لديك حساب؟{" "}
          <Link href="/auth/sign-up" className="text-blue-600 hover:underline">
            إنشاء حساب
          </Link>
        </p>
      </div>
    </div>
  );
}

import { NextRequest, NextResponse } from "next/server";
import { auth } from "@/lib/auth";
import { headers } from "next/headers";
 
const protectedRoutes = ["/dashboard", "/settings", "/admin"];
const authRoutes = ["/auth/sign-in", "/auth/sign-up"];
 
export async function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
 
  const isProtectedRoute = protectedRoutes.some((route) =>
    pathname.startsWith(route)
  );
  const isAuthRoute = authRoutes.some((route) =>
    pathname.startsWith(route)
  );
 
  const session = await auth.api.getSession({
    headers: await headers(),
  });
 
  // إعادة توجيه المستخدمين غير المصادقين إلى تسجيل الدخول
  if (isProtectedRoute && !session) {
    const signInUrl = new URL("/auth/sign-in", request.url);
    signInUrl.searchParams.set("callbackUrl", pathname);
    return NextResponse.redirect(signInUrl);
  }
 
  // إعادة توجيه المستخدمين المصادقين بعيداً عن صفحات المصادقة
  if (isAuthRoute && session) {
    return NextResponse.redirect(new URL("/dashboard", request.url));
  }
 
  return NextResponse.next();
}
 
export const config = {
  matcher: ["/dashboard/:path*", "/settings/:path*", "/admin/:path*", "/auth/:path*"],
};

import { auth } from "@/lib/auth";
import { headers } from "next/headers";
import { redirect } from "next/navigation";
import { SignOutButton } from "@/components/sign-out-button";
 
export default async function DashboardPage() {
  const session = await auth.api.getSession({
    headers: await headers(),
  });
 
  if (!session) {
    redirect("/auth/sign-in");
  }
 
  const { user } = session;
 
  return (
    <div className="min-h-screen bg-gray-50">
      <nav className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16 items-center">
            <h1 className="text-xl font-semibold">لوحة التحكم</h1>
            <div className="flex items-center gap-4">
              <span className="text-sm text-gray-600">{user.email}</span>
              <SignOutButton />
            </div>
          </div>
        </div>
      </nav>
 
      <main className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        <div className="bg-white rounded-xl shadow-sm p-8">
          <h2 className="text-2xl font-bold mb-6">
            مرحباً، {user.name}!
          </h2>
 
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="p-6 bg-blue-50 rounded-lg">
              <h3 className="font-semibold text-blue-900">الملف الشخصي</h3>
              <p className="text-sm text-blue-700 mt-1">{user.email}</p>
              <p className="text-xs text-blue-600 mt-2">
                مُوثّق: {user.emailVerified ? "نعم" : "لا"}
              </p>
            </div>
 
            <div className="p-6 bg-green-50 rounded-lg">
              <h3 className="font-semibold text-green-900">الجلسة</h3>
              <p className="text-sm text-green-700 mt-1">نشطة</p>
              <p className="text-xs text-green-600 mt-2">
                تنتهي: {new Date(session.session.expiresAt).toLocaleDateString("ar")}
              </p>
            </div>
 
            <div className="p-6 bg-purple-50 rounded-lg">
              <h3 className="font-semibold text-purple-900">الحساب</h3>
              <p className="text-sm text-purple-700 mt-1">
                المعرف: {user.id.slice(0, 8)}...
              </p>
              <p className="text-xs text-purple-600 mt-2">
                انضم: {new Date(user.createdAt).toLocaleDateString("ar")}
              </p>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

"use client";
 
import { signOut } from "@/lib/auth-client";
import { useRouter } from "next/navigation";
 
export function SignOutButton() {
  const router = useRouter();
 
  return (
    <button
      onClick={async () => {
        await signOut();
        router.push("/auth/sign-in");
      }}
      className="px-4 py-2 text-sm bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition"
    >
      تسجيل الخروج
    </button>
  );
}

import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { admin } from "better-auth/plugins";
import { db } from "@/db";
 
export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: "pg",
  }),
 
  emailAndPassword: {
    enabled: true,
  },
 
  socialProviders: {
    github: {
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    },
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    },
  },
 
  plugins: [
    admin(), // يضيف حقلي role وbanned إلى المستخدم
  ],
 
  session: {
    expiresIn: 60 * 60 * 24 * 7,
    updateAge: 60 * 60 * 24,
    cookieCache: {
      enabled: true,
      maxAge: 5 * 60,
    },
  },
});

import { createAuthClient } from "better-auth/react";
import { adminClient } from "better-auth/client/plugins";
 
export const authClient = createAuthClient({
  baseURL: process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000",
  plugins: [adminClient()],
});
 
export const { signIn, signUp, signOut, useSession } = authClient;

// Server Component
const session = await auth.api.getSession({
  headers: await headers(),
});
 
if (session?.user.role !== "admin") {
  redirect("/dashboard");
}
 
// Client Component
const { data: session } = useSession();
if (session?.user.role === "admin") {
  // إظهار أدوات المسؤول
}

import { auth } from "@/lib/auth";
import { headers } from "next/headers";
import { redirect } from "next/navigation";
 
export default async function AdminPage() {
  const session = await auth.api.getSession({
    headers: await headers(),
  });
 
  if (!session || session.user.role !== "admin") {
    redirect("/dashboard");
  }
 
  const users = await auth.api.listUsers({
    headers: await headers(),
  });
 
  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <h1 className="text-3xl font-bold mb-8">لوحة المسؤول</h1>
 
      <div className="bg-white rounded-xl shadow-sm overflow-hidden">
        <table className="w-full">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
                الاسم
              </th>
              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
                البريد الإلكتروني
              </th>
              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
                الدور
              </th>
              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
                تاريخ الانضمام
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            {users?.users?.map((user) => (
              <tr key={user.id}>
                <td className="px-6 py-4 text-sm">{user.name}</td>
                <td className="px-6 py-4 text-sm text-gray-600">{user.email}</td>
                <td className="px-6 py-4">
                  <span className={`text-xs px-2 py-1 rounded-full ${
                    user.role === "admin"
                      ? "bg-purple-100 text-purple-800"
                      : "bg-gray-100 text-gray-800"
                  }`}>
                    {user.role || "مستخدم"}
                  </span>
                </td>
                <td className="px-6 py-4 text-sm text-gray-600">
                  {new Date(user.createdAt).toLocaleDateString("ar")}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { admin } from "better-auth/plugins";
import { db } from "@/db";
 
export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: "pg",
  }),
 
  emailAndPassword: {
    enabled: true,
    requireEmailVerification: true,
    sendVerificationEmail: async ({ user, url }) => {
      // في الإنتاج، استخدم خدمة مثل Resend أو SendGrid أو AWS SES
      console.log(`رابط التحقق لـ ${user.email}: ${url}`);
 
      // مثال مع Resend:
      // await resend.emails.send({
      //   from: "auth@yourdomain.com",
      //   to: user.email,
      //   subject: "تحقق من بريدك الإلكتروني",
      //   html: `<a href="${url}">تحقق من البريد</a>`,
      // });
    },
    sendResetPassword: async ({ user, url }) => {
      console.log(`إعادة تعيين كلمة المرور لـ ${user.email}: ${url}`);
    },
  },
 
  socialProviders: {
    github: {
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    },
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    },
  },
 
  plugins: [admin()],
 
  session: {
    expiresIn: 60 * 60 * 24 * 7,
    updateAge: 60 * 60 * 24,
    cookieCache: {
      enabled: true,
      maxAge: 5 * 60,
    },
  },
});

"use client";
 
import { useState } from "react";
import { authClient } from "@/lib/auth-client";
import Link from "next/link";
 
export default function ForgotPasswordPage() {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  const [loading, setLoading] = useState(false);
 
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
 
    await authClient.forgetPassword({
      email,
      redirectTo: "/auth/reset-password",
    });
 
    setSent(true);
    setLoading(false);
  };
 
  if (sent) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="max-w-md w-full p-8 bg-white rounded-xl shadow-lg text-center">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">تحقق من بريدك</h2>
          <p className="text-gray-600 mb-6">
            إذا كان هناك حساب مرتبط بـ {email}، ستتلقى رابط إعادة تعيين كلمة المرور.
          </p>
          <Link href="/auth/sign-in" className="text-blue-600 hover:underline">
            العودة لتسجيل الدخول
          </Link>
        </div>
      </div>
    );
  }
 
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="max-w-md w-full space-y-8 p-8 bg-white rounded-xl shadow-lg">
        <div className="text-center">
          <h2 className="text-3xl font-bold text-gray-900">نسيت كلمة المرور</h2>
          <p className="mt-2 text-gray-600">
            أدخل بريدك الإلكتروني وسنرسل لك رابط إعادة التعيين
          </p>
        </div>
 
        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <label htmlFor="email" className="block text-sm font-medium text-gray-700">
              البريد الإلكتروني
            </label>
            <input
              id="email"
              type="email"
              required
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
          </div>
 
          <button
            type="submit"
            disabled={loading}
            className="w-full py-3 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition disabled:opacity-50"
          >
            {loading ? "جاري الإرسال..." : "إرسال رابط إعادة التعيين"}
          </button>
        </form>
 
        <p className="text-center text-sm text-gray-600">
          <Link href="/auth/sign-in" className="text-blue-600 hover:underline">
            العودة لتسجيل الدخول
          </Link>
        </p>
      </div>
    </div>
  );
}

"use client";
 
import { useSession } from "@/lib/auth-client";
 
export function UserAvatar() {
  const { data: session, isPending } = useSession();
 
  if (isPending) {
    return <div className="w-8 h-8 rounded-full bg-gray-200 animate-pulse" />;
  }
 
  if (!session) {
    return null;
  }
 
  return (
    <div className="flex items-center gap-2">
      {session.user.image ? (
        <img
          src={session.user.image}
          alt={session.user.name}
          className="w-8 h-8 rounded-full"
        />
      ) : (
        <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-sm font-bold">
          {session.user.name.charAt(0).toUpperCase()}
        </div>
      )}
      <span className="text-sm font-medium">{session.user.name}</span>
    </div>
  );
}

npm run dev