Build a YouTube bookmarking site - part three - Authentication with Firebase

In this part, we are going to set up authentication using Firebase Authentication. We are going to create a sign up form and a login form, and we're also showing you how to sign out a user.

Enabling authentication in Firebase Console

The first this we can do is to enable authentication in the Firebase Console. So go to firebase.google.com, sign in and click "Go to console".

Click on the VueTube project we created in the previous part.

VueTube - Select project

When you have arrived at the dashboard for the project, you can click on "Authentication" in the menu to the right.

VueTube - Click authentication

As you can see here there isn't any authentication methods enabled, so we need to enable one. Click the "Set up sign-in method" button.

VueTube - Sign-in method

In this course we are just going to use email/password authentication, so this is the only one we need to enable. If you click "Email/Password" in the list, and then check the "Enable" button and hit "Save".

VueTube - Email/Password

Now the authentication is ready on the Firebase side of the project.

Sign up form

We are continuing with the code from the previous part of the course. Let's start by adding a new file in the "views"-folder. Call it "SignUp.vue". You can add a template tag with a little bit of code and the default script tag.

<template>
    <div>
        <h1>Sign up</h1>
    </div>
</template>

<script>
export default {
    name: 'signup',
    data () {
        return {
        }
    }
}
</script>

Not much is going on here yet. It's just the basic so that the project don't crash when we add this view/page to the router. Next you can open up the "router.js" file, so we can make it possible to navigate to the sign up view.

VueTube - Router

At the top we import the SignUp view, but we have also added the view down in the router array. Last part we need to do before we can see the view, is to add a link in the navigation at the top. So open up "App.vue" and add a <router-link> after the about link.

You can now open your browser. You will see that there is a new button in the navigation at the top, if you click it you should be redirected to the SignUp view looking like this.

VueTube - Sign up view 1

Okay, perfect. Let's add a form with fields for email and password. The code for this is simple and can be added under the Sign up title.

VueTube - Sign up form

But that's not all we need to do in order for this to work. We need to connect the two input field with variables in the data array and we need a method to handle the form submit. First you can add the two variables.

VueTube - Data array

Email and password will now be bound to the two input fields. So if we type anything in the fields, our Vue app will know about it. Under the data array we can add one more property called "methods" and put the "signUp" function inside.

VueTube - Sign up function

When the "signUp" function is called, we log "Sign up" to the console, just to know that the function is being called correctly. Under the logging, we have added a call to the Firebase API. The function createUserWithEmailAndPassword takes to parameters, the email and the password we have in our data array.

We also added a "catch" under the call, so that if there is an error with the sign up, we receive a error message from Firebase. You should now be able to try the sign up functionality. If you try to submit it with no information or with a badly formatted email address you'll get an error message looking like this.

VueTube - Error message

Firebase is so good to work with. Once you have signed up, you'll be logged in, thanks to sessions from Firebase. We need a way to show if we are logged in or not. So add one more variable to our data array called isAuthenticated with the value of false. Under the sign up form we can add a string and print the value of isAuthenticated.

Is authenticated: {{ isAuthenticated }}

Before we test this we need to add a listener to our view, which will listen for state changes from Firebase. Inside the script tag we can add one more property called "created", where we will put the listener.

VueTube - State listener

Again we use the firebase.auth() function. When we receive a state change we check if the user is authenticated, and set isAuthenticated to true. If you refresh now you will see that we are still signed in!

Log in form

Let's continue by adding a new file to the "views"-folder, call it "LogIn.vue". To make things simple we can just copy everything from SignUp.vue and paste it in the LogIn.vue file. To make this work we rename everything from SignUp to LogIn. And instead of createUserWithEmailAndPassword we use a function called signInWithEmailAndPassord.

You can also change the router.js and App.vue. Inside the router.js you import LogIn and add the route to the array in the same way as the SignUp view. In the top of App.vue we can add a link to the LogIn view.

VueTube - Login view

Since we now will be automatically logged in when we go to /login we need to add a logout function and button. Under the isAuthenticated string we print out you can add a button with a click event.

<hr>
<button @click="logOut">Log out</div>

But nothing will happen when you click it because we have not added the logOut method yet. Scroll down to the methods array and add a function called logOut.

logOut() {
    console.log('Log out')

    firebase.auth().signOut()
        .then(() => &lbrace
            this.isAuthenticated = false // Reset the variable
        })
}

And was actually it. You should now be able to click the "Log out" button and the isAuthenticated should change to false. Try to log in again using the credentials you typed in when you created your account.

VueTube - Logged out

Summary

Now that we have our authentication in order, we can go to the next part. There we will install the CSS framework Bulma and set up some of the basic structure of our VueTube App. I hope you enjoyed setting it up and if there is anything you want to ask you can find Vue Hero at Facebook


PreviousNext

Buy me a coffee

I'm working hard to create quality courses and lessons. Please consider buying me a coffee or three to support my work.