學下點用 Bolt.new 去建立一個有 Logto 認證嘅全端應用。由設定登入流程、建立浮動登入面板，到啟用社交登入，呢篇指南會教晒你點樣設置同自訂。
Bolt.new 係一個以瀏覽器為基礎，能夠即時生成同執行全端網頁應用嘅工具。佢建基於 StackBlitz 嘅 WebContainer 技術，畀開發者一個乾淨、已預設配置好嘅 stack，內含 Next.js（App Router）、Tailwind CSS、Supabase、Prisma 同 ShadCN UI。整個開發環境都係本地喺瀏覽器運行，唔需要安裝，冇雲端建構步驟，亦唔使註冊帳號。
唔同於專注於現有項目內 AI 助手編碼嘅工具，Bolt.new 更加著重於 開發流程嘅起步階段。佢去除咗建立專案結構、裝依賴、開本地 server 嘅繁瑣步驟，令你由 idea 去到可執行原型只需幾秒鐘。
好似 Cursor 同 Lovable 呢啲工具，係喺你嘅編碼器裡面做 AI copilot。但 Bolt.new 專注於另一樣：即時，生成及執行全端項目。
完全唔靠本地工具或者雲端 VM，一切都喺瀏覽器原生支援 Node.js、包管理同全端開發。呢個好適合需要快速試做原型、做 AI 或 SaaS 專案時本地優先嘅實驗。
Bolt.new 為成日由零開始開工嘅開發者設計，例如：
呢班人多數熟悉現代 web stack，鍾意用快、乾淨、唔多規限嘅工具。Bolt.new 唔係 drag-and-drop site builder，亦唔係教學平台。佢預設你懂 React 同全端開發，但幫你省卻 set up 嘅麻煩。
Bolt.new 出自 StackBlitz 團隊，StackBlitz 創立於 2017 年，由 Eric Simons 同 Albert Pai 創辦。StackBlitz 首創咗 WebContainers，即係一個以瀏覽器為主、本地執行 Node.js 環境、用 WebAssembly 來運行嘅技術。令開發現代 JavaScript 應用時唔洗雲 server 或本地安裝。
去到 2023 年，StackBlitz 面對轉捩點。增長放慢，團隊諗咗條新路：將 WebContainers 結合 AI，根據自然語言 prompt 直接產生完整可運行嘅應用。
呢個實驗最終變成 Bolt.new，並於 2024 年 10 月公開發佈。短短幾個星期內因為夠簡單夠快吸引咗唔少 developer。呢個工具將 StackBlitz 幾年來搞掂咗嘅嘢一齊整合晒，包括 runtime 隔離、超快依賴安裝、易 share 嘅開發環境，再加一個懂解你開發目標嘅 AI 介面。
Bolt.new 成為開發工具新潮流：唔單止寫快咗 code，而係直接一開就有得行嘅 code，仲可以切合你想做嘅嘢。
今次示例，我用 Bolt.new 造個 CMS app。我 skip 咗 prompt phase，直接叫 agent 幫我建個用 Logto 做認證嘅 CMS。
根據指引，我需要有兩個關鍵資料：
Logto endpointApp ID因為個 app 係單頁 React 應用，唔需要 app secret。其餘嘢 agent 已經處理晒：安裝最新 Logto React SDK、設定認證 component，全部串埋一齊。
最後一步，我去 Logto Cloud Console 開個新單頁應用，複製返 Logto endpoint 同 App ID 貼去 Bolt.new。
跟住要設定 Redirect URIs 同 Post sign-out redirect URIs。
重要細節：由於 Bolt.new 喺瀏覽器運行冇本地 IDE，你唔可以用 http://localhost:3000/ 做 redirect URI。記住用 Bolt.new 分頁上顯示嗰個預覽 URL。
Logto 提供咗可自訂、預先做好嘅登入流程，你可以喺 Console 度改。入去 Sign-in Experience > Sign-in & Sign-up，揀你想用嘅登入方式（例如 email、用戶名、電話或者社交登入）。
設定好之後，一 call 登入流程就會將用戶跳去 Logto 託管嘅登入頁，並根據你揀咗嘅選項。成個認證流程都由 Logto 處理，簽到之後用戶會返回你個 app。
而家我想再玩多一步，想整一個似 Perplexity 果種自訂嘅登入流程。唔係跳去第二版，而係直接浮動登入面板加喺產品介面上面。咁做，用戶唔會離開內容，同時底層都係用緊 Logto 嘅認證流程。
所以我用咗呢個 prompt：
我想個登入頁靚啲，只係右下角浮動面板。有兩個掣：一個 "登入"、一個 "創建帳號"。每個掣都去唔同頁面，由 Logto 處理。用 Logto 嘅 first-screen experience 設計 https://docs.logto.io/end-user-flows/authentication-parameters/first-screen
好玩嘅係，你撳登入就直接入去登入頁，撳創建帳號就直入註冊畫面。
你可以畀 Logto 直接登錄文檔 參考埋 agent，用 prompt 例如「加埋社交登入流程」。咁就可以 skip 掉 Logto 預設登錄起始頁。例如一撳 Google 登入 掣，就會即時進入 Google 登入流程，幫用戶提速，同時提供更友善嘅登入體驗。
上面只係最基本的例子。Logto 而家做緊 MCP 伺服器，直接喺你 IDE 入面運行，令你可以直接同 Logto Console 及 Management API 互動，無需離開開發環境。
到時你可以：
當本地工具同 AI 配合埋 Logto 基礎建設，認證唔再係苦差，會成為自然一部分開發過程。