Vercel、SEO対策とFirebase Auth ログインの落とし穴
OAuthログインができなくなった
何かとトラブルのついて回る「Firebase Authentication」ですが、先日より急に Vercel で公開しているアプリでログインが出来なくなりました。
開発は続けているものの、ログインに関する箇所はほとんど変更なし、バージョンの問題だろうか,,,と駆けずり回ったもののそうでもなく
何とか解決までたどり着いたので共有します。
今回はVercelについてメインで書きますが、Vercel以外でも同じと思います。
原因
原因は「trailingSlash（トレイリングスラッシュ）」でした。
トレイリングスラッシュとは、URLの末尾についてる「/」のことです。
トレイリングスラッシュについては詳細は以下のサイトでも見ていただければと思います。
基本的には、この末尾にスラッシュを付けるかどうかはプロジェクトで統一すべき、ということになっています。
さて、私はSEO対策的にも統一すべき、スラッシュつけとくのがいいんじゃない？という記事を読み、スラッシュを付けることにしたわけです。
、、、本当か？
よくよく考えると、この現代においてトレイリングスラッシュがSEOに大きな影響を与えるとは考えられません。気になって調べましたけど、まず影響ない、とGoogleは言ってるそうで、ま、ネットの情報に踊らされたと。
とはいえ、やっぱり統一できるものは統一しとくのが良いですね。
やった（やってしまった）こと
結論、今回何をしたかというと、Vercelへのデプロイを設定するvercel.jsonに以下の記述をして、トレイリングスラッシュを付けるように設定しました。
{
"trailingSlash": true
}
これによってアプリへのアクセスで「/」がついていない場合は強制的に「/」付きにリダイレクト（多分）されるわけですが、Firebase Authのリダイレクトログインで帰ってくるときに、上手く帰ってこれなくなったんですよね。
でもその理由は不明です。
設定の方に問題があるのか、リバースプロキシの方に問題があるのか、それともそういうものなのか、、、よくわかりませんが、ともかく「trailingSlash」を「true」にするとFirebase AuthでうまくOAuthログイン（リダイレクトログイン）ができない、これだけはわかりました。
ちなみに
因みに、WEBアプリではトレイリングスラッシュ無しに統一するのが一般的だそうです。
Nuxtは前提としてスラッシュ無し想定みたいですね。
Discussion