質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

633閲覧

Vue.js + Firebase ログイン認証でつまづいた

kagepedia

総合スコア16

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2019/06/11 14:53

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

input 要素でユーザーから入力されるメールアドレスとパスワードが firebase.js のloginメソッドに渡っていないのではないでしょうか?

js

1// Login.vue 2 3methods: { 4 login() { 5 Firebase.login(this.email, this.password); 6 } 7}

js

1// firebase.js 2 3login(email, password) { 4 firebase.auth().signInWithEmailAndPassword(email, password).then(user => { 5 // 以下省略 6},

投稿2019/06/13 19:37

YukiYamashina

総合スコア1011

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kagepedia

2019/06/14 14:03 編集

ありがとうございます。 emailのstringは改善されたと思います。 .then以降の処理で以下のエラーが出るので修正したいと思います。 TypeError: Cannot read property 'then' of undefined TypeError: Cannot read property 'push' of undefinedも出ました。 alertの動きは発動してるので記述間違いですかね。。。 以下を参考にしたんですが、よければアドバイスお願いします。 https://stackoverflow.com/questions/24788171/typeerror-cannot-read-property-then-of-undefined
kagepedia

2019/06/14 14:21

TypeError: Cannot read property 'then' of undefinedこちらエラー消えました。 残るは、TypeError: Cannot read property 'push' of undefinedだけです。 ログイン後にTopにリダイレクトする処理を行いたいのですが、、、 pushでこけてしまう。
YukiYamashina

2019/06/14 15:05

this.$router.push のような呼び出し方ができるのは Vue インスタンスの内部だけですから、そのようなエラーが出るのだと思います。VueRouter のインスタンスを export しておいて、それを firebase.js で import すれば呼び出せると思います。
kagepedia

2019/06/14 16:37

ありがとうございます。 解決しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問