使用 Bolt.New 與 Logto 快速建立自訂登入流程
了解如何使用 Bolt.new 建構一個具備 Logto 認證的全端應用程式。從設定登入流程、打造浮動登入面板，到啟用社交登入，這份指南涵蓋設置與自訂的每一步。
Product & Design
什麼是 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 立即在瀏覽器內啟動。
不需依賴本地工具或遠端雲端虛擬機。所有東西都在瀏覽器內運行，原生支援 Node.js、套件管理以及全端開發。因此，Bolt.new 特別適合快速原型設計與本地優先的實驗，尤其適用於 AI 或 SaaS 專案。
Bolt.new 適合哪類開發者？
Bolt.new 是為經常需從零開始的開發者而設，例如：
- 印第獨立開發者驗證產品概念
- AI 建造者測試工作流程或嵌入模型
- 創辦人製作 MVP 原型
- 工程師創建內部工具或產品演示
這類用戶通常熟悉現代 Web 技術棧，並偏好快速、單純、不強加觀點的工具。Bolt.new 不是可視化網頁編輯器，也不是教學平台。它假設你已具備 React 與全端開發的基礎，專注於減少設置阻力。
Bolt.new 的歷史和演變
Bolt.new 出自 StackBlitz 團隊，該公司由 Eric Simons 和 Albert Pai 於 2017 年創立。StackBlitz 開創了 WebContainers，這是可於瀏覽器本地運行的 WebAssembly 執行期，能直接執行 Node.js 環境，讓現代 JavaScript 應用開發無需雲端伺服器或本地安裝。
2023 年，StackBlitz 遇上成長瓶頸。團隊決定探索更激進的方向：結合 WebContainers 與 AI，由自然語言提示生成可運作的全功能應用。
這個實驗最終成為 Bolt.new，於 2024 年 10 月正式公開。短短數週內，因其簡潔與速度在開發者間迅速走紅。這個工具整合了 StackBlitz 多年來累積的技術成果，包括執行期隔離、快速依賴安裝、可分享環境與理解常見開發目標的 AI 介面。
Bolt.new 標誌著開發工具的一次變革：開發者不只是寫代碼更快，而是直接從一個已運行起來的專案出發，更符合開發初衷。
指南：用 Logto 和 Bolt.New 快速加上自訂登入體驗
在 Logto 控制台註冊應用
這個示例中，我用了 Bolt.new 建立了一個 CMS 應用。我跳過了提示階段，直接開門見山：讓代理為我建立一個以 Logto 為認證提供者的 CMS。
根據指示，我需要準備兩個關鍵資訊：
Logto endpointApp ID
因為這個 app 是單頁面 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 處理，登入後自動導回你的應用。
在產品介面上建立浮動登入面板
現在我想更進一步，建立一個更自訂化的登入體驗——類似 Perplexity 的作法。不跳轉去其他頁面，而是直接把登入面板浮在產品 UI 上層。這樣使用者留在原本的上下文，同時登入流程仍然交由 Logto 處理。
我只需這一句 prompt：
我想讓登入頁更美觀，簡單底色，再有兩個按鈕：「登入」和「建立帳號」。每個按鈕要導至不同頁面，由 Logto 處理。參照 Logto 說明文件中的第一畫面體驗 https://docs.logto.io/end-user-flows/authentication-parameters/first-screen
這很方便，當你點登入就會直接跳去登入頁，點建立帳號則直接進入帳號建立畫面。
增加社交登入流程
你可以把 Logto 的直接登入說明文檔 給代理，配合一個 prompt，例如「加上社交登入流程」。這樣用戶點 Google 登入 按鈕時會直接走 Google 驗證流程，省去預設的 Logto 首頁，帶來更快更友善的登入體驗。
Logto 即將推出支援 AI 的認證集成
這只是基礎範例。Logto 正在開發MCP 伺服器，直接運行於你的 IDE 內，能讓你無需離開開發環境就能與 Logto 控制台 和 Management API 互動。
利用這個方案，你將能夠：
- 建立和管理用戶
- 查看與篩選日誌
- 配置登入和註冊流程
- 定義 API 資源、權限與角色
- 管理應用及存取設置
- 以及更多
本地工具、AI 與 Logto 基礎設施結合後，認證整合不再痛苦，反而成為你自然開發流程的一部份。