firebaseの認証時にエラー”auth/operation-not-supported-in-this-environment”が出る

---閲覧ありがとうございます。

「Vue.js＆Nuxt.js超入門」という書籍の内容に従ってfirebaseの認証機能を使用してみましたが、
"auth/operation-not-supported-in-this-environment" というエラーが出てしまいます。
このエラーを出さず、ページにアクセスした際にGoogle認証のポップアップが表示されるようにしたいです。
解決方法がわかる方がいらっしゃいましたら教えていただけますと幸いです。

環境

Windows 10
GoogleChrome（92.0.4515.131）
VSCode
Node.js（14.17.0）
npm（7.20.6）
Nuxt.js

実施手順

Fireaseコンソール > Authentication > Sign-in-method よりGoogleを選択し、有効にするをON、メールアドレスの入力をして保存
VSCodeのターミナルを開き、プロジェクトのディレクトリでコマンド「npm install firebase --save」を実行
Fireaseコンソール > プロジェクトの概要 > Webアプリを追加より、Firebase構成オブジェクトをコピー（ソースコードの変数configに使用）
VSCodeで「pages/axios.vue」のソースコードを下記に記載の通りに編集
VSCodeのターミナルを開き、プロジェクトのディレクトリでコマンド「npm run dev」を実行
GoogleChromeで「http://localhost:3000/axios」にアクセス

⇒ Google認証のポップアップが表示されず、ターミナルに以下のエラー文が出ている

エラー文

C:\nuxt_app\node_modules\@firebase\auth\dist\auth.js:66
function pc(a,b,c){function d(h){h&&b.appendChild("string"===typeof h?a.createTextNode(h):h)}for(var e=2;e<c.length;e++){var f=c[e];if(!na(f)||n(f)&&0<f.nodeType)d(f);else{a:{if(f&&"number"==typeof f.length){if(n(f)){var g="function"==typeof f.item||"string"==typeof f.item;break a}if(oa(f)){g="function"==typeof f.item;break a}}g=!1}w(g?Za(f):f,d)}}}function oc(a,b){b=String(b);"application/xhtml+xml"===a.contentType&&(b=b.toLowerCase());return a.createElement(b)};function qc(a){l.setTimeout(function(){throw a;},0)}var rc;


                                 ^
[t [Error]: This operation is not supported in the environment this application is running on. "location.protocol" must be http, https or chrome-extension and web storage must be enabled.] {
  code: 'auth/operation-not-supported-in-this-environment',
  a: null
}

ソースコード

pages/axios.vue

<template>
  <section class="container">
    <h1>{{title}}</h1>
    <p>{{message}}</p>
  </section>
</template>

<script>
import firebase from "firebase";

export default {
  data: function() {
    return {
      title: 'Auth',
      message: 'this is message.',
    };
  },
  created: function() {
    var config = {
      apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
      authDomain: "プロジェクト名.firebaseapp.com",
      databaseURL: "https://プロジェクト名-default-rtdb.firebaseio.com",
      projectId: "プロジェクト名",
      storageBucket: "プロジェクト名.appspot.com",
      messagingSenderId: "XXXXXXXXXX",
      appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
      measurementId: "XXXXXXXXXX"
    };
    firebase.initializeApp(config);

    var provider = new firebase.auth.GoogleAuthProvider();
    var self = this;
    firebase.auth().signInWithPopup(provider)
      .then(function(result) {
      self.message = result.user.displayName + ', '
          + result.user.email;
    
    });
  },
}
</script>

<style>
省略
</style>

試したこと

Chromeの設定 > プライバシーとセキュリティ > サイトの設定 > ポップアップとリダイレクトより、ポップアップを使用できるようにする
公式ドキュメントに「Thrown if this operation is not supported in the environment your application is running on. "location.protocol" must be http or https.」とありましたがこれもよくわかりませんでした。