NextAuth.jsでTwitterログインを実装したものの、現在は使用できなくなってしまった話
はじめに
Next.jsで作成している個人アプリに、NextAuth.jsを利用したTwitterログインを実装しました。
しかし、2023/04/15、Twitterログインが使用できなくなっていることを確認しました😇
Twitter Developer PortalのDashboardでは、追加したAppがSUSPENDED状態となり、以下が表示されている状態です。
This App has violated Twitter Rules and policies. As a result, it can no longer be accessed. An email has been sent to hoge@hoge.com with details. For assistance, submit a support ticket.
このアプリは、Twitterのルールとポリシーに違反しています。その結果、アクセスすることができなくなりました。hoge@hoge.comに詳細が記載されたメールが送信されています。サポートが必要な場合は、サポートチケットを送信してください。
ちなみに詳細が記載されたメールは来ていません✌️
ひとまず、今後のTwitterの動向を窺いつつ、修正は様子見しておこうと思っています。
ただ、非常に苦労してTwitterログインを実装したものの、このまま使用できなくなってしまっては何だか虚しいので、供養🪦の意味も込めて、実装のために奮闘した過程を書き残しておきたいと思います✍️
clientIdにはAPI Keyを設定する
Twitter Developer PortalでAppを追加し、API KeyやClient IDなどを取得しました。
NextAuth.jsのTwitterProviderには、clientIdを設定する箇所がありますが、上記で取得したClient IDではなくAPI Keyを渡します。
同様にclientSecretにはAPI Key Secretを設定します。
ドキュメントにも記載がなく、さっそく躓きかけました👿
Twitter APIのバージョン
NextAuth.jsはTwitter API v2に対応していないので、v1.1を利用する必要がありました。
また、v1.1を利用するには、Elevatedアクセス権が必要とのこと。
Twitter APIのバージョンが原因であること、そしてv2ではなくv1.1の利用にElevatedアクセス権が必要であることなど、これらの原因とその情報源を見つけることが非常に大変でした🫠
Elevatedアクセス権の申請
専用フォームから英語で申請し、Elevatedアクセス権を獲得しました。
実際に送った文章
In my own portfolio, I would like to use the Twitter API to implement Twitter login.
I am using a library called NextAuth.js, which can only use Twitter API v1.1 and needs to be promoted to Elevated.
In addition, I plan to display the names and icons of logged-in users in my portfolio, and I would like to use the icons and names obtained from Twitter logins.
Elevatedアクセス権の申請に関する記事をいくつか確認したところ、承認までに数日から数ヶ月掛かっているケースもあり、あまりにも時間が掛かるようであればTwitterログインの実装は諦めようかとも思っていました。
しかし、申請ボタンを押した直後に、即刻アクセス権がElevatedに昇格していました💪
これはおそらくですが、今回のTwitter APIの利用目的が、Twitterログインと、名前とアイコンの取得のみであり、ツイートの取得や投稿などの機能を要求しなかったからかもしれません。
Twitterとの数日間のやり取りを覚悟していたので、これは嬉しい誤算でした😎
OAuth 1.0に対応
Twitterは現在、OAuth 1.0仕様を使用する唯一の組み込みプロバイダーです。つまり、access_tokenやrefresh_tokenは受け取れず、それぞれoauth_tokenとoauth_token_secretが受け取れます。アダプタを使用している場合は、これらをデータベーススキーマに追加することを忘れないようにしましょう。
Twitter | NextAuth.js
今回はユーザーやアカウントデータの保持にデータベースを使用しており、Prisma公式のadapter🔌を使用しています。
上記の通り、OAuth 1.0に対応したoauth_tokenとoauth_token_secretカラムをAccountモデルに追加する必要があります。
ただ、今回使用しているデータベースであるPlanetScaleは、MySQL互換ということもあり、tokenなどの文字数が多いカラムにはText型を指定する必要がありました。
PrismaのMySQLコネクタを使用する場合、PrismaのString型はvarchar(191)にマッピングされ、Accountモデルのid_tokenなどのフィールドを格納するには十分な長さがない場合があります。これは、Text型を@db.Textで明示的に使用することで回避することができます。
@next-auth/prisma-adapter | Auth.js
以上より、最終的に追記したPrismaのスキーマはこちらです。
おわりに
記事にできたことで、せっかく実装したTwitterログインが使用できなくなってしまった無念も無事晴れる気がします😇
ここまで読んでいただき、ありがとうございました🪶
Discussion