I started experimenting Firebase web v9 APIs for my side hustle project along with Vue 3. I worked with Firebase earlier API set. So initializing the project and getting started with Vue didn't take much of my time.
But to the surprise, I got a fantastic experience with Firebase web v9 APIs with Vue composition APIs. I am going to explain how easy to get started with the integration.
Scenario
To continue on the API exploration, I will consider Firebase sign-up functionality with email and password.
Install Firebase web v9 API
// latest firebase module is firebase@9.0.0-beta.5
npm install --save firebase@9.0.0-beta.5
Firebase configuration for communication
//src/services/firebase.js
//Add your project related keys in the below configuration
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
const firebaseConfig = {
apiKey: "<change>",
authDomain: "<change>",
projectId: "<change>",
storageBucket: "<change>",
messagingSenderId: "<change>",
appId: "<change>",
measurementId: "<change>"
};
const firebaseApp = initializeApp(firebaseConfig);
const auth = getAuth(firebaseApp);
export { auth };
//src/services/UserService.js
import { auth } from './firebase';
import { createUserWithEmailAndPassword } from '@firebase/auth';
export default {
async signupWithEmail(data) {
console.log('UserService.signupWithEmail()');
createUserWithEmailAndPassword(auth, data.email, data.password)
.then((credential) => {
const user = credential.user;
console.log(user);
})
.catch((error) => {
console.error('Error ', error.message);
});
}
};
Signup form in Vue
//src/components/Signup.vue
//NOTE: Ignore the css classes for now
<template>
<section class="p-main">
<div class="signup-wrapper">
<div class="signup-title title">
Sign Up
</div>
<form @submit.prevent>
<div class="signup-form">
<div class="w-full">
<input type="text" id="email" v-model="user.email" placeholder="Enter your email">
</div>
<div class="w-full">
<input type="password" id="password" v-model="user.password" placeholder="Enter your password">
</div>
<div class="btn-primary w-full text-center">
<!-- <a href="" class="link-white">Signup</a> -->
<button class="btn-primary" @click="onSignup">Signup</button>
</div>
<div class="px-16 mt-2 bg-gray-200"><hr></div>
<div class="text-center">
Already having an account?
</div>
<div class="text-center">
<router-link :to="{ name: 'Signin'}">
Sign In
</router-link>
</div>
</div>
</form>
</div>
</section>
</template>
<script>
import { useRouter } from "vue-router";
import UserService from '../services/UserService';
export default {
setup() {
const router = useRouter();
const user = {
email: '',
password: ''
};
const onSignup = () => {
console.log(user);
UserService.signupWithEmail(user);
setTimeout(() => {
router.push({name: "Home"});
}, 1000);
};
return {
user,
onSignup
}
},
}
</script>
Importance of Firebase web v9 API
- The new API follows the modular SDK, that produces reduced SDK output based on your imports
- Provides greater supports with Javascript build tools
- Follows ES6 approach which is familiar to every Javascript developers
NOTE: Firebase web v9 APIs are still in beta stage. So there might be some breaking API changes in the future.
Originally published on https://tech.tham.xyz
Top comments (0)