前提
ログイン機能を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 Firebase14const 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").value22 const password = document.getElementById("password").value23 24 signInWithEmailAndPassword(auth, email, password)25 .then((userCredential) => {26 console.log('logged in');27 const user = userCredential.user28 console.log(user);29 })30 .catch((error) => {31 const errorCode = error.code32 const errorMessage = error.message33 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）
0 コメント