Firebase+Nuxt.jsでTwitter認証する (つもりが勘違いでうまくいかなかった話) #Firebase

tl;dr

API Keyの入力欄にAccess Tokenを入れたことに気づかず数日を無駄にした。
おわり。

以下のあれこれは、上記キーの取り違えに気づくまでの間にやった意味不明な作業のメモで、役に立たないです。どんなミスをしたのかを書いています。

Qiita見てても分だの秒だの爆速だのでサクッとうまくいった記事ばっかなので、間抜けな記録が混じってもいいだろうと思って。

Firebaseにのっけたい。便利なツールが色々あるので使いたい
Nuxt.jsでWebアプリを書いてる
認証をTwitterのやつ使おう（Google認証とか色々あるけどまずはTwitter)

余談ですがTwitter避けようぜキー発行厳しくなるし的な話ちょいちょ見かけますけど、個人的には厳しかったことは一度もない。
開発者アカウントの発行完了は秒でしたし、その後も特段困るような何かには遭遇してません。

API Keyを間違えてる場合

code:"auth/internal-error"

のエラーが返ってきます。他のケースでも多分出るけれども。

FirebaseのAuthentication

Twitter側のコールバックURLに設定しろという謎のurlだが、これはFirebase側で引っ掛けて勝手に持っていく。
黙ってTwitter側のアプリ設定（Settings→Application Details
→Callback URLs）に入力したら、以降は忘れてよい。
自分のアプリ→Twitter→Firebase→自分のアプリ
と遷移するんだわな。
自前でやるときは自分のとこにコールバックさせるところを、ユーザ情報しまいこんだりする都合でワンクッション挟んでるだけだと（よくわかってなかった）。

https://myproject-id.firebaseapp.com/__/auth/handler

こんなん。
nuxt.js使ってるとアンスコで始まるurlって変数として使ったりするので、

こんな奇妙なページ用意せんとあかんのか？
でもそんなページ用意してる記事見かけないなー
はっもしかしてこの辺が面倒で誰も記事書いてないの？
なんかGoogle認証だけで済ませてる記事はお茶濁してるの！？

という変な飛躍をし、nuxt.jsのrouterにextendRoutesして謎ページ作ったりすることで時間を浪費。

nuxt.config.js（無駄）

  router: {
    extendRoutes(routes, resolve) {
        routes.push({
            name: 'auth_handler',
            path: '/__/auth/handler',
            component: resolve(__dirname, 'pages/Info/Hoge.vue')
        })
    }
  }

上記のミスをするのは私が人類で最後です。
こんなことはせんでよく、ただPopupだかRedirectだか指定して叩けばいいだけだった。

最初から最後まで、たんに初手でApiKeyを取り違えたとかいうミスですべてが上手くいっておらず、それに気づかないまま迷走しただけの話でした。