🪪

【実は無料】Auth0 で Twitter（X）ログインを導入する方法

に公開
個人開発
Twitter API
Auth0
tech

個人開発のWebアプリで Twitter認証をしたい

こんにちは、Webエンジニアの Tea☕️ です。
個人開発でWebアプリを作っていて、認証を Auth0 に丸投げして楽をしようとしています。

Auth0 では様々なソーシャルログインが可能ですが、デフォルトでは Google ログインしかありません。ただ、個人向けのサービスなので、敷居の低い Twitter（X）でログインできるようにしたい。
「APIが有料化され、しかも高い」とよく聞きますが、試してみるとログインだけなら無料でも可能でした。

今回は、実際に設定してみて、公式の手順がイマイチよくわからなかったので、日本語で手順を紹介します。

前提

  • Auth0 ですでにログインできる状態であること
  • Twitter のアカウントがあること
  • 動作確認できるWebアプリケーションがあること
  • 投稿の取得や作成など、認証以外の用途は未検証です

Twitter（X）ログインの導入手順

以下は、2025/11/29 時点の情報・画面 です。UIや手順が変わる可能性があります。ご了承ください。

下記の公式の手順をもとに記載していきます。
https://auth0.com/ai/docs/integrations/twitter

1. Auth0 で Twitter認証を追加

  • Auth0 にログインし、サイドメニューの 認証 の中にある ソーシャル を押下
  • ソーシャルログインの一覧が表示されるので、右上の「接続を追加」を押下
  • Twitter を探して押下
  • 設定画面が開く
    • Protocol Version を Oauth2.0 選択
      • Twitter側が OAuth2.0 に対応しているため
    • ClientID, Client Secret は後ほど設定するので、一旦空欄のまま
  • 保存
  • アプリケーションタブを開き、Twitter 認証を設定したいアプケーションをONにする
    • 説明のためデフォルトを選択していますが、実際に使っているアプリをONにしてください

これで、Auth0 側の初期設定は完了です。

2. 開発者プラットフォームに登録

次は、API を使うために、開発者用のアカウントを登録します。

  • 公式サイトにアクセス
  • 右上の「ログイン」押下 > 開発用に使いたいアカウントで、Twitterにログイン
  • ログイン後、「開発者用ポータル」を押下 > 下記の画面になる
  • 今回は無料で使うため、下の「Sign up free account」を押下
  • 「Developer agreement & policy」の画面に遷移する
  • APIの使用目的を記述し、利用規約、ポリシーを確認して同意
    • 使用目的により即時審査があるわけではない
    • 筆者は、「開発中のWebアプリケーションのログインのために使用する」「ユーザー名やアイコンなど、一部ユーザー情報の取得を行う」旨を、英語で書きました。

  • 送信して、ダッシュボード画面が開けば完了

3. ログイン用の key 発行

続いて、Auth0 に登録するための設定をしていきます。
アカウント登録後、自動で1つ Project が作成されています。無料プランでは1つしか Project を作成できないので、デフォルトをそのまま使用します。

  • Project の歯車マークを押下
  • Project 詳細の Settings が開く
  • App details の Edit を押下
    • NAME, DESCRIPTION, APP ICON は、ログイン時にユーザーに表示される
    • 自分のアプリケーションの名前と、説明を書いておく
    • 説明には、取得する情報や目的（ユーザー名、アイコンを取得するのみで、ツイートの取得は行わないなど）をかくと、ユーザーが安心しやすいと思います。
    • 保存で完了
  • Settings に戻って、下にスクロールし、User authentication settings の Set up を押下
  • 設定の入力フォームが開くので、入力していく
  • App permissions
    • Webアプリ側からどんな操作がしたいか
    • 今回は、認証し、ユーザー情報を参照したいだけなので、Read
  • Type of App
    • アプリケーションの種類。ネイティブアプリ or Webアプリかbot
    • 今回は、Webアプリなので、Web App, Automated App or Bot
  • App info
    • Callback URI / Redirect URL
      • 認証の流れ：Auth0のログイン画面からTwitterログインを選択 > Twitterでログイン > その後 Auth0 にリダイレクトして登録 > アプリケーションにコールバック
      • Auth0 に帰ってきてもらうので、Auth0 のコールバック先を指定
      • 設定値：https://YOUR_AUTH0_DOMAIN/login/callback
      • YOUR_AUTH0_DOMAIN は、Auth0側の。Applications > [Your Application] > Settings > Basic Information > Domain を入れる
    • Website URL
      • 自分のサイトのURLを入力
      • localhost だと登録不可だったので、仮で http://localhost.com:8000 で登録
  • Save を押下して保存
  • OAuth2.0 用の、Client ID, Client Secret が表示されるので、どちらも保存
    • Client Secret は二度と確認できないので、バックアップをとっておく
  • Auth0 側に、Key, Secret をセット
    • Auth0 のTwitter の設定画面を再度開く
    • Client ID, Client Secret をそれぞれ入力
    • 保存

これで設定は完了です。

4. 接続の確認

最後に、アプリケーションでログインできるか、確認してみます。

  • Auth0 の Twitter 設定画面を再び開き、上部の「接続を試す」を押下
  • Twitter　のログイン許可画面が出る
  • 「Authorize App」を押下
  • It works の画面になり、ユーザー情報が取得できていれば成功

最後に、自分のWebアプリケーションでログインを試し、Twitterログインに成功すれば完了です🎉

余談：注意点と料金プラン

twitter API では、鍵アカウントのツイートも取得可能です。データ取得の運用には十分注意しましょう。
また、無料プランはかなり制約が大きいです。
小規模な個人開発で認証のみならそれほど困らないと思いますが、ある程度ユーザーが増えたり、タイムラインを取得したい場合には、有料プランを覚悟することになります。

プランごとの可能な範囲は、下記ページに記載があります。
https://developer.x.com/en/portal/products

  • 無料プランの主な上限
項目 上限
アプリケーション 1つだけ（Basicプランなら2つ）
ツイート取得 100ツイート / 月
ツイート投稿 500ツイート / 月
ツイート一覧の取得 1リクエスト / 15分
DMの送信・取得 不可
  • 料金表
Pro Basic free
5000ドル/月 or 54000ドル/年（4500ドル/月） 200ドル/月 or 2100ドル/年（175ドル/月） 無料

あまりにも高すぎて、個人開発で認証以外に扱うのは諦めざるを得ないですね...。

まとめ

Auth0 で Twitterログインを導入する手順を紹介しました。
英語の情報しか見当たらず、Auth0 のヒントが絶妙にわかりづらかったので、ご参考になれば幸いです。手順に不備があれば、ぜひコメントをお願いいたします！

普段は、Twitter（X）で、個人開発で得た知見や学びを共有しています。よければフォローいただけると嬉しいです。
https://x.com/tea_____19

最後まで読んでいただき、ありがとうございました。

Discussion