Create Firebase authentication with Vue3,Tailwind Css,Pinia
Tags: vue, webdev, pinia
Published: 2022-07-22 18:51:54

At first lets us look th e way to authenticate Firebase without Pinia. Here we are not going to discuss how to install firebase,pinia,Vue,Tailwind. If you dont know please have a look at the previous blog
This is how your config.js file will look like i put it in a folder named firebase 
***Without Pinia***
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/devqxbaey5vohpdvwogx.png)
  `In Register.vue`
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z27vx5t7x93jn9ijqpke.png)
Its a simple form and now in script part 
![registerimage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqgh6nhasgb225oru2f9.png)
**auth,createUserWithEmailAndPassword** is imported from firebase config files here from firebase/config.js files
Here we see in firebase dashboard panel 
![firebaseadmin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfknfwgwwg6dnjfte5g3.png)
So now a user is registered
***In Pinia***
Now the understanding will be clear how easy things are in Pinia
in store ***useAuthStore.js***
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3d4znx8lyow6k7pk70u.png)
We see now the registration under actions 
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02w919bs4uaohbe78day.png)
***IN Register.vue***
In template part in case ```<input type="text" v-model="store.email" class="border-b-2 border-gray-300 w-4/5  py-1" name="" id=""><br>`` in place of ``v-model="email"` the same will be in place of password
 In script part i have put everything under 
![Imageregister](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzn0j36oc01cstrc1k9o.png)
 So we see we take the whole authStore import it and keep inside variable store.
**The Login and Logout is shown as follows**
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gik3k8mh0zek8t3i1smm.png)
In ***Login.vue***
![Imagelogin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jibv24j6fv5irji0xjl.png)
Same as Register.vue
 
 In Navbar.vue 
![Imagelogoutbutton](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvsaq1pw67758422ieii.png)
***IN script setup ***
![Imagelogout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0u4zj5oucp3mdr9qenz9.png)
 
 ***onAuthStateChanged**-Check whether a user is authenticated or not 
```useAuthStore.js```
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8nrsog6s27n1kxt6yuly.png)
In state declare a new object called user 
then in actions define a function called init()
![actions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqurcjvo30guquh01ckg.png)
In App.vue We need to initialize init() function in unMounted hook
![init](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dui2fwxk739css1mbn15.png)
 
If user is logged in we set the user uid and email of the authenticated user
While you are logged in if you enter Vue devtools you will see this
![pinialoggedin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shyfyv5ypimdlm2bo9ef.png)
While logged out
 
You will see its empty 
![loggedout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6penosutz7vb4iwgj4x.png)
Route protection
 ![protectingroute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfv2cxl1aw6l2795rqfa.png)
If now any route needs to be guarded that should be done like this just in that route write ***beforeEnter*** and the ***requireAuth** like mentioned here