前提・実現したいこと
Vue.js + Firebase でログイン認証(emailとpassword)を実装したい。
発生している問題・エラーメッセージ
signInWithEmailAndPassword failed: First argument "email" must be a valid string.
該当のソースコード
Login.vue
<template> <div class="login"> <h2>Login</h2> <input type="email" placeholder="Email" v-model="email"> <input type="password" placeholder="Password" v-model="password"> <button @click="login">Login</button> <p>Do you have an account? <router-link to="/register">create account now!!</router-link> </p> </div> </template> <script> import Firebase from './../js/firebase'; export default { name: 'login', created: function() { Firebase.onAuth(); }, data () { return { email: '', password: '', } }, methods: { login() { Firebase.login(); } } } </script>
firebase.js
import firebase from "@firebase/app"; import "@firebase/auth"; import store from "./store"; // Your web app's Firebase configuration var firebaseConfig = { //firebase key... }; export default { init() { firebase.initializeApp(firebaseConfig); firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION); }, register() { firebase.auth().createUserWithEmailAndPassword(this.email, this.password) }, login() { firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(user => { alert('Success!') this.$router.push('/') }, err => { alert(err.message) } ) }, logout() { firebase.auth().signOut() }, onAuth() { firebase.auth().onAuthStateChanged(user => { user = user ? user : {}; store.commit('onAuthStateChanged', user); store.commit('onUserStatusChanged', user.uid ? true : false); }); } };
store.js
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { user: {}, status: false }, mutations: { onAuthStateChanged(state, user) { state.user = user; //firebaseが返したユーザー情報 }, onUserStatusChanged(state, status) { state.status = status; //ログインしてるかどうか true or false } }, getters: { user(state) { return state.user; }, isSignedIn(state) { return state.status; } } });
試したこと
console.logでエラーログを調べた。
以下の警告が出ていた。
[Vue warn]: Error in v-on handler: "Error: signInWithEmailAndPassword failed: First argument "email" must be a valid string."
補足情報(FW/ツールのバージョンなど)
vue.js 3.8.2
Vue CLI3
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/14 14:03 編集
2019/06/14 14:21
2019/06/14 15:05
2019/06/14 16:37