I want to make a form that will do authentication with the help of firebase 9. Project is made with Vue3. I have an HTML form:
<form @submit.prevent="registr">
<div class="inputs">
<div class="input user">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username" v-model="username">
</div>
<div class="input email">
<i class="fas fa-at"></i>
<input type="email" placeholder="Email" v-model="email">
</div>
<div class="input password">
<i class="fas fa-key"></i>
<input type="password" placeholder="password" v-model="password">
</div>
</div>
<button type="submit"> Sign In </button>
</form>
imports:
import 'animate.css';
import "firebase/auth"
import { createUserWithEmailAndPassword } from "firebase/auth";
and data & methods in script part:
data() {
return{
username: null,
email: null,
password: null,
}
},
methods: {
register(){
console.log('WORK');
createUserWithEmailAndPassword(this.email, this.password)
.then(() => {
console.log('success')
})
.catch(err => {
console.error(err)
})
}
}
Though, any part of the methods is not working, even simple console.log, which I add to see if form connects with function in the right way. Also, i have an error in console: Uncaught TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_7__.default is undefined. Why method is not working with the form?
To initialize firebase i used following code:
import { initializeApp } from 'firebase/app';
import 'firebase/auth';
const firebaseConfig = {
apiKey: "#################################",
authDomain: "decbase-#####.firebaseapp.com",
projectId: "decbase-#####",
storageBucket: "decbase-#####.appspot.com",
messagingSenderId: "############",
appId: "1:0000000000:web:aaaaaaaaaaaaaaaaaaaaaa"
};
const firebaseApp = initializeApp(firebaseConfig);
export default firebaseApp;
in the initialization:
import { initializeApp } from 'firebase/app';
import {getAuth} from 'firebase/auth';
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "############################################",
authDomain: "#####-#####.firebaseapp.com",
projectId: "#####-#####",
storageBucket: "#####-#####.appspot.com",
messagingSenderId: "############",
appId: "1:00000000000:web:######################"
};
const firebaseApp = initializeApp(firebaseConfig);
export default getAuth(firebaseApp);
methods& imports in the component:
import "firebase/auth"
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
methods: {
async register(){
console.log("WORK");
const auth = getAuth();
createUserWithEmailAndPassword(auth, this.email, this.password)
.then(() => {
console.log("success")
})
.catch(err => {
console.error(err)
})
}
and in the HTML part in button tag should be added @click:
<button type="submit" @click="register"> Sign In </button>