Firebase Kimlik Doğrulamasını En Son Next.js Özellikleriyle Kullanma

giriş next-firebase-auth-edge Bu makaleyi muhtemelen mevcut veya yeni Next.js uygulamanıza Firebase Kimlik Doğrulaması eklemenin yollarını ararken bulmuşsunuzdur. Uygulamanızın başarılı olma şansını en üst düzeye çıkaracak akıllı, tarafsız ve geleceğe yönelik bir karar vermeyi hedefliyorsunuz. Next-firebase-auth-edge'in yaratıcısı olarak, tamamen tarafsız bir fikir sunmanın benim yeteneğim olmadığını kabul etmeliyim, ancak en azından kütüphaneyi tasarlarken benimsediğim yaklaşımı haklı çıkarmaya çalışacağım. Umarız bu kılavuzun sonunda yaklaşımı hem basit hem de uzun vadede uygulanabilir bulacaksınız. Nasıl başladı Sizi uzun tanıtımlardan kurtaracağım. Kütüphane fikrinin muhtemelen sizinkine benzer bir durumdan ilham aldığını söylememe izin verin. Next.js'nin kanarya sürümünü yayınladığı dönemdi. Yeniden yazmalara ve dahili yönlendirmelere büyük ölçüde dayanan bir uygulama üzerinde çalışıyordum. Bunun için özel Node.js sunucu oluşturma Next.js uygulamasını kullanıyorduk. App Router'ın express ve için gerçekten heyecanlıydık ancak bunların özel sunucumuzla uyumlu olmayacağının da farkındaydık. özel bir Express sunucusuna olan ihtiyacı ortadan kaldırmak için kullanabileceğimiz güçlü bir özellik gibi görünüyordu; bunun yerine, kullanıcıları dinamik olarak farklı sayfalara yönlendirmek ve yeniden yazmak için yalnızca Next.js'nin yerleşik özelliklerine güvenmeyi tercih ettik. Uygulama Yönlendiricisi Sunucu Bileşenleri Ara katman yazılımı, O zaman kullanıyorduk. Kitaplığı gerçekten beğendik, ancak kimlik doğrulama mantığımızı eski sayılacak olan , , , dosyaları aracılığıyla yaydı. yakında. Ayrıca kitaplığın ara yazılımla uyumlu olmaması, URL'leri yeniden yazmamızı veya kullanıcıları bağlamlarına göre yeniden yönlendirmemizi engelliyordu. next-firebase-auth next.config.js pages/_app.tsx pages/api/login.ts pages/api/logout.ts Böylece aramaya başladım ama şaşırtıcı bir şekilde ara katman yazılımında Firebase Authentication'ı destekleyen bir kitaplık bulamadım. – Node.js ve React'ta 11 yıldan fazla ticari deneyime sahip bir yazılım mühendisi olarak bu ikilemin üstesinden gelmeye hazırlanıyordum. Neden olabilir? Bu imkansız! Ben de başladım. Ve cevap belli oldu. Ara yazılım içinde çalışıyor. içinde uyumlu bir Firebase kitaplığı yoktur. . Kendimi çaresiz hissettim. Yeni ve şık API'lerle oynamak için gerçekten gerekecek ilk sefer mi bu? - Ağlamayı hızla bıraktım ve , ve diğer birkaç JWT kimlik doğrulama kütüphanesini Edge Runtime'a uyarlayarak tersine mühendislik yapmaya başladım. En hafif, yapılandırılması en kolay ve geleceğe yönelik kimlik doğrulama kitaplığını oluşturmayı hedefleyerek önceki kimlik doğrulama kitaplıklarında karşılaştığım tüm sorunları ele alma fırsatını değerlendirdim. Edge Runtime'ın Edge Runtime Web Crypto API'leriyle Ben mahkumdum beklemem Hayır. İzlenen tencere asla kaynamaz. next-firebase-auth firebase-admin Yaklaşık iki hafta sonra sürümü doğdu. Bu, kavramın sağlam bir kanıtıydı ancak sürümünü kullanmak istemezsiniz. Güven bana. next-firebase-auth-edge'in 0.0.1 0.0.1 Nasıl gidiyor Yaklaşık , , ve dünya çapındaki harika geliştiricilerden gelen ardından kütüphanenin, diğer benliğimin onay için bana katıldığı bir aşamaya ulaştığını duyurmaktan heyecan duyuyorum. iki yıl sonra 372 taahhüt 110 çözülmüş sorun çok sayıda paha biçilmez geri bildirimin Bu kılavuzda, kimliği doğrulanmış Next.js uygulamasını sıfırdan oluşturmak için sürümünü kullanacağım. Yeni bir Firebase projesi ve Next.js uygulamasının oluşturulmasıyla başlayarak, ardından ve kitaplıklarıyla entegrasyonla başlayarak her adımı ayrıntılı olarak ele alacağız. Bu eğitimin sonunda, her şeyin hem yerel olarak hem de üretime hazır ortamda çalıştığını doğrulamak için uygulamayı Vercel'e dağıtacağız. 1.4.1 next-firebase-auth-edge'in next-firebase-auth-edge firebase/auth Firebase'i kurma Bu bölümde Firebase Authentication'ı henüz kurmadığınız varsayılmaktadır. Aksi takdirde bir sonraki bölüme geçmekten çekinmeyin. gidip Firebase Konsoluna bir proje oluşturalım Proje oluşturulduktan sonra Firebase Authentication'ı etkinleştirelim. Konsolu açın ve takip edin ve yöntemini etkinleştirin. Uygulamamızda destekleyeceğimiz yöntem budur Oluştur > Kimlik Doğrulama > Oturum açma yöntemini E-posta ve şifre İlk oturum açma yönteminizi etkinleştirdikten sonra, projeniz için Firebase Kimlik Doğrulaması etkinleştirilmelidir ve alabilirsiniz. Web API Anahtarınızı Proje Ayarları'ndan API anahtarını kopyalayın ve güvende tutun. Şimdi bir sonraki sekme olan açalım ve not edelim. Daha sonra ihtiyacımız olacak. Bulut Mesajlaşma'yı Gönderen Kimliğini Son fakat en az değil, hizmet hesabı kimlik bilgilerini oluşturmamız gerekiyor. Bunlar, uygulamanızın Firebase hizmetlerinize tam erişim sağlamasına olanak tanır. gidin ve tıklayın. Bu, hizmet hesabı kimlik bilgilerini içeren bir dosyasını indirecektir. Bu dosyayı bilinen bir konuma kaydedin. Proje Ayarları > Hizmet hesapları'na Yeni özel anahtar oluştur'a .json Next.js uygulamasını Firebase Authentication ile entegre etmeye hazırız Bu kadar! Next.js uygulamasını sıfırdan oluşturma Bu kılavuzda ve kurulu olduğu varsayılmaktadır. Bu eğitimde kullanılan komutlar, en son LTS ile doğrulanmıştır. Terminalde çalıştırarak düğüm sürümünü doğrulayabilirsiniz. Node.js sürümleri arasında hızla geçiş yapmak için gibi araçları da kullanabilirsiniz. Node.js npm'nin Node.js v20 node -v NVM Next.js uygulamasını CLI ile kurma Favori terminalinizi açın, projeler klasörünüze gidin ve çalıştırın npx create-next-app@latest Basit tutmak için varsayılan yapılandırmayı kullanalım. Bu, ve kullanacağımız anlamına gelir TypeScript tailwind ✔ What is your project named? … my-app ✔ Would you like to use TypeScript? … Yes ✔ Would you like to use ESLint? … Yes ✔ Would you like to use Tailwind CSS? … Yes ✔ Would you like to use `src/` directory? … No ✔ Would you like to use App Router? (recommended) … Yes ✔ Would you like to customize the default import alias (@/*)? … No Projenin kök dizinine gidelim ve tüm bağımlılıkların kurulu olduğundan emin olalım cd my-app npm install Her şeyin beklendiği gibi çalıştığını doğrulamak için Next.js dev sunucusunu komutuyla başlatalım. dosyasını açtığınızda, aşağıdakine benzer Next.js karşılama sayfasını görmelisiniz: npm run dev http://localhost:3000 Ortam değişkenlerini hazırlama Firebase ile entegrasyona başlamadan önce Firebase yapılandırmamızı depolamak ve okumak için güvenli bir yola ihtiyacımız var. Neyse ki Next.js yerleşik desteğiyle birlikte geliyor. dotenv Favori kod düzenleyicinizi açın ve proje klasörüne gidin Projenin kök dizininde dosyasını oluşturalım ve onu aşağıdaki ortam değişkenleriyle dolduralım: .env.local FIREBASE_ADMIN_CLIENT_EMAIL=... FIREBASE_ADMIN_PRIVATE_KEY=... AUTH_COOKIE_NAME=AuthToken AUTH_COOKIE_SIGNATURE_KEY_CURRENT=secret1 AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS=secret2 USE_SECURE_COOKIES=false NEXT_PUBLIC_FIREBASE_PROJECT_ID=... NEXT_PUBLIC_FIREBASE_API_KEY=AIza... NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=....firebaseapp.com NEXT_PUBLIC_FIREBASE_DATABASE_URL=....firebaseio.com NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=... Lütfen ön ekine sahip değişkenlerin istemci tarafı paketinde mevcut olacağını unutmayın. kurmak için bunlara ihtiyacımız olacak NEXT_PUBLIC_ Firebase Auth Client SDK'yı , ve , hizmet hesabı kimlik bilgileri oluşturulduktan sonra indirilen dosyasından alınabilir. NEXT_PUBLIC_FIREBASE_PROJECT_ID FIREBASE_ADMIN_CLIENT_EMAIL FIREBASE_ADMIN_PRIVATE_KEY .json kullanıcı kimlik bilgilerini saklamak için kullanılan çerezin adı olacaktır AUTH_COOKIE_NAME ve , kimlik bilgilerini imzalayacağımız sırlardır AUTH_COOKIE_SIGNATURE_KEY_CURRENT AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS , genel sayfasından alınan NEXT_PUBLIC_FIREBASE_API_KEY Proje Ayarları Web API Anahtarıdır .firebaseapp.com NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN proje kimliğinizdir .firebaseio.com NEXT_PUBLIC_FIREBASE_DATABASE_URL proje kimliğinizdir , > sayfasından edinilebilir NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID Proje Ayarları Bulut Mesajlaşma yerel geliştirme için kullanılmayacak ancak uygulamamızı Vercel'e dağıttığımızda kullanışlı olacak USE_SECURE_COOKIES Firebase Authentication ile entegrasyon ve ilk yapılandırmanın kurulması next-firebase-auth-edge çalıştırarak kitaplığı projenin bağımlılıklarına ekleyin. npm install next-firebase-auth-edge@^1.4.1 Proje konfigürasyonumuzu kapsüllemek için dosyasını oluşturalım. Zorunlu değildir ancak kod örneklerini daha okunaklı hale getirecektir. config.ts Bu değerleri düşünmek için çok fazla zaman harcamayın. İlerledikçe bunları daha ayrıntılı olarak açıklayacağız. export const serverConfig = { cookieName: process.env.AUTH_COOKIE_NAME!, cookieSignatureKeys: [process.env.AUTH_COOKIE_SIGNATURE_KEY_CURRENT!, process.env.AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS!], cookieSerializeOptions: { path: "/", httpOnly: true, secure: process.env.USE_SECURE_COOKIES === "true", sameSite: "lax" as const, maxAge: 12 * 60 * 60 * 24, }, serviceAccount: { projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID!, clientEmail: process.env.FIREBASE_ADMIN_CLIENT_EMAIL!, privateKey: process.env.FIREBASE_ADMIN_PRIVATE_KEY?.replace(/\\n/g, "\n")!, } }; export const clientConfig = { projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY!, authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL, messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }; Ara Yazılım Ekleme Projenin kökünde dosyasını oluşturun ve aşağıdakini yapıştırın middleware.ts import { NextRequest } from "next/server"; import { authMiddleware } from "next-firebase-auth-edge"; import { clientConfig, serverConfig } from "./config"; export async function middleware(request: NextRequest) { return authMiddleware(request, { loginPath: "/api/login", logoutPath: "/api/logout", apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, cookieSerializeOptions: serverConfig.cookieSerializeOptions, serviceAccount: serverConfig.serviceAccount, }); } export const config = { matcher: [ "/", "/((?!_next|api|.*\\.).*)", "/api/login", "/api/logout", ], }; İster inanın ister inanmayın ama Uygulamamızın sunucusunu Firebase Authentication ile entegre ettik. Gerçekten kullanmaya başlamadan önce konfigürasyonu biraz açıklayalım: , authMiddleware'e uç noktasını göstermesi talimatını verecektir. Bu uç nokta * üstbilgisiyle çağrıldığında, imzalı içeren HTTP(S)-Only üstbilgisiyle yanıt verir. loginPath GET /api/login Authorization: Bearer ${idToken} özel ve yenileme belirteçlerini Set-Cookie * bulunan işleviyle alınır. Bu konuda daha sonra daha fazla bilgi vereceğiz. idToken Firebase Client SDK'da getIdToken Benzer şekilde , ara yazılıma öğesini göstermesi talimatını verir, ancak herhangi bir ek başlık gerektirmez. Çağrıldığında, kimlik doğrulama çerezlerini tarayıcıdan kaldırır. logoutPath GET /api/logout Web API Anahtarıdır. Middleware bunu özel belirteci yenilemek ve kimlik bilgilerinin süresi dolduktan sonra kimlik doğrulama çerezlerini sıfırlamak için kullanır. apiKey ve uç noktaları tarafından ayarlanan ve kaldırılan çerezin adıdır cookieName /api/login /api/logout kullanıcı kimlik bilgilerinin imzalandığı gizli anahtarların listesi. Kimlik bilgileri her zaman listedeki ilk anahtarla imzalanacaktır, bu nedenle en az bir değer sağlamanız gerekir. gerçekleştirmek için birden fazla anahtar sağlayabilirsiniz cookieSignatureKeys Anahtar rotasyonu başlığını oluştururken aktarılan seçeneklerdir. Daha fazla bilgi için README bakın cookieSerializeOptions Set-Cookie çereze çerezine kütüphaneye Firebase hizmetlerinizi kullanma yetkisi verir. serviceAccount Eşleştirici, Next.js sunucusuna Middleware'i , ve veya dosya veya API çağrısı olmayan diğer yollara karşı çalıştırması talimatını verir. /api/login /api/logout / export const config = { matcher: [ "/", "/((?!_next|api|.*\\.).*)", "/api/login", "/api/logout", ], }; Neden tüm . /api/* çağrıları için ara yazılımı etkinleştirmediğimizi merak ediyor olabilirsiniz Yapabiliriz, ancak kimlik doğrulaması yapılmamış çağrıları API rota işleyicisinin kendisinde işlemek iyi bir uygulamadır. Bu, bu eğitimin kapsamının biraz dışında, ancak ilgileniyorsanız bana bildirin, ben de bazı örnekler hazırlayayım! Gördüğünüz gibi konfigürasyon düzeydedir ve amacı açıkça tanımlanmıştır. Şimdi ve uç noktalarımızı çağırmaya başlayalım. minimum /api/login /api/logout Güvenli bir ana sayfa oluşturma İşleri olabildiğince basit hale getirmek için varsayılan Next.js ana sayfasını temizleyelim ve onu kişiselleştirilmiş içerikle değiştirelim açın ve şunu yapıştırın: ./app/page.tsx import { getTokens } from "next-firebase-auth-edge"; import { cookies } from "next/headers"; import { notFound } from "next/navigation"; import { clientConfig, serverConfig } from "../config"; export default async function Home() { const tokens = await getTokens(cookies(), { apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, serviceAccount: serverConfig.serviceAccount, }); if (!tokens) { notFound(); } return ( Super secure home page Only {tokens?.decodedToken.email} holds the magic key to this kingdom!

); } Bunu parça parça parçalayalım. işlevi, kullanıcı kimlik bilgilerini doğrulamak ve çıkarmak için tasarlanmıştır getTokens çerezlerden const tokens = await getTokens(cookies(), { apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, serviceAccount: serverConfig.serviceAccount, }); Kullanıcının kimliği doğrulanmadıysa veya iki özellik içeren bir nesne varsa ile çözümlenir: null API isteklerini harici arka uç hizmetlerine yetkilendirmek için kullanabileceğiniz idToken olan . Bu biraz kapsam dışı ama kütüphanenin dağıtılmış hizmet mimarisini mümkün kıldığını belirtmekte fayda var. tüm platformlardaki tüm resmi Firebase kitaplıklarıyla uyumludur ve kullanıma hazırdır. string token token adından da anlaşılacağı gibi, e-posta adresi, profil resmi ve de dahil olmak üzere kullanıcıyı tanımlamak için gereken tüm bilgileri içeren ve ayrıca rollere ve izinlere göre erişimi kısıtlamamıza olanak tanıyan kodu çözülmüş sürümüdür. decodedToken özel talepler token aldıktan sonra, sayfanın yalnızca kimliği doğrulanmış kullanıcılar tarafından erişilebilir olduğundan emin olmak için işlevini kullanırız tokens next/navigation notFound if (!tokens) { notFound(); } Son olarak, bazı temel, kişiselleştirilmiş kullanıcı içeriklerini oluşturuyoruz Super secure home page Only {tokens?.decodedToken.email} holds the magic key to this kingdom!"

Hadi çalıştıralım. Geliştirme sunucunuzu kapatmış olmanız durumunda, çalıştırmanız yeterlidir. npm run dev adresine erişmeye çalıştığınızda http://localhost:3000/ 404: Bu sayfa bulunamadı hatasını görmelisiniz. Başarı! Sırlarımızı meraklı gözlerden koruduk! yükleme ve Firebase Client SDK'yı başlatma firebase Projenin kök dizininde çalıştırın npm install firebase İstemci SDK'sı yüklendikten sonra proje kök dizininde dosyasını oluşturun ve aşağıdakini yapıştırın firebase.ts import { initializeApp } from 'firebase/app'; import { clientConfig } from './config'; export const app = initializeApp(clientConfig); Bu, Firebase İstemci SDK'sını başlatacak ve istemci bileşenleri için uygulama nesnesini açığa çıkaracaktır Kayıt sayfası oluşturma Eğer kimse göremiyorsa, süper güvenli bir ana sayfaya sahip olmanın ne anlamı var? İnsanların uygulamamıza girmesine izin vermek için basit bir kayıt sayfası oluşturalım. altında yeni ve şık bir sayfa oluşturalım ./app/register/page.tsx "use client"; import { FormEvent, useState } from "react"; import Link from "next/link"; import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"; import { app } from "../../firebase"; import { useRouter } from "next/navigation"; export default function Register() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [confirmation, setConfirmation] = useState(""); const [error, setError] = useState(""); const router = useRouter(); async function handleSubmit(event: FormEvent) { event.preventDefault(); setError(""); if (password !== confirmation) { setError("Passwords don't match"); return; } try { await createUserWithEmailAndPassword(getAuth(app), email, password); router.push("/login"); } catch (e) { setError((e as Error).message); } } return ( Pray tell, who be this gallant soul seeking entry to mine humble abode? Your email setEmail(e.target.value)} id="email" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required /> Password setPassword(e.target.value)} id="password" placeholder="••••••••" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required /> Confirm password setConfirmation(e.target.value)} id="confirm-password" placeholder="••••••••" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required /> {error && ( {error} )} Create an account Already have an account?{" "} Login here

); } Biliyorum. Çok fazla metin var ama sabırlı olun. kayıt sayfasının istemci tarafı API'lerini kullanacağını belirtmek için "use client"; const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [confirmation, setConfirmation] = useState(""); const [error, setError] = useState(""); Daha sonra form durumumuzu korumak için bazı değişkenler ve ayarlayıcılar tanımlarız. const router = useRouter(); async function handleSubmit(event: FormEvent) { event.preventDefault(); setError(""); if (password !== confirmation) { setError("Passwords don't match"); return; } try { await createUserWithEmailAndPassword(getAuth(app), email, password); router.push("/login"); } catch (e) { setError((e as Error).message); } } Burada form gönderme mantığımızı tanımlıyoruz. Öncelikle ve eşit olup olmadığını doğrularız, aksi halde hata durumunu güncelleriz. Değerler geçerli ise adresinden ile kullanıcı hesabı oluşturuyoruz. Bu adım başarısız olursa (örneğin e-postanın alınması), hatayı güncelleyerek kullanıcıyı bilgilendiririz. password confirmation firebase/auth createUserWithEmailAndPassword Her şey yolunda giderse kullanıcıyı sayfasına yönlendiririz. Muhtemelen şu anda kafanız karışıktır ve bunda haklısınız. sayfası henüz mevcut değil. Sadece bundan sonra olacaklara hazırlanıyoruz. /login /login ziyaret ettiğinizde sayfa kabaca şöyle görünmelidir: http://localhost:3000/register adresini Giriş sayfası oluşturma Artık kullanıcılar kaydolabildiğine göre kimliklerini kanıtlamalarına izin verin altında bir giriş sayfası oluşturun ./app/login/page.tsx "use client"; import { FormEvent, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { getAuth, signInWithEmailAndPassword } from "firebase/auth"; import { app } from "../../firebase"; export default function Login() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(""); const router = useRouter(); async function handleSubmit(event: FormEvent) { event.preventDefault(); setError(""); try { const credential = await signInWithEmailAndPassword( getAuth(app), email, password ); const idToken = await credential.user.getIdToken(); await fetch("/api/login", { headers: { Authorization: `Bearer ${idToken}`, }, }); router.push("/"); } catch (e) { setError((e as Error).message); } } return ( Speak thy secret word! Your email setEmail(e.target.value)} id="email" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required /> Password setPassword(e.target.value)} id="password" placeholder="••••••••" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required /> {error && ( {error} )} Enter Don&apos;t have an account?{" "} Register here

); } Gördüğünüz gibi kayıt sayfasına oldukça benziyor. Önemli kısma odaklanalım: async function handleSubmit(event: FormEvent) { event.preventDefault(); setError(""); try { const credential = await signInWithEmailAndPassword( getAuth(app), email, password ); const idToken = await credential.user.getIdToken(); await fetch("/api/login", { headers: { Authorization: `Bearer ${idToken}`, }, }); router.push("/"); } catch (e) { setError((e as Error).message); } } gerçekleştiği yer orası. Kullanıcının almak için kullanıyoruz. Bütün sihrin idToken firebase/auth signInEmailAndPassword Daha sonra ara yazılımın açığa çıkardığı uç noktasını çağırıyoruz. Bu uç nokta, tarayıcı çerezlerimizi kullanıcı kimlik bilgileriyle günceller. /api/login Son olarak çağırarak kullanıcıyı ana sayfaya yönlendiriyoruz. router.push("/"); Giriş sayfası kabaca bu şekilde görünmelidir Haydi test edelim! adresine gidin, bir hesap oluşturmak için rastgele bir e-posta adresi ve şifre girin. Bu kimlik bilgilerini sayfasında kullanın. tıkladıktan sonra yönlendirilmelisiniz. http://localhost:3000/register http://localhost:3000/login Enter'a süper güvenli ana sayfaya Sonunda , ana sayfamızı görebildik! Fakat bekle! Nasıl çıkacağız? kendi kişisel ultra güvenli Kendimizi sonsuza kadar (veya 12 gün) dünyadan mahrum kalmamak için çıkış butonu eklememiz gerekiyor. Başlamadan önce Firebase Client SDK'yı kullanarak oturumumuzu kapatabilecek bir oluşturmamız gerekiyor. istemci bileşeni altında yeni bir dosya oluşturalım ./app/HomePage.tsx "use client"; import { useRouter } from "next/navigation"; import { getAuth, signOut } from "firebase/auth"; import { app } from "../firebase"; interface HomePageProps { email?: string; } export default function HomePage({ email }: HomePageProps) { const router = useRouter(); async function handleLogout() { await signOut(getAuth(app)); await fetch("/api/logout"); router.push("/login"); } return ( Super secure home page Only {email} holds the magic key to this kingdom!

Logout ); } Fark etmiş olabileceğiniz gibi bu, dosyamızın biraz değiştirilmiş versiyonudur. yalnızca ve içinde çalıştığından, ve istemci bağlamında çalıştırılması gerektiğinden, ayrı bir istemci bileşeni oluşturmamız gerekiyordu. Biraz karmaşık biliyorum ama aslında oldukça güçlü. Daha sonra açıklayacağım. ./app/page.tsx getTokens sunucu bileşenleri API rota işleyicileri signOut useRouter Oturum kapatma işlemine odaklanalım const router = useRouter(); async function handleLogout() { await signOut(getAuth(app)); await fetch("/api/logout"); router.push("/login"); } Öncelikle Firebase Client SDK'dan çıkış yapıyoruz. Daha sonra ara yazılımın açığa çıkardığı uç noktasını çağırıyoruz. Kullanıcıyı sayfasına yönlendirerek bitiriyoruz. /api/logout /login Sunucu ana sayfamızı güncelleyelim. adresine gidin ve aşağıdakini yapıştırın ./app/page.tsx import { getTokens } from "next-firebase-auth-edge"; import { cookies } from "next/headers"; import { notFound } from "next/navigation"; import { clientConfig, serverConfig } from "../config"; import HomePage from "./HomePage"; export default async function Home() { const tokens = await getTokens(cookies(), { apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, serviceAccount: serverConfig.serviceAccount, }); if (!tokens) { notFound(); } return ; } Artık sunucu bileşenimiz yalnızca kullanıcı belirteçlerini almak ve bunu istemci bileşenine aktarmaktan sorumludur. Bu aslında oldukça yaygın ve kullanışlı bir kalıptır. Home HomePage Bunu test edelim: İşte! Artık kendi isteğimizle uygulamaya giriş ve çıkış yapabiliyoruz. Mükemmel! Yoksa öyle mi? Kimliği doğrulanmamış kullanıcı adresini açarak ana sayfaya girmeye çalıştığında http://localhost:3000/ 404: Bu sayfa bulunamadı. Ayrıca, kimliği doğrulanmış kullanıcılar ve sayfalarına, çıkış yapmak zorunda kalmadan erişmeye devam edebilir. , http://localhost:3000/register http://localhost:3000/login Daha iyisini yapabiliriz. Görünüşe göre bazı yönlendirme mantığı eklememiz gerekiyor. Bazı kuralları tanımlayalım: Kimliği doğrulanmış kullanıcı ve sayfalarına erişmeye çalıştığında, onları adresine yönlendirmeliyiz /register /login / Kimliği doğrulanmamış kullanıcı sayfaya erişmeye çalıştığında, onları yönlendirmeliyiz / /login Middleware, Next.js uygulamalarındaki yönlendirmeleri işlemenin en iyi yollarından biridir. Neyse ki , çok çeşitli yeniden yönlendirme senaryolarını yönetmek için çok sayıda seçeneği ve yardımcı işlevi destekler. authMiddleware dosyasını açıp bu güncel sürümü yapıştıralım. middleware.ts import { NextRequest, NextResponse } from "next/server"; import { authMiddleware, redirectToHome, redirectToLogin } from "next-firebase-auth-edge"; import { clientConfig, serverConfig } from "./config"; const PUBLIC_PATHS = ['/register', '/login']; export async function middleware(request: NextRequest) { return authMiddleware(request, { loginPath: "/api/login", logoutPath: "/api/logout", apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, cookieSerializeOptions: serverConfig.cookieSerializeOptions, serviceAccount: serverConfig.serviceAccount, handleValidToken: async ({token, decodedToken}, headers) => { if (PUBLIC_PATHS.includes(request.nextUrl.pathname)) { return redirectToHome(request); } return NextResponse.next({ request: { headers } }); }, handleInvalidToken: async (reason) => { console.info('Missing or malformed credentials', {reason}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); }, handleError: async (error) => { console.error('Unhandled authentication error', {error}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); } }); } export const config = { matcher: [ "/", "/((?!_next|api|.*\\.).*)", "/api/login", "/api/logout", ], }; Bu olmalı. Tüm yönlendirme kurallarını uyguladık. Hadi bunu parçalayalım. const PUBLIC_PATHS = ['/register', '/login']; handleValidToken: async ({token, decodedToken}, headers) => { if (PUBLIC_PATHS.includes(request.nextUrl.pathname)) { return redirectToHome(request); } return NextResponse.next({ request: { headers } }); }, isteğe geçerli kullanıcı kimlik bilgileri eklendiğinde çağrılır; kullanıcının kimliği doğrulanır. İlk olarak nesnesi ve ikinci argüman olarak ile çağrılır. ile çözülmesi gerekir. handleValidToken tokens Değiştirilmiş İstek Başlıkları NextResponse olarak basitleştirilebilecek bir nesneyi döndüren bir yardımcı işlevdir. next-firebase-auth-edge redirectToHome NextResponse.redirect(new URL(“/“)) kontrol ederek, kimliği doğrulanmış kullanıcının veya sayfasına erişmeye çalışıp çalışmadığını doğrularız ve bu durumda ana sayfaya yönlendirme yaparız. PUBLIC_PATHS.includes(request.nextUrl.pathname) /login /register handleInvalidToken: async (reason) => { console.info('Missing or malformed credentials', {reason}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); }, bir şey olduğunda çağrılır. Bu beklenen olaylardan biri, kullanıcının uygulamanızı ilk kez başka bir cihazdan görmesi veya kimlik bilgilerinin süresi dolduktan sonra görmesidir. handleInvalidToken beklenen Kimliği doğrulanmamış kullanıcı için çağrıldığını bildiğimizden ikinci kurala geçebiliriz: Kimliği doğrulanmamış kullanıcı sayfaya , onları . handleInvalidToken / erişmeye çalıştığında /login yönlendirmeliyiz Karşılanması gereken başka bir koşul olmadığından, sadece olarak basitleştirilebilecek sonucunu döndürürüz. Ayrıca kullanıcının yönlendirme döngüsüne düşmemesini de sağlar. NextResponse.redirect(new URL(“/login”)) redirectToLogin Son olarak, handleError: async (error) => { console.error('Unhandled authentication error', {error}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); } aksine, bir şey olduğunda ve muhtemelen araştırılması gerektiğinde çağrılır. açıklamalarıyla birlikte olası hataların bir listesini bulabilirsiniz. handleInvalidToken beklenmedik* handleError Dokümantasyonda Bir hata durumunda bu durumu günlüğe kaydediyor ve kullanıcıyı güvenli bir şekilde giriş sayfasına yönlendiriyoruz. * Google ortak anahtarları güncellendikten sonra hatasıyla çağrılabilir. handleError INVALID_ARGUMENT Bu bir anahtar döndürme şeklidir ve bir durumdur. beklenen Daha fazla bilgi için bu Github sayısına bakın İşte bu kadar. Nihayet. Web uygulamamızdan çıkış yapalım ve adresini açalım. sayfasına yönlendirilmeliyiz. http://localhost:3000/ /login Tekrar giriş yapalım ve girmeyi deneyelim. sayfasına yönlendirilmeliyiz. http://localhost:3000/login / Sorunsuz kullanıcı deneyimi sağlamakla kalmadık. yalnızca Uygulamanın sunucusunda çalışan ve ek istemci tarafı kodu sağlamayan kitaplıktır. Ortaya çıkan paket gerçekten düzeydedir. Mükemmel diye buna derim. next-firebase-auth-edge sıfır paket boyutlu minimum Uygulamamız artık hem Sunucu hem de İstemci bileşenlerinde Firebase Authentication ile tamamen entegredir. Next.js'nin tüm potansiyelini ortaya çıkarmaya hazırız! Uygulamanın kaynak kodu konumunda bulunabilir next-firebase-auth-edge/examples/next-typescript-minimal Sonsöz Bu kılavuzda yeni Next.js uygulamasını Firebase Authentication ile entegre etmeyi inceledik. Oldukça kapsamlı olmasına rağmen makale, kimlik doğrulama akışının parola sıfırlama formu veya e-posta ve parola dışındaki oturum açma yöntemleri gibi bazı önemli kısımlarını atladı. Kitaplıkla ilgileniyorsanız, tam teşekküllü önizleyebilirsiniz. next-firebase-auth-edge başlangıç demo sayfasını , , ve daha fazlasını içerir Firestore entegrasyonu Sunucu Eylemleri Uygulama Kontrolü desteği Kütüphane tonlarca örnek içeren sağlar özel bir dokümantasyon sayfası Makaleyi beğendiyseniz, deposuna yıldız eklemekten memnuniyet duyarım. Şerefe! 🎉 next-firebase-auth-edge Bonus – Uygulamayı Vercel'e dağıtma Bu bonus kılavuz size Next.js uygulamanızı Vercel'e nasıl dağıtacağınızı öğretecek Git deposu oluşturma Vercel'e dağıtım yapabilmek için yeni uygulamanız için bir depo oluşturmanız gerekecektir. adresine gidin ve yeni bir depo oluşturun. https://github.com/ bizim için zaten yerel bir git deposu başlattı, bu nedenle projenizin kök klasörünü takip etmeniz ve çalıştırmanız yeterli: create-next-app git add --all git commit -m "first commit" git branch -M main git remote add origin git@github.com:path-to-your-new-github-repository.git git push -u origin main Yeni Vercel projesi ekleniyor adresine gidin ve Github hesabınızla oturum açın https://vercel.com/ Giriş yaptıktan sonra Vercel'in Genel Bakış sayfasına gidin ve tıklayın. Yeni Ekle > Proje'ye Yeni oluşturduğumuz Github deposunun yanındaki tıklayın. Henüz konuşlandırmayın. İçe Aktar'a Dağıtımdan önce proje yapılandırmasını sağlamamız gerekiyor. Bazı ortam değişkenlerini ekleyelim: Vercel varsayılan olarak HTTPS kullandığından olarak ayarlamayı unutmayın. USE_SECURE_COOKIES true Artık tıklamaya hazırız Dağıt'a Bir veya iki dakika bekleyin; uygulamanıza şuna benzer bir URL ile erişebilmeniz gerekir: https://next-typescript-minimal-xi.vercel.app/ Tamamlamak. Eminim bu kadar kolay olmasını beklemiyordun. Rehberi beğendiyseniz, deposunun başrolde yer almasını memnuniyetle karşılarım. bir sonraki firebase-auth-edge Ayrıca görüşlerinizi yorumlarda bana bildirebilirsiniz. Şerefe! 🎉