ViteでFirebaseのGoogle認証したらunauthorized-domainでエラーになる

現象

Vite（3.0以降）、かつ、Node.js（17未満）の環境で開発サーバを起動し、
Firebase AuthenticationのGoogle認証を実行したら以下のエラーが発生します。

FirebaseError: Firebase: Error (auth/unauthorized-domain).
    at createErrorInternal (assert.ts:136:55)
    at _fail (assert.ts:65:9)
    at _validateOrigin (validate_origin.ts:46:3)

原因

Vite（3.0以降）、かつ、Node.js（17未満）の場合、
開発サーバのホストがlocalhostではなく127.0.0.1で起動されるようになったことが原因です。

Firebase Authenticationはデフォルトでlocalhostが承認済みドメインとして設定されていますが、
127.0.0.1は設定されていないため、unauthorized-domainと判定されてしまいます。

対処方法

以下のいずれかを実施することでGoogle認証が正常に動作するようになります。

• vite.config.ts or vite.config.jsファイルに以下の設定を追加する

  // vite.config.ts or vite.config.js
    import { defineConfig } from 'vite'
  + import dns from 'dns'
  
  + dns.setDefaultResultOrder('verbatim')
  
    export default defineConfig({
      // 省略
    })
  

• Node.jsのバージョンを17以降にアップグレードする

• Firebase Authenticationの承認済みドメインに127.0.0.1を追加する

  

参考

おわりに

以下の書籍を執筆した後にViteの動作が変わってしまったため、
ご購入いただいた読者の方も困っている可能性があるかもということで記事を投稿させていただきました。

本記事の内容以外にも、執筆時とは動作が変わってしまう箇所が出てくると思います。
気づいた点は、都度、書籍に記載しているリポジトリのサンプルアプリを更新したり、
今回のようにQiitaに記事を投稿したりしていこうと思ってますのでぜひウォッチしてください。

Firebaserのみなさん、よいFirebaseライフを