Cursor と Logto を使って、Vibe コードでアプリをすばやく構築し、ログインフローも簡単処理
Cursor を使った vibe コーディングで写真ギャラリーアプリを作成し、数分で Logto のログイン機能を追加する方法を学ぼう。UI から認証まで、速く・簡単・AI パワーで実現！
Product & Design
Vibe コーディング は、Cursor や Windsurf のような強力なツールのおかげで人気が高まっています。経験が限られていても、自分だけのアプリを素早く構築できます。
多くの開発者やビルダーにとって、ログインフローのセットアップは難しいもの。しかし MCP や現代的 IDE に内蔵されたコンテキスト認識機能のおかげで、たとえ開発者でなくてもアプリに認証を追加するのはもはや複雑な作業ではなくなりました。
このチュートリアルでは、次のことを紹介します：
- Cursor で vibe コーディングを使い Web アプリを構築する方法。
- Logto で認証（ログインフロー）を追加し、コンテンツを保護する方法。
Cursor で写真ギャラリーアプリを作る
まず、Cursor でチャットを開いて以下のプロンプトを入力します：
「Next.js Page Router でシングルページアプリを作って」 あとは Cursor がそれらをすべて生成してくれます。
これを写真ギャラリーアプリにしてみましょう。Unsplash から複数の写真を取得し、自動で整理してくれます。
写真ギャラリーアプリに認証機能を追加
従来なら、ドキュメントを手作業で読み、SDK を理解しながら統合作業をする必要がありました。 しかし Cursor を使えば、AI の力を最大限に活用して、もっとスムーズかつ高速にこの作業を進められます。
Logto ドキュメントをコンテキストに追加
アプリを保護するためにログインフローを追加できます。Cursor はコンテキスト認識プロンプトをサポートしているので、Logto ドキュメント を参照情報として追加できます。これにより、Next.js (Page Router) 用 Logto SDK で認証を手軽に統合できます。
統合作業の完了
ご覧のとおり、クイックスタートガイドを参照し、次に何をするべきか案内が表示されます。2 つ目の手順では、appId、endpoint などの設定が必要だと言われます。これらの値を取得するには、Logto Cloud で新しいアプリを登録しましょう。
また、http://localhost:3000/api/auth/callback/logto をリダイレクト URI として入力するように求められます。
Logto Cloud コンソールでリダイレクト URI を入力
これらの値を取得して、設定ファイルに保存しましょう。
あとは App ID、App Secret、Logto endpoint を Cursor に渡せば、コードを自動で更新してくれます。
サーバーを起動し、シンプルな サインイン ホームページが表示されます。Sign In をクリックすると、Logto ログインページにリダイレクトされます。
やった！無事 Logto サインインページにリダイレクトされました！
UI を洗練し、全体フローをテスト
初期画面が少し簡素すぎたので、Cursor にデザインの改善を依頼しました。
こんな画面に仕上げてくれました。
いよいよ全体フローをテストします。
ちなみに、Logto にはメールサービスが標準搭載されているので、面倒な設定なくメール認証プロセスを体験できます。
フローが完了すると、無事サインインでき、画面にユーザー ID が表示されています。
Logto Console にユーザーが追加されたか確認してみましょう…… やった！追加されています！🎉
Logto のドキュメント、ベストプラクティス、Copilot スタイルのコーディングのおかげで、技術力が少なくても簡単に統合できます。ログインフローのセットアップはもはや重い作業ではありません。
今後の展開
これは小さな練習例にすぎません。Logto は開発環境内で直接動く MCP サーバー を積極開発中で、Logto Console や Management API と IDE を切り替えることなくやりとりできます。 これにより、下記のことができるようになります：
- ユーザーの作成・管理
- ログの取得
- ログインフローの設定・管理
- 権限管理（例： API リソース、パーミッション、ロール）
- アプリケーションや各種リソースの管理
- その他多数
AI の力と Logto の堅牢なインフラ設計により、認証統合はもはや課題ではありません！