Firebase Authentication ログインできない

前提

ログイン機能をFirebaseのAuthenticationを使用して実装しようとしています。

実現したいこと

Firebase consoleに登録しているアカウントでログインをすると
consoleに'logged in'を表示させる。

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

エラーメッセージはありません

該当のソースコード

js
1import { initializeApp } from 'firebase/app';
2import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';
3
4const firebaseConfig = {
5    apiKey: 
6    authDomain: 
7    projectId: 
8    storageBucket:
9    messagingSenderId: 
10    appId:
11    measurementId:
12};
13// Initialize Firebase
14const app = initializeApp(firebaseConfig);
15// Initialize Firebase Authentication and get a reference to the service 
16const auth = getAuth(app);
17
18const loginpage = document.querySelector('.login_form')
19loginpage.addEventListener('submit', function(){
20
21    const email = document.getElementById("mail").value
22    const password = document.getElementById("password").value
23
24    signInWithEmailAndPassword(auth, email, password)
25        .then((userCredential) => {
26            console.log('logged in');
27            const user = userCredential.user
28            console.log(user);
29    })
30        .catch((error) => {
31            const errorCode = error.code
32            const errorMessage = error.message
33            console.log(email);
34            console.log(password);
35            console.log(errorCode);
36            console.log(errorMessage);
37    })
38});

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="description" content="">
7    <title>ログイン画面</title>
8    <link rel="stylesheet" href="login.css">
9    <link rel="icon" href="">
10    <script type="module" src="/bundle.js"></script>
11</head>
12
13<body>
14    <main>
15        <div class="content">
16            <h1 class="project_title">ログインページ</h1>
17            <form class="login_form">
18                <div class="info_mail">
19                    <p class="mailaddress">メールアドレス</p>
20                    <div class="frame">
21                        <input type="email" id="mail" name="mail" required placeholder="メールアドレスを入力してください">
22                    </div>
23                </div>
24                <div class="info_password">
25                    <p class="password">パスワード</p>
26                    <div class="frame">
27                        <input type="password" id="password" name="password" autocomplete = "off" required placeholder="パスワードを入力してください">
28                    </div>
29                </div>
30                <div class="button">
31                    <input type="submit" id="login" name="login" value="ログイン">
32                </div>
33            </form>
34        </div>
35    </main>
36</body>
37
38</html>

試したこと

エラーが発生しなかったのでどこに原因が存在するのか特定ができなかった。
firebaseとjsに関して初心者のだが、githubに上がっているソースコードを比較して
firebaseのログイン機能ではなくjsのソースコードに問題があるのではないかと考え、
https://www.gigas-jp.com/appnews/archives/12134
こちらの記事を参考にしてコードを修正してみたが、解決できなかった。

補足情報（FW/ツールのバージョンなど）

firebase version: 11.18.0
npm version: 8.19.2
Mac(M1) 13.0.1（22A400）

suika-

2022/12/15 08:27

firebaseのimportをファイルではなくCDNで試してみましたか？

takaya14

2022/12/15 09:50

質問いただきありがとうございます。 CDNでは試していなかったので、試してみたところ consoleには出力されなかったのですが、firebase consoleでログイン状況を確認したところ今まで表示されていなかった最終ログイン日が表示されていたので、おそらくですがログイン自体はできるようになったのですが、未だコンソールには出力はされません。

行動規範の内容に同意します

回答1件

ベストアンサー

質問から続きます。
firebaseはローカルのJSを読み込む場合SSLが必要だった気がしたのでCDNを提案しました。
（firebaseのCDNはhttpsなので)
ログインできているにもかかわらずconsoleに出力されない問題ですが、これはsubmitがfirebaseと相性が悪いためエラーが発生し、それをcatchでエラーを拾ってるだけです。
submitはfirebaseと相性が悪いので、clickイベントを使うことを推奨します。

投稿2022/12/15 14:42

suika-

総合スコア12

takaya14

2022/12/16 06:32

ご返信が遅くなり失礼いたしました。ご回答いただきありがとうございます。質問が重なってしまい申し訳ないのですが、・firebaseはローカルのJSを読み込む場合SSLが必要というのは公式ドキュメントのどのあたりに記載されていますでしょうか。ご教示していただいたとおり修正して試してみます。

suika-

2022/12/16 10:58

公式ドキュメントに記載されているかどうかは分かりませんが、セキュリティ対策を万全にしなければならない認証機能を非SSLでもokとはならないと思います。firebase hostingは無料でSSLサイトを構築可能なので利用してみてください。問題に関連するstackoverflowのスレッドです https://stackoverflow.com/questions/42722354/should-firebase-auth-with-javascript-use-https

takaya14

2022/12/17 02:31

ご教示していただきありがとうございます。とりあえずFirebaseでのログイン機能に関しては実装できましたのでベストアンサーにさせていただきます。

行動規範の内容に同意します