常連

### 前提

Firebase ウェブ [Codelabの公式ドキュメント](https://firebase.google.com/codelabs/firebase-web#0)に沿いながらFriendly Chatというウェブアプリケーションを作成しています。その中で、Firebase Authentication を使用してユーザーを認証しようとしております。
しかし、現状ログインボタンを押しても何も反応せずログインできない状態になっております。

### 実現したいこと
Firebase Authentication を使用してgoogle accountでログインできるようにする。

### 発生している問題・エラーメッセージ

```
Uncaught FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options).
    at initializeApp (index.esm2017.js?8a30:423:1)
    at getApp (index.esm2017.js?8a30:476:1)
    at getAuth (index-0bb4da3b.js?d0d7:9497:30)
    at initFirebaseAuth (index.js?b635:66:29)
    at eval (index.js?b635:348:1)
    at ./src/index.js (main.js:159:1)
    at __webpack_require__ (main.js:263:41)
    at main.js:304:37
    at main.js:306:12
```

### 該当のソースコード

```firebase-config.js
/**
 * To find your Firebase config object:
 * 
 * 1. Go to your [Project settings in the Firebase console](https://console.firebase.google.com/project/_/settings/general/)
 * 2. In the "Your apps" card, select the nickname of the app for which you need a config object.
 * 3. Select Config from the Firebase SDK snippet pane.
 * 4. Copy the config object snippet, then add it here.
 */

const config = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

export function getFirebaseConfig() {
  if (!config || !config.apiKey) {
    throw new Error('No Firebase configuration object provided.' + '\n' +
    'Add your web app\'s configuration object to firebase-config.js');
  } else {
    return config;
  }
}
```
```
'use strict';

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

import { getFirebaseConfig } from './firebase-config.js';

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

// Signs-out of Friendly Chat.
function signOutUser() {
  // Sign out of Firebase.
  signOut(getAuth());
}

// Initialize firebase auth
function initFirebaseAuth() {
  // Listen to auth state changes.
  onAuthStateChanged(getAuth(), authStateObserver);
}

// Returns the signed-in user's profile Pic URL.
function getProfilePicUrl() {
  return getAuth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return getAuth().currentUser.displayName;
}

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!getAuth().currentUser;
}

initFirebaseAuth();
loadMessages();

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);
```
上記のファイルはindex.jsとなります。
自分が変更した部分以外は省略させていただきました。

### 試したこと

上記のファイルに
import { initializeApp } from "firebase/app";を追加してみたりしましたが、
エラー内容が増えるのみでした。

### 補足情報（FW/ツールのバージョンなど）
Mac(M1)
firebase --version 11.16.1
[サンプルコード](git clone https://github.com/firebase/codelab-friendlychat-web)はこちらから
見ることができます。

Firebase Authentication を使用してGoogleアカウントでログインをできるようにしたい

### 実現したいこと
自己開発のマッチングアプリの開発にfirebaseを使っています。リリースするにあたり、セキュリティが本当に安全かどうかを調べたいです。

### 発生している問題・分からないこと
自己流で書いてみたのですが、いまいち自分のコードの安全性に自信が持てません。アドバイスなど頂けたらありがたいです。Security ruleと主にfirebaseの情報に変更が起こるところのソースコードを載せておきます。他に必要なソースコードがございましたら教えて頂けたらありがたいです。



### 該当のソースコード

```Security Rule
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {

        // 切り出した関数の記述
        function isAuthenticated() { // 条件 1
            return request.auth != null;
        }
    
        function isUserAuthenticated(userId) { // 条件 1 かつ 条件 2
            return isAuthenticated() && userId == request.auth.uid;
        }
        
        // function isAdmin() {
        //   return isAuthenticated() && request.auth.token.admin == true; // Assuming 'admin' is a custom claim you've set
        // }

        // ユーザーデータのスキーマ検証
        function isValidUser(user) {
            return user.size() == 3
            && 'createdAt' in user && user.createdAt is timestamp
            && 'email' in user && user.email is string
            && 'userId' in user && user.userId is string;
        }
        
        
        function isValidUserFS(user) {
            return user.size() == 12
            && 'bio' in user && user.bio is string
            && 'cur_matching' in user && user.cur_matching is string
            && 'done' in user && user.done is bool
            && 'facebook' in user && user.facebook is string
            && 'imageLink' in user && user.imageLink is string
            && 'instagram' in user && user.instagram is string
            && 'matchings' in user && user.matchings is list
            && 'phone' in user && user.phone is string
            && 'preference' in user && user.preference is string
            && 'sex' in user && user.sex is string
            && 'username' in user && user.username is string
            && 'wait' in user && user.wait is bool;
        }

        // ルールの記述
        match /users/{userId} {

            // ユーザー情報の取得のルール
            allow get: if isUserAuthenticated(userId);

            // ユーザー情報の作成のルール
            allow create: if isUserAuthenticated(userId)
            // スキーマ検証
            && isValidUser(request.resource.data)
            // データのバリデーション
            && request.resource.data.createdAt == request.time 
            && request.resource.data.userId == userId;
            
        }
        
        match /Users/{email} {
          allow read: if isAuthenticated();

          allow create: if isAuthenticated() && isValidUserFS(request.resource.data);

          allow update: if isAuthenticated() && isValidUserFS(request.resource.data);
        }
        
        match /Female_match_stack/Counter {
          // Rules for 'Counter' document
          allow read, update: if isAuthenticated();
        }
        
        match /Female_match_stack/{document=**} {
          allow read: if isAuthenticated(); // Only authenticated users can read

          // Allow updating only the stack array, and only allow adding the user's own email
          allow update: if request.auth != null && 
                         request.resource.data.stack.size() == resource.data.stack.size() + 1 && 
                         request.resource.data.stack[request.resource.data.stack.size() - 1] == request.auth.token.email;
          
          allow create: if isAuthenticated();
        }

        match /Male_match_stack/Counter {
          // Rules for 'Counter' document
          allow read, update: if isAuthenticated();
        }

        match /Male_match_stack/{document=**} {
          // Rules for all documents under Male_match_stack other than 'Counter'
          allow read: if isAuthenticated(); // Only authenticated users can read

          // Allow updates only if adding to 'stack' with the user's own email
          allow update: if request.auth != null && 
                         request.resource.data.stack.size() == resource.data.stack.size() + 1 && 
                         request.resource.data.stack[request.resource.data.stack.size() - 1] == request.auth.token.email;

          allow create: if isAuthenticated();
        }
    }
}
```

```Flutter
Future<void> editCondition() async {
    User? currentUser = _auth.currentUser;
    if (currentUser == null || currentUser.email == null) {
      return;
    }
    DocumentSnapshot userDoc = await _firestore.collection('Users').doc(currentUser.email).get();
    DocumentSnapshot counterDoc = await _firestore.collection('Male_match_stack').doc('Counter').get();

    String gender = userDoc['sex'];
    String collectionName = gender == 'male' ? 'Male_match_stack' : 'Female_match_stack';

    await _firestore.collection(collectionName).doc(counterDoc['num'].toString()).update({
      'stack': FieldValue.arrayUnion([currentUser.email])
    });
    await _firestore.collection('Users').doc(currentUser.email).update({'wait': true});
  }

  Future<void> makeMatch() async{
    CollectionReference counts = FirebaseFirestore.instance.collection('Male_match_stack');
    final counter = await counts.doc('Counter').get();
    final cur_cnt = counter.get('num');
    CollectionReference males = FirebaseFirestore.instance.collection('Male_match_stack');
    final male = await males.doc(cur_cnt.toString()).get();
    final maleStack = male.get('stack');
    int maleLeng = maleStack.length;
    CollectionReference females = FirebaseFirestore.instance.collection('Female_match_stack');
    final female = await females.doc(cur_cnt.toString()).get();
    final femaleStack = female.get('stack');
    int femaleLeng = femaleStack.length;
    final new_cnt = cur_cnt + 1;
    FirebaseFirestore.instance.collection('Male_match_stack').doc('Counter').update({
      'num': new_cnt
    });
    FirebaseFirestore.instance.collection('Female_match_stack').doc('Counter').update({
      'num': new_cnt
    });
    if (maleLeng.isOdd){
      maleLeng -= 1;
      FirebaseFirestore.instance.collection('Male_match_stack').doc(new_cnt.toString()).set({
        'stack': [maleStack.last]
      });
    } else {
      FirebaseFirestore.instance.collection('Male_match_stack').doc(new_cnt.toString()).set({
        'stack': []
      });
    }
    if (femaleLeng.isOdd){
      femaleLeng -= 1;
      FirebaseFirestore.instance.collection('Female_match_stack').doc(new_cnt.toString()).set({
        'stack': [femaleStack.last]
      });
    } else {
      FirebaseFirestore.instance.collection('Female_match_stack').doc(new_cnt.toString()).set({
        'stack': []
      });
    }
    if (maleLeng>1){
      for (int i = 0; i<(maleLeng/2); i++){
        FirebaseFirestore.instance.collection('Users').doc(maleStack.elementAt(i)).update({
          'cur_matching': maleStack.elementAt(maleLeng-1-i),
          'matchings': FieldValue.arrayUnion([maleStack.elementAt(maleLeng-1-i)]),
          'wait': false,
          'done': false
        });
        FirebaseFirestore.instance.collection('Users').doc(maleStack.elementAt(maleLeng-1-i)).update({
          'cur_matching': maleStack.elementAt(i),
          'matchings': FieldValue.arrayUnion([maleStack.elementAt(i)]),
          'wait': false,
          'done': false
        });
      }
    }
    if (femaleLeng>1){
      for (int i = 0; i<(femaleLeng/2); i++){
        FirebaseFirestore.instance.collection('Users').doc(femaleStack.elementAt(i)).update({
          'cur_matching': femaleStack.elementAt(femaleLeng-1-i),
          'matchings': FieldValue.arrayUnion([femaleStack.elementAt(femaleLeng-1-i)]),
          'wait': false,
          'done': false
        });
        FirebaseFirestore.instance.collection('Users').doc(femaleStack.elementAt(femaleLeng-1-i)).update({
          'cur_matching': femaleStack.elementAt(i),
          'matchings': FieldValue.arrayUnion([femaleStack.elementAt(i)]),
          'wait': false,
          'done': false
        });
      }
    }
  }
```

### 試したこと・調べたこと
- [ ] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [x] その他

##### 上記の詳細・結果
何個かsecurity ruleの書き方テンプレートなどをググってみた。

### 補足
特になし

自分の書いたFirebaseのsecurity ruleが本当に安全か知りたい、アドバイスをいただきたい

### 実現したいこと

React.jsでアプリを作成しており、
Firebaseでログイン認証の実装をしたいのですが、
「API Keyが無効のため、正しくコピーされているか確認ください」とエラーが表示されます。



### 発生している問題・エラーメッセージ

```
provider.ts:120 Uncaught 
t {code: "auth/invalid-api-key", message: "Your API key is invalid, please check you have copied it correctly.", a: null}
a: null
code: "auth/invalid-api-key"
message: "Your API key is invalid, please check you have copied it correctly."
__proto__: Error
```

### 該当のソースコード
.envファイル
```
REACT_APP_FIREBASE_API_KEY
="***"
REACT_APP_FIREBASE_DOMEIN="***"
REACT_APP_FIREBASE_DATABASE="***"
REACT_APP_FIREBASE_PROJECT_ID="***"
REACT_APP_FIREBASE_STORAGE_BUCKET="***"
REACT_APP_FIREBASE_SENDER_ID="***"
REACT_APP_FIREBASE_APP_ID="***"

```
Firebase.js
```
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

var firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMEIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
};

const initialized_fb = firebase.initializeApp(firebaseConfig);

export const auth = initialized_fb.auth()
;
export const db = initialized_fb.firestore();

```

###試したこと
0. Firebaseの管理画面からAPIのKey等の.envファイル内のコードをコピーし直しましたが、このエラーメッセージは消えませんでした。
0. コンポーネント内でimportする際は、以下のように書いています。
```
import { auth, db } = '../firebase/Firebase';
```
3..envファイルは .src外のrootに入れています。

どなたかご教示をいただけませんでしょうか。

Firebaseのログイン認証実装したいがYour API key is invalidと表示される

### 実現したいこと
Firebaseのメールアドレスを更新したいです。

### 発生している問題・分からないこと
１：公式サイト通りに実装すると以下のエラーが出てメールアドレスが更新できませんでした。
２：メールアドレスの確認を促すメールがなぜかいつも同じアドレスにのみ送信されてしまいます。（例：firebase@gmail.com）

### エラーメッセージ
```error
メールアドレスの更新に失敗しました: Please verify the new email before changing email.
```

### 該当のソースコード

```Swift
// ViewModel.swfit

import PKHUD
import Firebase
import Foundation

class MailAdressChangeViewModel {
     // 現在のユーザーを取得
    func updateEmail(newEmail: String) {
        if let user = Auth.auth().currentUser {
            // 新しいメールアドレスを設定
            user.updateEmail(to: newEmail) { (error) in
                if let error = error {
                    print("メールアドレスの更新に失敗しました: \(error.localizedDescription)")
                    // メールが新しいアドレスに送信されたことを通知
                    Auth.auth().currentUser?.sendEmailVerification(completion: { (error) in
                        if let error = error {
                            print("確認メールの送信に失敗しました: \(error.localizedDescription)")
                        } else {
                            print("確認メールが新しいメールアドレスに送信されました")
                        }
                    })
                } else {
                    print("メールアドレスが更新されました")
                }
            }
        } else {
            print("ユーザーがログインしていません")
        }
    }
    
    
    func sendVerifyEmail() {
        // ---------- メールが新しいアドレスに送信されたことを通知 --------- //
        Auth.auth().currentUser?.sendEmailVerification(completion: { (error) in
            if let error = error {
                print("確認メールの送信に失敗しました: \(error.localizedDescription)")
            } else {
                print("確認メールが新しいメールアドレスに送信されました")
            }
        })
    }
    
    func sendVerifyEmail02(){
        // 新しいメールアドレスに送信する？
    }
    
    // UUID取得
    func fetchUUID() -> String? {
        return UserDefaults.standard.string(forKey: "uuid")
    }
    
    // FirebaseID = Email
    func fetchFirebaseId() -> String? {
        return UserDefaults.standard.string(forKey: "firebaseId")
    }
    
    // メールアドレスの形式チェック
    func isValidEmail(_ email: String) -> Bool {
        // 正規表現を使用してメールアドレスの形式を確認する
        let emailRegex = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}"
        let emailPredicate = NSPredicate(format: "SELF MATCHES %@", emailRegex)
        return emailPredicate.evaluate(with: email)
    }
    
    // 日本語が含まれているかチェックする
    func containsJapanese(text: String) -> Bool {
        let regex = ".*[\\p{Hiragana}\\p{Katakana}\\p{Han}]+.*"
        let predicate = NSPredicate(format: "SELF MATCHES %@", regex)
        return predicate.evaluate(with: text)
    }
}
```

```Swift
// ViewController.swift

class ViewController.swift

// インスタンス
let viewModel = viewModel.swift()

@IBAction func addAction(_ sender: Any) {
       if textField.text?.isEmpty ?? true {
       print("textField は空です。")
       return
       }

@IBAction func sendVerifyEmailButtonAction(_ sender: Any) {
        viewModel.sendVerifyEmail()
    }

 let inputMailAdress =  textField.text!

      // メールアドレスを検証する
                    if self.viewModel.isValidEmail(inputMailAdress) {
                        print("入力されたテキスト：\(inputMailAdress)")
                        
                        // 空入力：弾く
                        if inputMailAdress.isEmpty {
                            self.alert(message: "IDを入力してください。")
                            return
                        }
                        
                        // 空白：取り除く
                        let email = inputMailAdress.trimmingCharacters(in: .whitespaces)
                        
                        // ---------- 文字数チェック ---------- //
                        if email.count < 5 {
                            // idTextFiledが5文字未満の場合はエラー
                            self.alert(message: "idの文字数が不正です。5文字以上15文字以内にしてください。")
                            return
                        }
                        
                        // ---------- 日本語チェック ---------- //
                        if self.viewModel.containsJapanese(text: email) {
                            self.alert(message: "IDに日本語が含まれています。")
                            return
                        }
                        // アップデートする
                        self.viewModel.updateEmail(newEmail: email)
                    } else {
                        print("メールアドレスの形式が正しくありません")
                    }
    }
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
メールアドレスの確認メールが古いアドレス（=現在ログインしているメールアドレス）に送信されてしまいます。

### 補足
どうすればメールアドレスを変更できるか教えてほしいです。

Firebaseのメールアドレス更新が出来ない

お世話になっております

Firebase Authenticationを使おうと思っているのですが、
セキュリティについて気になる点があったので、ご教授いただきたいです

構成はクライアント(SPA)とAPIサーバー(Firebase admin)として、
ユーザーの認証は以下のような流れで公式に書いてあります

1 クライアントでトークンを取得し, APIサーバーに送信
2 APIサーバーはverifyIdToken(またはVerifyIDTokenAndCheckRevoked)でトークンを検証

[公式URL: IDトークンを検証する ](https://firebase.google.com/docs/auth/admin/verify-id-tokens?hl=ja)

このトークンはセッション管理に使用されていると思われますが([参考URL](https://ritou.hatenablog.com/entry/2020/01/08/070000))、
トークン自体はブラウザのindexedDBに保存されています

SPAのユーザー認証でlocalStorageに入れるとXSSのリスクがあるというのは有名です
Cookie(httponly + secure)とサーバーサイド側のセッション管理をするのが現状は無難という認識ですが、

Firebase Authenticationについて、以下の認識で合っていますでしょうか？

1 セッション管理はしている
2 しかし、indexedDBなのでXSSのリスクはある(localStorageで取り上げるよくある問題)

他にもセキュリティリスクがあったらぜひ教えていただきたいです
お手数ですが、よろしくお願いいたします

追記
ご指摘をいただいて、今回の質問はXSSではないかもしれません

今回の質問は、ユーザーの入力値などでJavaScriptが実行されるものではなく、
scriptタグなどで第三者のJSを実行している時、その第三者のJSが改ざんされ、localStorage/indexedDBの値を抜かれるというものです

こちらの記事を読んで気になりました
https://techracho.bpsinc.jp/hachi8833/2019_10_09/80851

そうそうあることではないと思いますが、このあたりを意識する場合、Firebase Authenticationで何か対応されていることはありますでしょうか

Firebase Authenticationのセキュリティについて(トークンとXSS)

### 実現したいこと

ログインユーザーがログイン画面にアクセスした場合、メインメニューページにリダイレクトさせる。その際にその旨を伝えるアラートを表示。
ここまではできているのですが、このアラートが、通常のログアウト状態からのログインでも表示されてしまうため、それを回避したい。

### 前提

reactアプリをTypeScript、firebase authenticationを使って、ユーザー管理機能を持ったシステムを作っています。
すでにログインしているユーザーのログイン画面への遷移はあるべき挙動ではないため、MainMenuページへのリダイレクトをするという機能を実装中に、以下の意図しない挙動が発生しました。

### 発生している問題

ログインユーザーに関する求める挙動は、求めるままに実現できました。ログイン中のため、メインメニューに移動します。という旨のアラートが表示され、okボタンを押すとMainMenuへ遷移します。
ですが、ログアウトをし、通常のログインを実行した際に、ログイン自体はできるのですが、ページ遷移直前に先述のアラートが出てしまい、okボタンを押すことでページ遷移がされます。本来、この通常のログインではアラートは必要なく、すぐにログインされて欲しいシーンです。

### 該当のソースコード

```Typescript
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) =>{
      if (user) {
        navigate("/mainMenu");
        alert("ログイン中のため、メインメニューに移動します")
      }
    });
    return () => {
      unsubscribe();
    }
  },[]);
```

### 試したこと

コードを直接変更したというよりは、useEffectの挙動に関する学習に努めました。現状の解釈としては、第二引数の配列の中に何も指定をしなければ、レンダリング時の一度だけuseEffectが実行されるということがわかりました。

### 補足情報（FW/ツールのバージョンなど）
firebase authentication
react-router-dom v6.15.?
ログイン機能、ログアウト機能、MainMenuページ等は正常に動いているため、該当する箇所と思われるコードだけを記載させていただきました。質問自体の経験が未熟なため、もし記載した以外に考慮に必要となるコードがあれば教えてください。追記します。

reactのuseEffectを使った際に、別のコンポーネントへリダイレクトした際にもなぜかuseEffectが読まれてしまう。

    "next": "12.2.4",
    "firebase": "^9.13.0",
を使用しています。

https://zenn.dev/hisho/books/617d8f9d6bd78b/viewer/chapter5

こちらの記事通り行いましたが、 getAuth()でエラーになります。

```
signup.tsx?0eaa:30 FirebaseError: Firebase: Error (auth/argument-error).
    at createErrorInternal (index-0bb4da3b.js?f571:476:1)
    at _assert (index-0bb4da3b.js?f571:480:1)
    at eval (index-0bb4da3b.js?f571:9409:1)
    at Component.eval [as instanceFactory] (index-0bb4da3b.js?f571:9424:10)
    at Provider.getOrInitializeService (index.esm2017.js?87c4:290:1)
    at Provider.initialize (index.esm2017.js?87c4:234:1)
    at initializeAuth (index-0bb4da3b.js?f571:594:1)
    at getAuth (index-0bb4da3b.js?f571:9502:1)
    at _callee$ (signup.tsx?0eaa:19:27)
    at tryCatch (runtime.js?ecd4:45:16)
    at Generator.invoke [as _invoke] (runtime.js?ecd4:274:1)
    at prototype.<computed> [as next] (runtime.js?ecd4:97:1)
    at asyncGeneratorStep (_async_to_generator.mjs?f84d:3:1)
    at _next (_async_to_generator.mjs?f84d:25:1)
    at eval (_async_to_generator.mjs?f84d:32:1)
    at new Promise (<anonymous>)
    at eval (_async_to_generator.mjs?f84d:21:1)
    at onSubmit (signup.tsx?0eaa:17:36)
    at eval (index.esm.mjs?250c:2004:1)
```

こちらがonSubmitした関数の中身です。
ご教授お願いします。
```tsx
const onSubmit = async (data: any) => {
    try {
      const auth = getAuth()
      const userCredential = await createUserWithEmailAndPassword(
        auth,
        emailRef.current,
        passwordRef.current
      )
      await sendEmailVerification(userCredential.user)
      reset()
    } catch (e) {
      if (e instanceof FirebaseError) {
        openNotificationWithIcon({ type: "error", description: "サインアップに失敗しました" })
        console.log(e)
      }
    }
  }
```

こちらがサインアップページです

```tsx
import { useRef } from "react";
import { useForm } from "react-hook-form";
import { ErrorMessage } from "../../components/ErrorMessage";
import {
  createUserWithEmailAndPassword,
  getAuth,
  sendEmailVerification,
} from 'firebase/auth'
import { FirebaseError } from '@firebase/util'
import { openNotificationWithIcon } from "../../components/OpenNotificationWithIcon";

export const SignUp = () => {
  const { register, handleSubmit, reset, formState: { errors } } = useForm<any>();
  const emailRef = useRef<string>('')
  const passwordRef = useRef<string>('')
  const onSubmit = async (data: any) => {
    try {
      const auth = getAuth()
      const userCredential = await createUserWithEmailAndPassword(
        auth,
        emailRef.current,
        passwordRef.current
      )
      await sendEmailVerification(userCredential.user)
      reset()
    } catch (e) {
      if (e instanceof FirebaseError) {
        openNotificationWithIcon({ type: "error", description: "サインアップに失敗しました" })
        console.log(e)
      }
    }
  }
  return (
    <div className="animate-pulse min-h-screen bg-slate-200 py-6 flex flex-col justify-center relative overflow-hidden sm:py-12">
      <span className="border text-4xl text-yellow-800 px-6 pt-10 pb-8 bg-white w-1/2 max-w-md mx-auto rounded-t-md sm:px-10">サインアップ</span>
      <div className="border relative px-4 pt-7 pb-8 bg-white shadow-xl w-1/2 max-w-md mx-auto sm:px-10 rounded-b-md">
        <form action="" onSubmit={handleSubmit(onSubmit)}>
          <label htmlFor="" className="block">Username or Email</label>
          <input
            {...register('email', {
              required: true,
            })}
            type="Email"
            id="email"
            name="email"
            className="border w-full h-10 px-3 mb-5 rounded-md"
            placeholder="Username or Email"
            onChange={(e) => emailRef.current = e.target.value}
          />
          <ErrorMessage children={errors.email?.type === "required" && "メールアドレスを入力してください"} />
          <label htmlFor="" className="block">Password</label>
          <input {...register('password', {
            required: true,
          })}
            type="password"
            id="password"
            name="password"
            className="border w-full h-10 px-3 mb-5 rounded-md"
            placeholder="password"
            onChange={(e) => passwordRef.current = e.target.value}
          />
          <ErrorMessage children={errors.password?.type === "required" && "パスワードを入力してください"} />
          <div className="flex items-start">
            <div className="flex items-start">
              <div className="flex items-center">
                <input required id="remember" aria-describedby="remember" type="checkbox" className="bg-gray-50 border border-gray-300 focus:ring-3 focus:ring-blue-300 h-4 w-4 rounded dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" />
              </div>
              <div className="text-sm ml-3">
                <label htmlFor="remember" className="font-medium text-gray-900">Remember me</label>
              </div>
            </div>
            <a href="#" className="text-sm text-blue-700 hover:underline ml-auto dark:text-blue-500">Lost
              Password?</a>
          </div>
          <button className="mt-5 bg-green-500 hover:bg-blue-700 shadow-xl text-white uppercase text-sm font-semibold px-14 py-3 rounded">サインアップ</button>
        </form>
      </div>
    </div>
  )
}

export default SignUp
```


Firebase authでエラーになる

rails(API)と、vuejsと、webpackerを使って認証機能を実装中です。
[Vue.js + Firebase を使って爆速でユーザ認証を実装する - Qiita](https://qiita.com/sin_tanaka/items/ea149a33bd9e4b388241)を参考にさせていただき、firebaseにemailとパスワードが保存されるように実装できました。
そこで、ログインしてないユーザーはホーム画面に遷移させるように、vuerouterの設定をしていました。
記事通りに、router.jsにRouter.beforeEachの設定を書いたところ、下記のエラー文が出てきました。
Router is not definedと出ていますが、vuerouterはちゃんと読み込んでるはずです。どこが原因かわからず質問させていただいた次第です。
ご教示のほど、よろしくお願いいたします。

```
router.js:33 Uncaught ReferenceError: Router is not defined
    at Module../app/javascript/router/router.js (router.js:33)
    at __webpack_require__ (bootstrap:19)
    at Module../app/javascript/packs/application.js (application.js:1)
    at __webpack_require__ (bootstrap:19)
    at Object.1 (log.js:56)
```
とエラーが出てきてきました。エラーに該当するファイルは下記になります。
```
# router.js

import Vue from "vue";
import VueRouter from "vue-router";
import MusicHome from "../pages/MusicHome.vue";
import MusicCreate from "../pages/MusicCreate.vue";
import MusicEdit from "../pages/MusicEdit.vue";
import MusicSearch from "../pages/MusicSearch.vue";
import MusicSearchResult from "../pages/MusicSearchResult.vue";
import SignUp from "../pages/SignUp.vue";
import SignIn from "../pages/SignIn.vue";
import firebase from '../plugins/firebase'

Vue.use(VueRouter);
// Vue.use(VuePaginate);

const routes = [
  {
    path: '*',
    redirect: 'signin'
  },
  { path: "/", name: "MusicHome",meta: { requiresAuth: true }, component: MusicHome },
  { path: "/create", name: "MusicCreate", component: MusicCreate },
  { path: "/edit/:id", name: "MusicEdit", component: MusicEdit },
  { path: "/search", name: "MusicSearch", component: MusicSearch },
  {
    path: "/result/:keyword",
    name: "MusicSearchResult",
    component: MusicSearchResult,
  },
  { path: "/signup", name: "signup", component: SignUp },
  { path: "/signin", name: "signin", component: SignIn },
];

Router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // すでに認証済みの場合は遷移
    if (firebase.auth().currentUser) {
      next()
      return
    }
    // まだ認証されていない場合は Firebase SDK からのコールバックを待つ
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        next()
      } else {
        next({ name: 'Home' })
      }
      return
    })
  }
  next()
})

export default new VueRouter({ routes });
```

```
# application.js

import Vue    from 'vue'
import App    from './App.vue'
import Router from '../router/router.js'
import Store  from '../store/store.js'


const app = new Vue({
   el: '#app',
   router: Router,
   store: Store,
   render: h => h(App)
})
```