Authentication Workflow in vue.js apps using Firebase 2021
Here we will develop an authentication workflow for vue.js apps using firebase and vuetify from scratch
Demo
It's always better to have a look at what we are building. So here is the demo for you.
Visit: https://vueauthfire.web.app/
Github Repository: https://github.com/sushil-kamble/vue-auth-fire
Check with the following credentials
Email Address: test@gmail.com
Password: test@12345
Let's get started
Requirements
Configurations
- Create a project using vue-cli (vue-router and vuex)
Add vue-router and vuex compulsorily. You can use vue 3 but keep in mind that vuetify was no support for it as of now. Here I am using vue 2 along with vuetify.
- Go to the root directory and enter the following commands.
vue add vuetify
npm i firebase
- Go to Firebase console. Add Project. In Project Overview, click on the web icon and register the app. Copy
firebaseConfig
object. Click onAuthetication
, then onSet up sign-in method
. Enable Email/password authentication.
The firebase config object that you have just copied onto your clipboard contains important data about your project. You will finally push this project code to Github,so you don’t want that data to be exposed. So it is recommended to create a .env.local file.
- Create a
.env.local
file in your project's root. - I have created a small project that will speed up this process. Visit env-firebase. Select vue and paste your firebase config there, then click on the green copy button and paste it into
.env.local
. - Open
src/firebase/init.js
in your project file.
Firebase handles all the authentication for us. It also handles sessions for users, So that when users refresh the page they will be still logged in. But there is a small problem, it requires some time to fetch the session details and initialize the app, and the vue app loads quickly before that initialization is done which results in some problems. The solution to this problem is to load the vue app after the firebase app gets initialized.
- Open
src/main.js
in your project file.
- Setup store. Open
store/index.js
- Now Finally set up the router. Open
router/index.js
If you are using vue 3. This snippets of code will not work. If you want this to work with vue 3. Then have a look at the offical guide of vue 3, vue-router and vuex. Try to replicate above snippets.
You are all set up
Now remaining part is UI design which you can do with ease with the help of vuetify.
If you want to replicate what I have shown you in the above demo.
- After following all the above steps.
- Go to this repository. Download and extract it.
- Copy
components
&views
folder from the extracted folder and replace it with your projectscomponents
&views
folder.
OR
Just follow the steps in the readme from the repository.