Building a Progressive Quiz App with Vue, Vuex, and Firestore: Part 2
This is part two of my vuejs progressive quiz app tutorial. In this part we will be doing authentication with the firebase authentication package and vuex.
- part 1: project setup
- part 2: authentication with Firebase and Vuex
- part 3: quiz creation
- part 4: taking quizes
- part 5: making it progressive
links:
Let’s Authenticate
Authenticating users with firebase is easy, in fact, it’s the best thing I like about firebase. We just have to setup authentication methods in the firebase project’s dashboard and then code the process in our app. The process in it self is fairly simple too, we’re going to do Google authentication only.
Firebase authentication setup
Now we will setup google authentication. Go to your project inside the firebase console and you should be presented with this dashboard
Now go to the authentication page
Click on setup sign in method
You can see that we have multipe options. Click on google and press the enable switch on the top right corner, then click save
User module
We need to store the user details in our store so we can access it from any component. Let’s go ahead and start coding the user module. We will need to store profile information, so we will create an empty profile object in the state. Then we need to create a login action that will be called when we click the login button in the toolbar
We grabed the firebase instance that we intialized in the previous tutorial and we used it to make a google popup login. We’re logging the result which is the user info and a jwt token. Now let’s link this action to the toolbar login button.
First we will create a toolbar component and seperate it from the app component, the toolbar will be a functional component since it will not do a lot in our case. we will pass it a login function which will map to the user’s login action.
We used the mapActions helper function from vuex to get the login action from the module. Notice we specified the module name as the first param since we’re using namespaced modules (their actions are self-contained ). Once we click on the login button a popup will appear and let’s us choose our google account:
After a successful login firebase will store the generated jwt inside our local storage. Now let’s create a mutation that will set our user profile, we will create a file called mutations.js inside the user folder:
Now we will import the set profile mutation inside the module and use it to setup the user’s profile when he logs in. We will track his login state with a loggedIn boolean.
if you login and check the vue devtools you will see that the state has changed.
Authentication state
We don’t want our users to login everytime they refresh our web app. So we need to keep track of their authentication state. Firebase provides a method called onAuthStateChanged. The method will react to our authentication state, if it finds that there is a jwt inside our LocalStorage it will execute a callback containing a user object. Also if it finds that the jwt is deleted or missing from the beginning it will invoke the callback with the user param containing null.
To keep things clean, we will create an auth.js file that will keep track of the auth state, if we’re logged in we will call the setprofile mutation with the user object, otherwise we will call the logout mutation which will reset the auth state in vuex.
We need to include the file inside our main.js to work:
The logout action will logout the user. The logout mutation will reset his state. For some refactoring, since the set profile mutation is called when our auth state is changed from the auth.js file, there is no need to call it inside the login action.
Updating the UI
Finally, we will show our avatar in the toolbar with a logout button if we’re loggedin, otherwise we will show the login button. We need to create a getter that will return the user profile and logged in state. A getter will recieve the state as a param, we’re going to extract the properties we need using the es6 destructing feature and return them.
Then we will get them inside App.vue with the mapGetters helper function and pass them to the toolbar component
Inside Toolbar.vue we will do conditional rendering to switch between our avatar and the login button:
Conclusion
Authentication is done 😎. On the next part we will start coding the quiz creation process. Stay tuned for more vue and firebase awesomeness.
