日本語
Cursor と Logto を使って、Vibe コードでアプリをすばやく構築し、ログインフローも簡単処理
Cursor を使った vibe コーディングで写真ギャラリーアプリを作成し、数分で Logto のログイン機能を追加する方法を学ぼう。UI から認証まで、速く・簡単・AI パワーで実現！
Guamian
Product & Design
Product & Design
Cursor を使った vibe コーディングで写真ギャラリーアプリを作成し、数分で Logto のログイン機能を追加する方法を学ぼう。UI から認証まで、速く・簡単・AI パワーで実現！
Vibe コーディング は、Cursor や Windsurf のような強力なツールのおかげで人気が高まっています。経験が限られていても、自分だけのアプリを素早く構築できます。
多くの開発者やビルダーにとって、ログインフローのセットアップは難しいもの。しかし MCP や現代的 IDE に内蔵されたコンテキスト認識機能のおかげで、たとえ開発者でなくてもアプリに認証を追加するのはもはや複雑な作業ではなくなりました。
このチュートリアルでは、次のことを紹介します：
まず、Cursor でチャットを開いて以下のプロンプトを入力します：
「Next.js Page Router でシングルページアプリを作って」 あとは Cursor がそれらをすべて生成してくれます。
これを写真ギャラリーアプリにしてみましょう。Unsplash から複数の写真を取得し、自動で整理してくれます。
従来なら、ドキュメントを手作業で読み、SDK を理解しながら統合作業をする必要がありました。 しかし Cursor を使えば、AI の力を最大限に活用して、もっとスムーズかつ高速にこの作業を進められます。
アプリを保護するためにログインフローを追加できます。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 サインインページにリダイレクトされました！
初期画面が少し簡素すぎたので、Cursor にデザインの改善を依頼しました。
こんな画面に仕上げてくれました。
いよいよ全体フローをテストします。
ちなみに、Logto にはメールサービスが標準搭載されているので、面倒な設定なくメール認証プロセスを体験できます。
フローが完了すると、無事サインインでき、画面にユーザー ID が表示されています。
Logto Console にユーザーが追加されたか確認してみましょう…… やった！追加されています！🎉
Logto のドキュメント、ベストプラクティス、Copilot スタイルのコーディングのおかげで、技術力が少なくても簡単に統合できます。ログインフローのセットアップはもはや重い作業ではありません。
これは小さな練習例にすぎません。Logto は開発環境内で直接動く MCP サーバー を積極開発中で、Logto Console や Management API と IDE を切り替えることなくやりとりできます。 これにより、下記のことができるようになります：
AI の力と Logto の堅牢なインフラ設計により、認証統合はもはや課題ではありません！