How to build a Multi-user Notebook Application with Vue3, Vuex and Firebase: Login, Signup, Forgot Password
Part 3: Firebase Auth Implementation. Free Code Provided.
This is my journey to develop a multi-user notebook application. This article is how I build Login, Signup and ForgotPassword pages with Modal component, and the FB Login.
Set up the pages
Make three pages and link them through <router-link/> .
We want to save user’s input data in-app. In order to reach out to the firebase in a later step. To do so we have to use v-model to bind input data with properties created in our data object. By the way, the v-model can also bind with checkbox, radio and select.
Make a Modal
Start from outline the Modal.vue . Modal is a component we want to use in the whole app. We can change the content of the Modal by need. To do this we use prop. The prop is how we sent the message into a component, and emit is how we sent the message out of a component. {{ }} defines where to place the message which defined as a prop. Then prop could become an attribute in the component.
<p>{{ this.modalMessage }}</p>We want to close the Modal after clicking the close button. Make a button will run a function to sent a message out of the Modal component when we click it. This allows us to use that message to close the modal.
<button @click=”closeModal”>Close</button>In the script section, we have to accept the prop. Define the closeModal function to emit a signal out of the Modal.vue .
Listen to event close-modal and then run a function called closeModal. Then we define this closeModal function in methods.
<Modal v-on:close-modal=”closeModal” />What is Firebase?
Firebase is a mobile application development platform from Google with powerful features for developing, handling, and enhancing applications. Firebase projects are containers for your apps. Apps in a project share features like Real-time Database and Analytics.
It might be an error when we build the app something about the version.**NOTICE: Firebase version 9.0.0 changed to Firebase SDK which having totally different syntax from the older version.
Sign up
When we click signup we want to run a function called to register. Remember to use @click.prevent .This register function will make sure all info is filled or it will popup an error to the user. If the user filled in all info we then create a user with email and password in our firebase authentication. And we want it to save in our firebase firestore in a collection called users with the user’s all info.
Login
In the Login section, we want to sign in with an email and password and go into the app based on the account. The first part to login is easy by firebase syntax: signInWithEmailAndPassword
The way we get the user id:
firebase.auth().currentUser.uidThe second part is not that simple. Because the Vue is initialized faster than firebase we can not get the user’s account data after log in. We just need to wait for getting our current user id. Firebase has this method called onAuthStateChanged that we can use to detect when firebase is ready. We go to main.js entry file import firebase and firebase/auth.
Forgot Password
We are going to create a method by sendPasswordResetEmail to reset passwords.
Firebase FB Login
First we add the FB Login. We need to apply facebook developer and firebase. Then we are going to connect FB and Firebase. In facebook developer we need to create a FB application and get the App id. In Firebase we go to authentication paste in the App id and App key copied from facebook developer. We go to FB developer and paste in the OAuth copied from firebase.
Remember to paste facebook-domain-verification copied from FB developer into our HTML file:
<meta name=”facebook-domain-verification” content=”...”/>We want to make a method to login with FB. I recommend useredirect is more friendly in mobile. Here is other options Authenticate with Facebook login via JavaScript
async fbRegister() {var provider = new firebase.auth.FacebookAuthProvider();firebase.auth().signInWithRedirect(provider);},
Remener to add our website domain address in Firebase’ authentication’s Authorized domains. And make the FB developer’s App online with authorized domain.
The next Article is about Vuex and accessing API:
Part 4: Using Firebase to add profile menu
Others articles:
Part 5: Using TipTap
Get the Code
you can get the finished code in my GitHub account. Please help me out and star the repo when you get the code. Hope you have a lovely coding journey. Find me on IG! I am a freelance theatre maker.
