前提・実現したいこと
Vue.jsとFirebaseでログイン機能を実装したいです。
新規登録画面で、v-modelでemailとpasswordそれぞれを結びつけ、作成したaxiosのインスタンスをimportして、axiosでエンドポイントにアクセスするregisterメソッドを定義、ボタンを押したらregisterメソッドを発火したいです。
成功すると、コンソールのObjectにデータが返ってくるはずなのですが、うまくいきません。よろしくお願いします。
エラーメッセージ
Error in v-on handler: "TypeError: _axios_for_auth_js__WEBPACK_IMPORTED_MODULE_0__.default.port is not a function"
試したこと
package.jsonのdevDependenciesにaxiosがなかったせいかなと思い、axiosをインストールしました。
補足情報(FW/ツールのバージョンなど)
"@vue/cli-plugin-babel": "^4.5.13",
"@vue/cli-plugin-eslint": "^4.5.13",
"@vue/cli-service": "^4.5.13",
"axios": "^0.21.1",
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.12"
該当のソースコード
Register.vue
<template>
<div class="container">
<h2>新規会員登録</h2>
<form class="login-form">
<div class="input-group">
<label for="email">メールアドレス</label>
<input type="email" id="email" v-model="email">
</div>
<div class="input-group">
<label for="password">パスワード</label><
<input type="password" id="password" v-model="password">
</div>
<div class="input-group">
<button type="button" @click="register()">登録</button>
</div>
</form>
</div>
</template>
<script>
import axios from '../axios-for-auth.js';
export default {
data() {
return {
email:"",
password:""
}
},
methods: {
register() {
axios.port(
'/accounts:signInWithPassword?key=***************************',
{
email: this.email,
password: this.password,
returnSecureToken: true
}
).then((response) => {
console.log(response);
});
this.email = "";
this.pasword = "";
}
}
}
</script>
axios-for-auth.js
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://identitytoolkit.googleapis.com/v1'
});
export default instance;
package.json
"devDependencies": {
"@vue/cli-plugin-babel": "^4.5.13",
"@vue/cli-plugin-eslint": "^4.5.13",
"@vue/cli-service": "^4.5.13",
"axios": "^0.21.1",
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.12"
},