NextAuth + Directus Entegrasyonu

NextAuth ile Directus backend'inize bağlanmak için gerekli tüm dosyalar oluşturuldu.

Kullanım

1. Environment Değişkenleri

.env.local dosyasında NEXTAUTH_SECRET değerini değiştirin:

# Rastgele bir secret oluşturmak için:
openssl rand -base64 32

2. Herhangi bir sayfada session kullanımı

"use client";

import { useSession, signOut } from "next-auth/react";

export default function Dashboard() {
  const { data: session, status } = useSession();

  if (status === "loading") {
    return <div>Yükleniyor...</div>;
  }

  if (!session) {
    return <div>Giriş yapmanız gerekiyor</div>;
  }

  return (
    <div>
      <h1>Hoşgeldiniz, {session.user?.email}</h1>
      <p>Access Token: {session.accessToken}</p>
      <button onClick={() => signOut()}>Çıkış Yap</button>
    </div>
  );
}

3. Server Component'te session kullanımı

import { getServerSession } from "next-auth/next";
import { authOptions } from "@/app/api/auth/[...nextauth]/route";

export default async function ServerPage() {
  const session = await getServerSession(authOptions);

  if (!session) {
    return <div>Giriş yapmanız gerekiyor</div>;
  }

  return <div>Hoşgeldiniz, {session.user?.email}</div>;
}

4. API Route'larında kullanım

import { getServerSession } from "next-auth/next";
import { authOptions } from "@/app/api/auth/[...nextauth]/route";

export async function GET(request: Request) {
  const session = await getServerSession(authOptions);

  if (!session) {
    return new Response("Unauthorized", { status: 401 });
  }

  // Directus API'sine istek atarken token kullanın
  const response = await fetch(`${process.env.DIRECTUS_URL}/items/your_collection`, {
    headers: {
      Authorization: `Bearer ${session.accessToken}`,
    },
  });

  const data = await response.json();
  return Response.json(data);
}

5. Middleware ile route koruma

middleware.ts dosyası oluşturun:

export { default } from "next-auth/middleware";

export const config = {
  matcher: ["/dashboard/:path*", "/profile/:path*"],
};

Başlatma

npm run dev
# veya
yarn dev

Tarayıcıda http://localhost:3000/login adresine gidin ve giriş yapın.

2.2 KiB Raw Permalink Blame History Unescape Escape