🍆

SupabaseでTwitter認証を使うときの注意点

2022/05/19に公開

SupabaseではTwitterアカウントを使って認証機能を簡単に実装できます。

しかし、Twitter認証の設定周りで少し詰まってしまったのでメモを残しておきます。

下記記事が参考になりました。
https://github.com/supabase/supabase/discussions/4677

2023/09/26追記-->
https://zenn.dev/lou/articles/0b1f2baf3ca211
某マスクさんのアレから若干変わったようです。
上記の記事の閲覧を推奨します!
<--追記終了

Twitter APIのアカウントは「Elevated」である必要がある

SupabaseでTwitter認証をする場合は、「メールアドレスの取得」を可能にしておく必要があります。メールアドレスの取得ができなければ、アプリケーション上では一見動いているように見えても登録・ログインが一切できない状態です。(リダイレクトした先のURLで「Error」の文字が並ぶことが確認できます。)

メールアドレスの取得をさせるためには、「Essentials」ではできません。
「Elevated」に昇格させる必要があります。

審査は「Supabaseによってセキュアに管理される」ことを推して進めると吉

アカウント昇格のためにはTwitter社の審査を受ける必要があります。
当方では「Twitterで取得した顧客情報はSupabaseによってセキュアに管理される」ということをひたすら推して審査をパスできました。

申請時に「どの情報がほしいか?」と聞かれると思います。
「Supabaseで認証用にメールアドレスだけ取得したい」という方針で進めていった結果、一度も落とされることなく、6時間後には審査が通りました。

審査開始: 5月16日(月) 18:28
審査パス: 5月17日(火) 0:22

審査は決して難しいものではありませんので、
Twitter社に顧客情報がいかにして守られるかを中心に情報提供するように心がけましょう!

名前に @ が入っているとログインできないっぽい

様々なTwitterアカウントでログインをテストしてみた結果、 @ が入っているアカウントはサインアップはできるが、ログインができない事象に遭遇しました。supabase-auth-helper 特有の問題の可能性があるかもしれません。

現時点では答えは出ていません。

【検証してみました】
Next.jsの新規環境を立ち上げて、

  • @supabase/supabase-js
  • @supabase/supabase-auth-helpers/nextjs

上記2パターンでのログインを試してみました。
その結果、後者でログインを行うと Invalid character が出てしまうことが確認できました。supabase-auth-helperが原因ということで間違いなさそうです。

次のバージョンリリース(1.4.2)で解決されるようです!
https://github.com/supabase-community/supabase-auth-helpers/pull/102

v1.4.2がリリースされました!
バージョンアップしたところ正しく動作するようになりました!

Discussion