日本語
Claude Code と Logto を使ってカスタムログインフローを素早く構築する方法
Claude Code を使って、Logto 認証付きのフルスタックアプリを構築する方法を学ぼう：サインインセットアップからカスタムログインパネルやソーシャルログインまで。
Guamian
Product & Design
Product & Design
Claude Code を使って、Logto 認証付きのフルスタックアプリを構築する方法を学ぼう：サインインセットアップからカスタムログインパネルやソーシャルログインまで。
Claude Code は Anthropic によって開発された AI 搭載のコーディングアシスタントで、開発者がより効率的にコードを書く・デバッグする・理解するのを助けます。一般的なチャットボットとは違い、プログラミングのワークフローに焦点を当てており、開発環境と深く統合されています。開発者はコードスニペットの生成、複雑な関数の説明、エラー修正、プロトタイピングの高速化など、ツールを切り替えたり集中力を失ったりすることなく利用できます。
Anthropic の Claude モデルに基づき、安全性・信頼性・有用性を強く意識してトレーニングされています。つまり、Claude Code はスピードだけでなく、実プロジェクトで信頼でき、保守しやすいコードを生み出すことにも重点を置いています。
市場にはすでに多くのコーディングコパイロットや AI アシスタントがありますが、Claude Code はいくつかの重要な点で際立っています：
つまり、他ツールがコード補完を重視する中、Claude Code は“理解力”と“生成力”のバランスをとったコーディングパートナーを目指しています。
Claude Code は以下のような幅広いユーザーを想定しています：
つまり、日常的にコードを書く・読む・管理する人なら、Claude Code で開発プロセスがより速く、分かりやすく、信頼できるものになります。
今回は、Claude Code を使ってアプリにカスタムログイン機能を追加する手順を紹介します。プロ開発者でも趣味コーディングでも大丈夫です。
この例では、Claude Code を使ってドキュメントマネージャーアプリを作成しました。
まず、Logto Cloud コンソール にアクセスし、シングルページアプリを新規作成します。設定オプションやエンドポイントがいろいろ表示されますが、後ほど統合の際に使います。
Claude Code がこの後の作業も自動化します：最新の Logto React SDK をインストールし、認証コンポーネントの設定・結線まで行いました。
手順によると、次の 2 つの情報が必要です：
Logto エンドポイントとアプリ ID をプロジェクトにコピーし、リダイレクト URI と「サインアウト後リダイレクト URI」を設定します。
この 2 つを Claude Code に直接渡せば、残りの設定もすべて任せられます。
では試してみましょう：Sign in をクリックすると、Logto のホスト型サインインページにリダイレクトされます。
「post sign-out URL」を設定していれば、サインアウト後そのページにリダイレクトされます。
Logto には、コンソールでカスタマイズ可能なサインインフローが標準搭載されています。始めるには「Sign-in Experience > Sign-in & Sign-up」へ進み、メール・ユーザー名・電話番号・ソーシャルログインなど、好きなサインイン方法を選びます。
設定が終わると、サインインフローを起動すると Logto ホスト型サインインページに対象オプション付きで遷移します。認証プロセスはすべて Logto 側で処理され、ユーザーはサインイン後アプリに戻されます。
ここでもう一歩進んだカスタムサインイン体験を作ってみましょう。別ページにリダイレクトする代わりに、プロダクト UI の上に直接フローティングログインパネルを設置します。これにより、ユーザーは画面の文脈を保ったまま Logto の認証フローを利用できます。
自然言語プロンプトだけで大丈夫です：
Claude Code は次を生成します：
テストユーザーで Logto の CIAM プラットフォームにログインが記録されることを確認しましょう。
これは基本例にすぎません。Logto は現在、IDE 内で直接稼働する MCP サーバーを開発中で、開発環境から離れることなく Logto コンソールや管理 API にアクセスできるようになります。
このセットアップにより：
ローカルツール・AI・Logto インフラの融合で、認証は苦痛な統合作業ではなく、自然な開発フローの一部になります。