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 によって設立され、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 エンドポイントアプリ ID
アプリはシングルページ React アプリなのでアプリシークレットは不要です。その他はエージェントが対応してくれました：最新版の Logto React SDK をインストールし、認証コンポーネントを設定して全体を連携させています。
セットアップを完了するため、Logto Cloud Console に行き、新しいシングルページアプリを作成し、Logto エンドポイントとアプリIDを Bolt.new へコピーしました。
さらに リダイレクト URI と Post sign-out リダイレクト URI を設定します。
重要な点：Bolt.new はブラウザベースでローカル IDE ではないため、リダイレクト URI に http://localhost:3000/ を使えません。代わりに Bolt.new ブラウザタブのプレビュー URL を使いましょう。
Logto の組み込みサインイン体験をカスタマイズする
Logto には設定可能な組み込みサインインフローがあります。Console でカスタマイズしましょう。まず 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 のダイレクトサインインドキュメント をエージェントに渡し、「ソーシャルサインインフローを追加して」と依頼できます。こうすれば Logto のデフォルトランディング画面をスキップ可能です。たとえば Google サインインボタンを押すと、即座に Google の認証フローが開始され、ユーザーにとって素早くフレンドリーなログイン体験を提供できます。
Logto の次期アップデートで AI 駆動の認証統合が可能に
これはあくまで基本的な例ですが、Logto は現在 IDE で直接動作する MCP サーバを開発中です。Logto コンソールや Management API とのやりとりが、開発環境を離れることなく可能になります。
この仕組みで、あなたは次のことができます：
- ユーザーの新規作成と管理
- ログの閲覧・検索・フィルタリング
- ログイン・サインアップフローの設定
- API リソース・権限・ロールの定義
- アプリケーション・アクセス設定の管理
- そのほか多数
ローカルツールと AI、Logto のインフラを組み合わせることで、認証統合はもはや面倒な工程ではなく、自然な開発フローの一部となります。