Bolt.New ve Logto Kullanarak Özel Giriş Akışlarınızı Hızla Oluşturun
Bolt.new'u kullanarak Logto kimlik doğrulamasıyla tam yığın bir uygulama nasıl oluşturulacağını öğrenin. Giriş akışlarının yapılandırılmasından, kayan bir giriş paneli oluşturmaya ve sosyal girişleri etkinleştirmeye kadar bu rehber, hem kurulum hem de özelleştirmeyi kapsıyor.
Product & Design
Bolt.New Nedir
Bolt.new, anında tam yığın web uygulamaları oluşturup çalıştırmak için tarayıcı tabanlı bir araçtır. StackBlitz’in WebContainer teknolojisi üzerine inşa edilen bu araç, Next.js (App Router), Tailwind CSS, Supabase, Prisma ve ShadCN UI içeren temiz ve önceden yapılandırılmış bir yığın sunar. Tüm ortam tarayıcıda yerel olarak çalışır, kurulum veya bulut derleme adımları yok, üye olmanız gerekmez.
Mevcut bir proje içinde AI destekli kodlamaya odaklanan araçlardan farklı olarak, Bolt.new geliştirmenin en başına odaklanır. Proje yapısı, bağımlılıklar ve yerel sunucu kurulumunun yükünü ortadan kaldırır, böylece fikrinizden çalışan bir prototipe saniyeler içinde geçebilirsiniz.
Bolt.new, Cursor veya Lovable’dan nasıl farklı?
Cursor ve Lovable gibi araçlar kod editörünüz içinde AI yardımcı pilotlar olarak hizmet verirken, Bolt.new tamamen farklı bir şeye odaklanır: anında tam yığın proje oluşturma ve çalıştırma.
- Cursor, mevcut ortamınızda kod düzenleme veya üretme konusunda VS Code iş akışlarınızı AI ile geliştirir.
- Bolt.new, bir prompt veya şablondan sıfırdan çalışan bir uygulama oluşturur ve WebContainer'lar sayesinde tarayıcıda anında çalıştırır.
Yerel araçlara veya uzak bulut VM’lere bağımlılık yoktur. Her şey, Node.js, paket yönetimi ve tam yığın geliştirme için yerleşik destekle tarayıcıda çalışır. Bu da özellikle hızlı prototipleme ve yerel öncelikli denemeler için, özellikle de AI veya SaaS proje bağlamlarında mükemmel uyumluluk sağlar.
Bolt.new kimler için uygun?
Bolt.new, genellikle sıfırdan başlayan geliştiriciler için tasarlandı:
- Ürün fikirlerini doğrulayan bağımsız girişimciler
- Akışları test eden veya modelleri gömülü olarak çalışan AI geliştiricileri
- MVP’leri prototipleyen kurucular
- İç araçlar veya demolar oluşturan mühendisler
Bu kullanıcılar tipik olarak modern web uygulamaları konusunda rahattır ve hızlı, temiz ve tarafsız araçları tercih ederler. Bolt.new bir görsel site oluşturucu veya eğitim odaklı bir platform değildir. React ve tam yığın geliştirme konusunda temel bilgi varsayar, ancak kurulum zorluklarını ortadan kaldırır.
Bolt.new’un tarihi ve evrimi
Bolt.new, StackBlitz’in arkasındaki ekip tarafından oluşturuldu. StackBlitz, 2017’de Eric Simons ve Albert Pai tarafından kurulan bir şirkettir. StackBlitz, doğrudan tarayıcıda çalışabilen Node.js ortamları sunan tarayıcı yerli bir WebAssembly çalıştırıcısı olan WebContainers’ı öncülük etti. Bu, modern JavaScript uygulamaları geliştirirken bulut sunucuları veya yerel kurulumlara ihtiyacı ortadan kaldırdı.
2023’te StackBlitz bir dönüm noktasına ulaştı. Büyüme yavaşlamıştı ve ekip, WebContainer'ları AI ile birleştirerek doğal dil girdilerinden tam işlevli uygulamalar oluşturabilen daha radikal bir yön keşfetmeye başladı.
Bu deney, Ekim 2024’te genel kullanıma sunulan Bolt.new’e dönüştü. Haftalar içinde, basitliği ve hızı nedeniyle geliştiriciler arasında ciddi ilgi topladı. Araç, StackBlitz’in yıllar boyunca inşa ettiği her şeyi — çalıştırma izolasyonu, hızlı bağımlılık kurulumu ve paylaşılabilir ortamlar —, ortak geliştirme hedeflerini anlayan bir AI arayüzüyle birleştirdi.
Bolt.new, geliştirici araçlarında bir değişimi işaret etti: Artık sadece daha hızlı kod yazmak yerine, zaten çalışan kodla başlama imkanı sunuyordu.
Rehber: Logto ve Bolt.New ile özel bir giriş deneyimi ekleyin
Logto konsolunda bir uygulama kaydedin
Bu örnekte, bir CMS uygulaması oluşturmak için Bolt.new kullandım. Prompt aşamasını atlayıp doğrudan konuya girdim: Ajan’a, kimlik doğrulama sağlayıcısı olarak Logto ile bir CMS oluşturmasını söyledim.
Yönergelere göre, iki temel bilgi sağlamam gerekiyordu:
Logto endpointUygulama Kimliği (App ID)
Uygulama tek sayfalık bir React uygulaması olduğundan uygulama sırrına gerek yoktur. Ajan geri kalan her şeyi halletti: en güncel Logto React SDK’sı’nı kurdu, kimlik doğrulama bileşenlerini ayarladı ve her şeyi bir araya getirdi.
Kurulumu tamamlamak için Logto Cloud Console’a girdim, yeni bir tek sayfa uygulaması oluşturdum ve Logto endpoint ve App ID’yi Bolt.new’a yapıştırdım.
Daha sonra Yönlendirme URI’larını (Redirect URIs) ve Çıkış sonrası yönlendirme URI’larını yapılandırdım.
Önemli bir detay: Bolt.new tarayıcı tabanlı olduğu ve bir yerel IDE olmadığı için, yönlendirme URI’sı olarak http://localhost:3000/ kullanamazsın. Onun yerine, Bolt.new tarayıcı sekmesinde gösterilen önizleme URL’sini kullandığından emin ol.
Logto’nun hazır giriş deneyimini özelleştir
Logto, Konsol üzerinden özelleştirebileceğin yapılandırabilir, önceden hazırlanmış bir giriş akışı sunar. Başlangıç için Sign-in Experience > Sign-in & Sign-up kısmına git, ardından tercih ettiğin giriş yöntemlerini (örneğin e-posta, kullanıcı adı, telefon numarası veya sosyal giriş gibi) seç.
Yapılandırıldıktan sonra, giriş akışını tetiklemek kullanıcıları seçtiğin seçeneklerle Logto’nun barındırdığı giriş sayfasına yönlendirir. Tüm kimlik doğrulama süreci Logto tarafından yönetilir ve kullanıcılar giriş yaptıktan sonra uygulamana geri döner.
Ürünün üzerinde kayan bir giriş paneli oluşturun
Şimdi bir adım daha ileri gitmek ve Perplexity’nin sunduğuna benzer, daha özelleştirilmiş bir giriş deneyimi oluşturmak istiyorum. Ayrı bir sayfaya yönlendirmek yerine kayan bir giriş panelini doğrudan ürün arayüzünün üstüne yerleştireceğim. Bu, kullanıcıları bağlam içinde tutarken hala Logto’nun kimlik doğrulama akışını arka planda kullanmanı sağlar.
Sadece şu prompt’u kullanıyorum:
Giriş sayfasını daha güzel yapmak istiyorum, sadece sağ alt köşede kayan bir panel. İki buton olacak: biri “Giriş Yap”, diğeri “Hesap Oluştur” için. Her buton farklı bir ekrana yönlendirsin ve bu ekranlar Logto tarafından yönetilsin. İlk ekran deneyimi için Logto dökümanındaki yöntemi kullan: https://docs.logto.io/end-user-flows/authentication-parameters/first-screen
Güzel yanı, Giriş Yap’a tıklayınca doğrudan giriş ekranına gidiyor. Eğer Hesap Oluştur’a tıklarsan, doğrudan hesap oluşturma ekranı açılıyor.
Sosyal giriş akışlarını ekle
Ajan’a Logto’nun doğrudan giriş dökümantasyonu ile birlikte “sosyal giriş akışı ekle” şeklinde bir prompt verebilirsin. Böylece varsayılan Logto açılış ekranını atlayabilirsin. Örneğin, Google ile Giriş Yap butonuna tıkladığında, kullanıcılar için daha hızlı ve kullanıcı dostu bir giriş deneyimi sunarak Google kimlik doğrulama akışı anında başlatılır.
Logto'nun yakın zamanda gelecek güncellemesi AI destekli kimlik doğrulama entegrasyonunu destekleyecek
Bu sadece temel bir örnek. Logto şu anda doğrudan IDE’nin içinde çalışan MCP sunucuları geliştiriyor. Bu sayede Logto Konsolu ve Yönetim API ile geliştirme ortamından hiç çıkmadan etkileşimde bulunabiliyorsun.
Bu kurulumla şunları yapabileceksin:
- Kullanıcı oluşturmak ve yönetmek
- Logları görüntülemek ve filtrelemek
- Giriş ve kayıt akışlarını yapılandırmak
- API kaynaklarını, izinleri ve rolleri tanımlamak
- Uygulamaları ve erişim ayarlarını yönetmek
- Ve daha fazlası
Yerel araçları, AI ve Logto altyapısıyla birleştirerek kimlik doğrulama entegre etmek artık zorlu bir adım olmaktan çıkıyor; doğal geliştirme akışının bir parçası haline geliyor.