使用 Bolt.New 與 Logto 快速建立自訂登入流程

什麼是 Bolt.New#

Bolt.new 是一款基於瀏覽器的工具，可即時產生並執行全端網頁應用程式。它建立在 StackBlitz 的 WebContainer 技術之上，為開發者提供一個乾淨、預先配置好的技術棧，包括 Next.js（App Router）、Tailwind CSS、Supabase、Prisma 和 ShadCN UI。完整環境直接在瀏覽器本地運行，無需安裝、無需雲端建置步驟，也不需要註冊帳號。

與那些專注於在既有專案中提供 AI 協作編碼的工具不同，Bolt.new 的重點是開發流程的起點。它移除設定專案架構、依賴與本地伺服器的繁瑣，讓你從想法到可運行原型僅需數秒。

Bolt.new 跟 Cursor 或 Lovable 有什麼不同？#

雖然像 Cursor 與 Lovable 這些工具作為編輯器內的 AI 助理，Bolt.new 則專注於完全不同的方向：即時生成並執行全端專案。

• Cursor 透過 AI 強化 VS Code 的工作流程，協助你在現有環境中編輯或生成程式碼。
• Bolt.new 則可以根據提示或範本從零建立可運作的應用程式，並直接在瀏覽器中、透過 WebContainers 立即執行。

完全不依賴本機工具或遠端雲端 VM。所有東西都在瀏覽器內透過原生 Node.js、套件管理以及全端開發完整運行。這使它特別適合快速原型與本地優先實驗，尤其適用於 AI 或 SaaS 專案場景。

Bolt.new 適合誰？#

Bolt.new 專為那些常常需要從零開始的開發者設計，例如：

• 驗證產品想法的獨立駭客
• 測試 AI 工作流程或嵌入模型的開發者
• 打造 MVP 原型的創辦人
• 製作內部工具或者產品演示的工程師

這些使用者通常對現代網頁技術棧很熟悉，偏好快速、乾淨且不受限制的工具。Bolt.new 不是視覺化網站生成器，也不是以教學為主的平台。它假設你已具備 React 與全端開發的實戰經驗，主要目標是移除設置時的阻礙。

Bolt.new 的歷史與演化#

Bolt.new 是由 StackBlitz 團隊開發。StackBlitz 由 Eric Simons 與 Albert Pai 於 2017 年創立，開創了 WebContainers —— 一個能在瀏覽器內原生執行 Node.js 環境的 WebAssembly 執行時。這徹底消除了開發現代 JavaScript 應用時對雲端伺服器或本機安裝的依賴。

2023 年，StackBlitz 遇到關鍵轉折。成長速度放緩，團隊開始探索激進新方向：結合 WebContainers 與 AI，讓自然語言提示也能產生完整可用的應用。

這個實驗最終成為 Bolt.new，並在 2024 年 10 月公開亮相。短短數週便因其簡單與快速在開發者中迅速竄紅。這個工具集成了 StackBlitz 多年來累積的所有成果：執行環境隔離、極速安裝套件與可分享運作環境，並加上對常見開發目標有理解力的 AI 介面。

Bolt.new 標誌著開發工具的新轉變：不再只是讓寫程式更快，而是直接以可運作的程式碼為出發點，且符合開發者的目的。

指南：用 Logto 與 Bolt.New 增加自訂登入體驗#

在 Logto 控制台註冊應用程式#

在這個例子裡，我使用 Bolt.new 建立了一個 CMS 系統。我略過了提示階段，直接請代理人幫我搭一個以 Logto 為驗證機制的 CMS。

根據指示，我只需準備兩個重點資訊：

1. Logto endpoint
2. App ID

由於這是一個單頁 React 應用，不用 App Secret。其餘設定都由代理人自動完成：包含安裝最新版 Logto React SDK、設置驗證元件與串接所有流程。

為了完成設置，我進入 Logto Cloud Console，建立新單頁應用，然後把 Logto endpoint 和 App ID 複製到 Bolt.new 內。

接著設定 Redirect URIs 以及登出後的返回 URI。

一個重要細節：由於 Bolt.new 是在瀏覽器執行，而非本地 IDE，所以不能使用 http://localhost:3000/ 作為 redirect URI。請務必使用 Bolt.new 瀏覽器分頁上顯示的預覽網址。

客製化 Logto 預設登入體驗#

Logto 在 Console 提供可配置的內建登入流程。首先前往 登入體驗 > 註冊 / 登入，再選擇你偏好的登入方式（如電子郵件、使用者名稱、手機號碼，或第三方社群帳號）。

設定完成後，觸發登入流程時會自動導向 Logto 的託管登入頁，並帶有你選好的選項。整個驗證流程由 Logto 處理，用戶登入後自動回到你的 App。

在產品上建立浮動登入面板#

現在我想更進一步，打造和 Perplexity 類似、更為自訂化的登入體驗。不再跳轉到獨立頁面，我會直接在產品介面上方放一個 浮動登入面板，讓用戶能在原有情境下繼續，底層依然由 Logto 負責驗證流程。

我只需下個這樣的提示：

我想讓登入頁的外觀更好看，只要右下角有個浮動小面板。有兩個按鈕：一個是“登入”，另一個是“建立帳號”。每個按鈕各自導向不同畫面，由 Logto 處理。根據 Logto 文件的 first-screen experience 實現：https://docs.logto.io/end-user-flows/authentication-parameters/first-screen

很酷的是，點擊登入會直接到登入頁，點擊建立帳號則直接進帳號建立畫面。

加入社群登入流程#

你可以把 Logto 的直接登入文件 給代理人，同時下指示“新增社群登入流程”。如此就能跳過預設的 Logto 頁面。例如點擊 Google 登入 按鈕時，會直接進入 Google 驗證流程，為用戶提供更快捷、更友善的登入體驗。

Logto 即將支援 AI 驅動身份驗證整合#

這只是最基本的範例。Logto 正在開發 MCP 伺服器，可以直接在你的 IDE 裡運作，讓你在不離開開發環境的情況下與 Logto 控制台及 管理 API 互動。

透過這個配置，你將可以：

1. 建立與管理用戶
2. 檢視與篩選日誌
3. 設定登入及註冊流程
4. 定義 API 資源、權限與角色
5. 管理應用及存取設定
6. 以及更多功能

結合本地工具、AI 與 Logto 的基礎建設，身份驗證已不再是痛苦的集成步驟，而是自然開發流程的一部分。