Bolt.New と Logto を使ってカスタムログインフローを素早く構築する方法
Bolt.new を使って Logto 認証を備えたフルスタックアプリを構築する方法を学べます。サインインフローの設定から、フローティングログインパネルの作成、ソーシャルログインの有効化まで、本ガイドでセットアップとカスタマイズの両方を紹介します。
Product & Design
Bolt.New とは
Bolt.new は、即時にフルスタックWebアプリケーションを生成・実行できるブラウザベースのツールです。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 は VS Code ワークフローを AI で向上し、既存環境でのコード編集や生成を支援します。
- Bolt.new はプロンプトやテンプレートに基づいて最初から稼働するアプリを作り、そのまま WebContainers 上でブラウザ内実行します。
ローカルツールやリモートクラウドVMへの依存はありません。すべてがインブラウザで動作し、Node.js のネイティブサポート、パッケージ管理、フルスタック開発が可能です。そのため、AI や SaaS プロジェクト領域での高速プロトタイピングやローカルファーストな実験に特に向いています。
Bolt.new の対象ユーザー
Bolt.new は以下のように、しばしばゼロから新しいものを作る開発者向けに設計されています：
- プロダクトアイデアの検証を行うインディーハッカー
- ワークフローのテストやモデル埋め込みを行う AI 開発者
- MVPのプロトタイピングをするファウンダー
- 社内ツールやデモを作るエンジニア
これ らのユーザーは通常、モダンなWebスタックに慣れており、高速・クリーンで無駄のないツールを好みます。Bolt.new はビジュアルサイトビルダーやチュートリアル駆動型プラットフォームではありません。React とフルスタック開発の基礎知識を要求しますが、そのぶんセットアップの障壁を取り除いています。
Bolt.new の歴史と進化
Bolt.new は StackBlitz チームによって生まれました。StackBlitzは 2017 年、Eric Simons と Albert Pai によって創業。StackBlitz は 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 の構築をエージェントに依頼しました。
手順に従い、2 つの主要な情報を提供する必要がありました：
Logto エンドポイントApp ID
このアプリはシングルページ React アプリなので、アプリシークレットは必要ありません。エージェントが他の作業を自動で進めてくれます：最新の Logto React SDK のインストール、認証コンポーネントの設定、全体の結合まで。
セットアップを完了するため、Logto Cloud Console で新規にシングルページアプリを作成し、Logto エンドポイントと App ID を Bolt.new に入力しました。
次に リダイレクト URI とサインアウト後のリダイレクト URI を設定します。
重要な注意点：Bolt.new はブラウザ上動作でローカル IDE ではないため、リダイレクト URI として http://localhost:3000/ は使えません。必ず Bolt.new のブラウザタブに表示されるプレビュー URL を使ってください。
Logto の組込みサインイン体験をカスタマイズ
Logto はコンソールでカスタマイズ可能な組込みのサインインフローを用意しています。まず Sign-in Experience > Sign-in & Sign-up に進み、メール、ユーザー名、電話番号、ソーシャルログイン など希望するサインインメソッドを選択してください。
設定後は、サインインフローを発動させると Logto のホストされたサインインページに設定に沿ってリダイレクトされます。認証の一連の流れは Logto によって処理され、サインイン完了後にあなたのアプリに戻ってきます。
プロダクト上にフローティングログインパネルを作る
ここから一歩進めて、Perplexity のようなよりカスタマイズされたサインイン体験も作りたいと思います。別ページへのリダイレクトではなく、プロダクト UI の上に直にフローティングログインパネルを重ねる方式です。ユーザーはコンテキストの中でそのまま Logto の認証フローを利用できます。
このようなプロンプトを使います：
サインインページをもっと見栄え良くしたいです。画面右下にフローティングパネルとして設置し、ボタンは “Sign In” と “Create Account” の2つだけ。それぞれのボタンは Logto で別々の画面へリダイレクトします。Logto ドキュメントの first-screen experience https://docs.logto.io/end-user-flows/authentication-parameters/first-screen を参考にしてください。
良いところは “Sign In” をクリックすると即座にサインインページへ、“Create Account” をクリックするとアカウント作成画面に直接移ることです。
ソーシャルログインフローの追加
Logto の direct sign-in ドキュメント と「ソーシャルサインインフローを追加して」という旨のプロンプトをエージェントに与えることで、Logto 標準のランディング画面をスキップできます。たとえば Google サインイン ボタンをクリックすると即座に Google 認証フローが始まり、ユーザーはより高速かつ便利にログインできます。
Logto の次期アップデートでは AI 対応の認証統合をサポート予定
これはあくまで基本例です。Logto は現在、MCP サーバーを開発中で、あなたの IDE 内で直接動作し、Logto コンソールやManagement API との連携が IDE を離れずにできるようになります。
この仕組みにより、以下が可能になります：
- ユーザーの作成・管理
- ログの閲覧・フィルタ
- ログイン・サインアップフローの設定
- APIリソース・パーミッション・ロールの定義
- アプリやアクセス設定の管理
- その他
ローカルツール・AI・Logto インフラを連携させることで、認証はもはや面倒な統合作業ではなく、自然な開発フローの一部になります。