日本語
Bolt.New と Logto を使ってカスタムログインフローを素早く構築する方法
Bolt.new を使って Logto 認証を備えたフルスタックアプリを構築する方法を学べます。サインインフローの設定から、フローティングログインパネルの作成、ソーシャルログインの有効化まで、本ガイドでセットアップとカスタマイズの両方を紹介します。
Guamian
Product & Design
Product & Design
Bolt.new を使って Logto 認証を備えたフルスタックアプリを構築する方法を学べます。サインインフローの設定から、フローティングログインパネルの作成、ソーシャルログインの有効化まで、本ガイドでセットアップとカスタマイズの両方を紹介します。
Bolt.new は、即時にフルスタックWebアプリケーションを生成・実行できるブラウザベースのツールです。StackBlitz の WebContainer テクノロジー上に構築されており、Next.js（App Router）、Tailwind CSS、Supabase、Prisma、ShadCN UI を含むクリーンで事前構成されたスタックを開発者に提供します。すべての環境がブラウザ内でローカルに実行され、インストールやクラウドのビルドステップ、サインアップも不要です。
既存プロジェクト内でAI支援コーディングにフォーカスするツールとは異なり、Bolt.new は開発プロセスの始まりに焦点を当てています。プロジェクト構成や依存関係、ローカルサーバーのセットアップの手間を取り除き、アイデアから動くプロトタイプまでを数秒で実現します。
Cursor や Lovable のようなツールはコードエディタ内で AI コパイロットとして働きますが、Bolt.new はまったく別の方向に取り組んでいます：瞬時のフルスタックプロジェクト生成と実行です。
ローカルツールやリモートクラウドVMへの依存はありません。すべてがインブラウザで動作し、Node.js のネイティブサポート、パッケージ管理、フルスタック開発が可能です。そのため、AI や SaaS プロジェクト領域での高速プロトタイピングやローカルファーストな実験に特に向いています。
Bolt.new は以下のように、しばしばゼロから新しいものを作る開発者向けに設計されています：
これらのユーザーは通常、モダンなWebスタックに慣れており、高速・クリーンで無駄のないツールを好みます。Bolt.new はビジュアルサイトビルダーやチュートリアル駆動型プラットフォームではありません。React とフルスタック開発の基礎知識を要求しますが、そのぶんセットアップの障壁を取り除いています。
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 は開発ツールのあり方を変えました：単なるコーディングの高速化ではなく、既に動くコードからスタートし、自分の意図に合わせて調整できるようになったのです。
この例では、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 はコンソールでカスタマイズ可能な組込みのサインインフローを用意しています。まず 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 は現在、MCP サーバーを開発中で、あなたの IDE 内で直接動作し、Logto コンソールやManagement API との連携が IDE を離れずにできるようになります。
この仕組みにより、以下が可能になります：
ローカルツール・AI・Logto インフラを連携させることで、認証はもはや面倒な統合作業ではなく、自然な開発フローの一部になります。