Next.js ile Auth0 Entegrasyonu: Adım Adım Kılavuz

Next.js ile Auth0 Entegrasyonu: Adım Adım Kılavuz

Merhaba! Fatih Soysal olarak, bu yazıda Next.js uygulamanıza Auth0 kullanarak güvenli bir kimlik doğrulama sistemi nasıl entegre edeceğinizi adım adım açıklayacağım. Auth0, kullanıcı yönetimi ve kimlik doğrulamasını kolaylaştıran güçlü bir platformdur. Bu entegrasyon sayesinde, kullanıcıların güvenli bir şekilde oturum açmasını ve uygulamanıza erişmesini sağlayabilirsiniz. Öncelikle, Auth0 hesabınızın olması ve bir uygulama oluşturmanız gerekiyor. Bu adımlar, uygulamanızın güvenliğini büyük ölçüde artıracaktır.

Auth0 Uygulaması Oluşturma

İlk olarak, Auth0 hesabınıza giriş yapın veya ücretsiz bir hesap oluşturun. Daha sonra, “Applications” bölümüne giderek yeni bir uygulama oluşturun. Uygulama türü olarak “Single Page Web Applications” seçeneğini tercih etmelisiniz. Sonrasında, uygulamanız için bir isim verin ve “Create” butonuna tıklayın. Bu işlem sonrasında, uygulamanızın Client ID ve Client Secret gibi önemli bilgilerini alacaksınız. Bu bilgileri güvenli bir şekilde saklamanız oldukça önemlidir.

Next.js Projesine Auth0 Kütüphanesini Ekleme

Ardından, Next.js projenize Auth0 kütüphanesini eklemeniz gerekmektedir. Bunun için npm veya yarn kullanabilirsiniz:

npm install @auth0/nextjs-auth0
# veya
yarn add @auth0/nextjs-auth0

Bu kütüphane, Auth0 ile etkileşimi kolaylaştıran fonksiyonlar sağlar. Kurulumdan sonra, pages/api dizinine bir Auth0 API rotası ekleyeceğiz. Bu rota, Auth0 ile iletişim kurmak için kullanılacaktır.

API Rotasının Oluşturulması

Şimdi, pages/api/auth/[…auth0].js dosyasını oluşturup aşağıdaki kodu ekleyin. Bu kod, Auth0 ile gerekli iletişimi sağlar ve kullanıcı doğrulamasını yönetir. Bu bölümde, önceki adımlarda elde ettiğiniz Client ID ve Client Secret bilgilerini kullanmanız önemlidir.

import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth({
  domain: 'YOUR_AUTH0_DOMAIN', // Auth0 domaininizi buraya girin
  clientId: 'YOUR_AUTH0_CLIENT_ID', // Auth0 Client ID'nizi buraya girin
  clientSecret: 'YOUR_AUTH0_CLIENT_SECRET', // Auth0 Client Secret'inizi buraya girin
  callbackUrl: '/profile', // Oturum açma işlemi sonrası yönlendirilecek URL
  authorizationParams: {
    redirect_uri: 'http://localhost:3000/api/auth/callback' //callback URL
  }
});

Dikkatlice, YOUR_AUTH0_DOMAIN, YOUR_AUTH0_CLIENT_ID ve YOUR_AUTH0_CLIENT_SECRET yer tutucularını kendi Auth0 uygulamanızın bilgilerini ile değiştirmeniz gerekmektedir. Ayrıca, callbackUrl ve redirect_uri değerlerini uygulamanızın gereksinimlerine göre ayarlayabilirsiniz. Doğru URL’leri kullanmazsanız, hata alabilirsiniz.

Oturum Açma ve Profil Sayfaları

Kullanıcıların oturum açabileceği bir sayfa ve oturum açtıktan sonra bilgilerini görüntüleyebilecekleri bir profil sayfası oluşturmanız gerekecektir. Bu sayfalarda, useUser hook’unu kullanarak kullanıcının oturum açma durumunu ve bilgilerini kontrol edebilirsiniz.

import { useUser } from '@auth0/nextjs-auth0';

const Profile = () => {
  const { user, error, isLoading } = useUser();

  if (isLoading) return 
Yükleniyor...
;
  if (error) return 
Hata oluştu: {error.message}
;
  if (!user) return 
Oturum açın
;

  return (
    <div>
      
Hoş geldin, {user.name}!
      
Email: {user.email}
      {/* Diğer kullanıcı bilgilerini burada görüntüleyebilirsiniz */}
    </div>
  );
};

export default Profile;

Sonuç

Bu adım adım kılavuzla, Next.js uygulamanıza Auth0 ile güvenli bir kimlik doğrulama sistemi eklemeyi öğrendiniz. Artık kullanıcılarınız güvenli bir şekilde oturum açabilir ve uygulamanıza erişebilir. Bu entegrasyon, uygulamanızın güvenliğini ve kullanıcı deneyimini önemli ölçüde iyileştirecektir. Daha fazla bilgi ve destek için fatihsoysal.com adresini ziyaret edebilirsiniz. Ayrıca, Auth0’ın resmi dökümanlarına da göz atabilirsiniz: https://auth0.com/docs

#Etiketler
Next.js, Auth0, Kimlik Doğrulama, Oturum Açma, Güvenlik, Entegrasyon, JWT, Adım Adım Kılavuz, Next.js Auth0, Auth0 Entegrasyonu