التعامل مع API

NEXT-AUTH + MONGO-DB SUPABASE

🌐 التعامل مع API

ي ملف باسم route.js داخل المجلد /app/api يمثل نقطة وصول برمجية (API endpoint). يمكنك استخدام ملف المساعدة /libs/api.js (الذي يحتوي على نسخة مُعَدّة مسبقًا من axios مع interceptors) لتسهيل طلبات الـ API، حيث يقوم تلقائيًا بما يلي:

• عرض رسائل الخطأ.
• إعادة التوجيه لصفحة تسجيل الدخول عند خطأ 401.
• إضافة /api كبادئة تلقائية للطلبات. مثال: بدلاً من /api/user/posts يمكنك كتابة /user/posts.

مثال: user/posts/ ← /api/user/posts

حماية طلبات API الحساسة.

✅ يستخدم NextAuth ملفات تعريف الارتباط (cookies) لمعالجة المصادقة تلقائيًا.

//-/app/user-profile/page.js
"use client"

import { useState } from "react";
import apiClient from "@/libs/api";

const UserProfile = () => {
  const [isLoading, setIsLoading] = useState(false);

  const saveUser = async () => {
    setIsLoading(true);

    try {
      const { data } = await apiClient.post("/user", {
        email: "new@gmail.com",
      });

      console.log(data);
    } catch (e) {
      console.error(e?.message);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <button className="btn btn-primary" onClick={() => saveUser()}>
      {isLoading && (
        <span className="loading loading-spinner loading-sm"></span>
      )}
      Save
    </button>
  );
};

export default UserProfile;

---

🖥️ على الواجهة الخلفية (Backend)

أما في الواجهة الخلفية (Backend)، يمكنك الحصول على الجلسة (Session) واستخدامها لاسترجاع بيانات المستخدم من قاعدة البيانات. يجب أولًا ضبط إعدادات قاعدة البيانات. سيبدو ملف الـ API بهذا الشكل:

// -/app/api/user/route.js
import { NextResponse } from "next/server";
import { getServerSession } from "next-auth/next";
import { authOptions } from "@/libs/next-auth";
import connectMongo from "@/libs/mongoose";
import User from "@/models/User";

export async function POST(req) {
  const session = await getServerSession(authOptions);

  if (session) {
    const { id } = session.user;

    const body = await req.json();

    if (!body.email) {
      return NextResponse.json({ error: "Email is required" }, { status: 400 });
    }

    try {
      await connectMongo();

      const user = await User.findById(id);

      if (!user) {
        return NextResponse.json({ error: "User not found" }, { status: 404 });
      }

      user.email = body.email;
      await user.save();

      return NextResponse.json({ data: user }, { status: 200 });
    } catch (e) {
      console.error(e);
      return NextResponse.json(
        { error: "Something went wrong" },
        { status: 500 }
      );
    }
  } else {
    // Not Signed in
    return NextResponse.json({ error: "Not signed in" }, { status: 401 });
  }
}