In this tutorial, we will see how to quickly add the Firebase Social Sign In feature into your Vue application.

I previously wrote a tutorial on how to build a Vue app with Firebase authentication system, and if you didn’t read it before, I advise you to quickly take a look at it, since I will use it as a base for this tutorial.

If you already have, then you can consider this new one like the part II ;)

What Is Social Sign In?

Social Login is single sign-on for end users. Using existing login information from a social network provider like Facebook, Twitter, or Google, the user can sign into a third party website instead of creating a new account specifically for that website. This simplifies registrations and logins for end users.

from auth0.com: https://auth0.com/learn/social-login/

In summary, Social Sign In allows you to connect to different applications without having to create each time a new account.

Firebase Social Sign In feature

Firebase comes with a powerful authentication system. This system allows you to either create account manually, with the traditional email/password combination (as shown in my previous tutorial), or use some pre-defined methods to authenticate your users with OAuth into your application. (And if you want, with Firebase, you can even authenticate your users using their phone numbers!)

The providers available are Google, Facebook, Twitter, Github and Play Games.

In this tutorial, we will use the Google social sign-in provider as an example, since the other providers require to have specific API keys. But don’t be afraid, all the methods are very similar, so if you implement the Social Sign In feature with one provider, you’ll be able to easily replicate it with all other providers!

Let’s start!

As said in the introduction, for this tutorial, we will continue from where we left in How to build a Vue app with Firebase authentication system in 15 minutes.

If you don’t want to go over the full tutorial, that’s fine, here is a small recap:

We created a Vue application that contains three views, two (Login view and Sign Up view) that we can access only without authentication, and one (Home view) that we can access only with authentication.

Using Firebase and vue-router, we implemented the navigation of the app. The Login view allows you to connect to your application, and the Sign Up view allows you to create an account, using email/password combination. After login successfully or after a new account creation, the app redirect you to the authenticated part of the app, the Home view. If you try to access a view that requires authentication without being actually authenticated, it redirects you to the Login view, and vice versa.

All the implementation of the account creation, the login with email/password, and the navigation between views is already done. You can find all the source in: https://github.com/CaptainYouz/vue-firebase-tutorial.

LET’S WRITE SOME CODE!

For this new tutorial, we will add the Social Sign In feature of Firebase in the Login view.

To do so, there is two possible solutions. The first one, is to create a simple html button and trigger the Firebase social sign in method on click, and the second one, is to use FirebaseUI.

FirebaseUI is an open-source JavaScript library for Web that provides simple, customizable UI bindings on top of Firebase SDKs. 

documentation: https://firebase.google.com/docs/auth/web/firebaseui

For this tutorial, we will go manually and do the first solution, since we already have everything in place for our Login process.

Step One: Adding the Social Sign In button to the Login view

1–1 Create the html/css

Let’s clone our application from Github and install all the dependencies by running npm install.

When everything is installed, let’s start our application by running npm run start , open the app in our web browser (url: http://localhost:8080) and take a look at the current Login view. We should have something like this:

Now, let’s open our Login component in src/views/Login.vue and add the part where our Social Sign In button will be displayed.

I’ve created a button with an image inside, image that I have download here and saved inside the /assets directory under the name google-logo.png .

Also, I’ve created some style for the beauty of our social sign in button ;)

So now, or Login view should look like this:

Now that we have everything ready in our Login view, let’s add the logic to login into our app with a Google account.

Step Two: Connect with a Google account using Firebase Authentication

To do so, you’ll first need to enable Social Sign In authentication with Google provider in your Firebase app. Go to console.firebase.google.com and select your project, then go to the authentication view and select the ‘Sign-In Method’ tab.

Then, in this view, select the Google provider and enable it.

click on Save and voila! You now have your Firebase project ready to authenticate users using their Google accounts. Let’s now see how to implement the code.

2–1 Add the Firebase method

To connect using Social Sign In, first of all, you’ll need to get back the corresponding social provider you want to login with. In our case, as said before, we are going to use Google provider. To get back the Google provider with Firebase, we are going to use a Firebase method of the auth object, called GoogleAuthProvider (doc: https://firebase.google.com/docs/reference/js/firebase.auth.GoogleAuthProvider).

Then, we’ll need our users to sign in with this provider, and with Firebase, you can do so either by opening a pop-up window or by redirecting to a sign-in page. To have more information about those two solutions, you can check the Firebase doc here (part 5): https://firebase.google.com/docs/auth/web/google-signin.

In our case, since we want to do an action (redirecting) after the login, we are going to use the pop up method.

The method to open a popup is called signInWithPopup and is very similar to our previous signInWithEmailAndPassword . The api documentation says:

signInWithPopup(provider) returns firebase.Promise containing non-null firebase.auth.UserCredential

Authenticates a Firebase client using a popup-based OAuth authentication flow.

If succeeds, returns the signed in user along with the provider's credential. If sign in was unsuccessful, returns an error object containing additional information about the error.
from: https://firebase.google.com/docs/reference/js/firebase.auth.Auth

So, that’s perfect for our use case. Now let’s translate this into code. In our Login.vue file:

We attach the click event of our Google button to the socialLogin method. In this method, as said before, we first get back an instance of the Google provider object, then we authenticate users using the signInWithPopup method.

The callback for our success response is a simple function that redirects the user to the Home view. (The result parameter contains information about the user.) In this case, the user has successfully login with his Google account.

If something went wrong during the social login, in our error callback, we display the error message in an alert (the catch function). To know more about the type of possible error of social sign in, you can check the doc here: https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signInWithPopup

You can also notice that the success and error callbacks are exactly the same as the ones in our signInWithEmailAndPassword. If your app logic is the same after login with email/password and social account, you can even factorize this code and use the same callback functions for both signInWithEmailAndPassword and signInWithPopup.

Now, if you click on the Google button we created before, you should have the Google Authentication popup open. After choosing your Google account, the popup should disappear and you should be redirect to the home view.

And that is basically it! You have now authenticated into your app using Social Sign In. Pretty simple, right?

You can also add option to your Social Sign In process, but that depends of the provider you choose. For the Google provider, you can have all information in the documentation: https://firebase.google.com/docs/auth/web/google-signin.

Other Social providers

What if you need to add more social providers ? Well, with Firebase, it’s pretty much the same as we did for the Google provider. The only differences is that, first, when you will enable the provider in Firebase (beginning of step two), you will be required to add your API keys, and second, you’ll need to get back the corresponding provider (but don’t worry, Firebase have all the required methods for this).

To have API keys, you generally need to create an app with the social provider you want to use. If you want for example to add Twitter Social Sign In, everything about how to get back API keys and create an app is explained in their documentation: https://developer.twitter.com/en/docs/basics/authentication/overview/oauth.html

Also, Firebase have a documentation page for each social provider (Twitter: https://firebase.google.com/docs/auth/web/twitter-login for instance).

The End

We now have a small Vue app using Firebase authentication system, either with email/password or OAuth !

All the sources are available on Github in the social-sign-in branch: https://github.com/captainyouz/vue-firebase-tutorial/tree/social-sign-in.

Anas.

In this tutorial, we will see how to quickly build a web application with an authentication system using Vue 2, vue-router and Firebase.

10/11/2018: I’ve just updated this tutorial so it can be used with the awesome Vue Cli 3 and the latest version of Vue. All the sources of the previous version are still available in the Github repository (github.com/CaptainYouz/vue-firebase-tutorial) before the ‘update-vue-cli` tag.

What is Vue.js ?

Here is an overview of this amazing and lightweight javascript framework:

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects

from vuejs official documentation: https://vuejs.org/v2/guide

Why Vue.js ?

Vue.js is very easy to use, powerful and well documented. In the age of new javascript frameworks that are component-driven, Vue stands out by his simplicity and his performance. The eco-system is vibrant, with more and more people switching to Vue every day.

If you want to go deeper in why you should use Vue.js, you can check this comparaison with other javascript framework: https://vuejs.org/v2/guide/comparison.html

What is Firebase ?

Firebase is a mobile and web application development platform. Firebase is made up of complementary features that developers can mix-and-match to fit their needs. [...] Firebase's initial product was a realtime database, which provides an API that allows developers to store and sync data across multiple clients. Over time, it has expanded its product line to become a full suite for app development.

from wikipedia: https://en.wikipedia.org/wiki/Firebase

In short terms, Firebase is a set of tools that allows you to develop an application without server-side programming. It has realtime database, authentication system, crash reporting, analytics and other services ready to use in your mobile/web app. That way, you can focus on your app and users.

Why Firebase ?

For application with minimal back-end needs such as authentication or database storage, no need to re-invent the wheel, Firebase does it for you, and gives you much more tools. Also, you don’t need to bother about scaling, server performance and database size, Firebase scales everything automatically.

Let’s start !

First, we are going to initialize a new Vue project by using the great tool Vue Cli 3 (https://github.com/vuejs/vue-cli).

If you don’t already have vue cli installed, let’s install it:

$ npm install -g @vue/cli

Now that you have vue cli installed, let’s create a new project. In vue cli documentation, it say’s:

Usage
$ vue create <project-name>

One of the cool features of Vue Cli 3, is that you can initialize your project with zero configuration required, so that you can start to code as fast as possible.

Let’s create our new Vue project and call it ‘vue-firebase-tutorial’.

$ vue create vue-firebase-tutorial

You will be prompted to pick a preset. You can either choose the default preset which comes with a basic Babel + ESLint setup, or select “Manually select features” to pick the features you need.

For our case, we are going to select “Manually select features” and choose vue-router option since we will be using it during this tutorial. For the other features, do as you want, as it won’t really matter for the rest of the tutorial.

At the end, you will be asked if you want to save this preset for future projects and after that, your project will be initialized.

Then, enter the new vue-firebase-tutorial directory, and run npm run serve

$ cd vue-firebase-tutorial
$ npm run serve

Now, if you open the url ‘http://localhost:8080’, you should have the default view of our Vue project!

The App Structure

Let’s have a quick look of the app structure.

For this tutorial, we just need to know that our source code will be under the src/ directory.

The other files are mostly configuration files generated by Vue Cli 3. If you want to have a complete overview of the structure, you can check the Vue Cli 3 documentation.

Also, before going further in this tutorial, if you don’t already know the structure of a Vue file (like src/components/HelloWorld.vue), i advise you to take a look to this: https://vuejs.org/v2/guide/single-file-components.html

LET’S WRITE SOME CODE !

Our future App Architecture

Our app will consist of three views, two (Login view and Sign Up view) that we can access only without authentication, and one (Home view) that we can access only with authentication.

After login successfully or after a new account creation, we will be redirected to the authenticated part of the app, the Home view.

Step One: Login and SignUp

1–1 The Login View

Let’s create the Login view. To do so, we will create a new Vue component called Login under src/views

For the moment, the component will simply consist of a title, two input fields, a button and a small sentence in the html.

Our component is now created! But how to display this new component in our app? Well, for that, we are going to use vue-router. Remember? We already installed it when we initialized the app with vue-cli.

What is vue-router ?

vue-router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. 

Creating a Single-page Application with Vue.js + vue-router is dead simple. With Vue.js, we are already composing our application with components. When adding vue-router to the mix, all we need to do is map our components to the routes and let vue-router know where to render them.

from vue-router documentation: https://github.com/vuejs/vue-route

So, let’s add our new Login component that we just created to our app router. Open the src/router.js file and add the Login component to the router like that:

Then, if you change your browser url to localhost:8080/#/login you should see the new Login component that we just created displayed in your browser:

Why do we still have the default menu despite the fact that we didn’t put it in the html template of the Login component? Well, if you open the App.vue file, the template of the App component is as follow:

The App component is the main component of the app and will be the first to be rendered. It contains a div with two router-link elements and a html component called router-view.

We will soon talk about the router-link element, but first, let’s see what is the router-view element.

Router-view is a component of vue-router:

The <router-view> component is a functional component that renders the matched component for the given path. Components rendered in <router-view> can also contain its own <router-view>, which will render components for nested paths.

from vue-router documentation https://router.vuejs.org/en/api/router-view.html

So, when reaching http://localhost:8080/#/login vue-router will render the attached component of the path/login we defined in src/router.js inside the router-view component. And since the App component also contain the nav div with the two router-link elements in his template, we also have them display in our view.

To avoid confusion with the navigation of the app we are creating, let’s remove this nav div from the App component and replace it with the vue logo. We already have the Vue logo inside the src/assets/ directory, so let’s use it!

Also, Since we are not going to use the About view, we can remove the file from our directory (src/views/About.vue) and also remove i t from our routes configuration in src/router.js

Now, let’s get back to our Login view add some style to our Login component.Inside the <style> element of your Login.vue file, add those styles.

Now, the login page should be a little bit prettier.

1-2- The Sign Up View

The same way we created the Login view, we are going to create the Sign Up view.

For that, create a new vue component called SignUp under src/views/.

As for the Login component, the SignUp component will consist, for now, of a simple form and some style attached to it.

Then, add the new component in our routes inside src/router.js

Then, if you open your browser to http://localhost:8080/#/sign-up, you should have the following view:

Step Two: Navigation between views

If we look back to the schema of the app architecture we defined, we can navigate from the Login view to the SignUp view, and from those two views to the Home view. How to do so?

Well, we will use another component of vue-router that we quickly saw before, called router-link.

<router-link> is the component for enabling user navigation in a router-enabled app. The target location is specified with the to prop. It renders as an <a> tag with correct href by default, but can be configured with the tag prop. In addition, the link automatically gets an active CSS class when the target route is active.

from vue-router documentation: https://router.vuejs.org/en/api/router-link.html

So, in the Login and SignUp component, let’s implement router-link so we can navigate between those two views.

Now, you should be able to navigate between the two pages by using the links we just created.

The last part of navigation will consist to go from Login/SignUp views to the Home view. For now, since we don’t have any code implemented, we will do a simple redirection to the Home view when clicking on the Connection button, without any authentication checking.

With router-link, the navigation take places in the html part of the component, but now, we want to navigate between routes programmatically. To do so, we need to attach an event when clicking on the Connection button, and with Vue 2, we can do that with the v-on directive or with the @ alias for v-on directive.

Listening to Events

We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered.

from Vue 2 doc: https://vuejs.org/v2/guide/events.html#Listening-to-Events

The event we want to listen to is click. So, on the click event of the Connection button, we want to navigate to the Hello view.

To navigate programmatically between views, vue-router has a set of function we can use in our app. To know more about those functions, you take a look in their documentation https://router.vuejs.org/en/essentials/navigation.html.

In our example, we are going to use the replace function, because once the user is logged in, we want the Hello view as our starting route.

Let’s change our Login component to put this in place.

You can see inside the login function that we have this.$router.replace('home')

Why do we access the router with this? If you take a look into the main.js file, you’ll see that the router object is injected to the Vue app. That way, we can easily access it in every components of the app.

Also, we change the navigation to home, but we don’t have any hello path yet.

The default path of the Home component was / on the app initialization, but now that we know that the Home view will be only accessible when user is authenticated, let’s change the route so that the Home view is accessible when reaching /home path.

Now, back to our Login view, if you click on the Connection button, you’ll be redirect to the Home view ! You’ll see two Vue logo display. That’s normal ! Check the content of the HelloWorld component in src/components/HelloWorld.vue ;). Remove the image from the template of the HelloWorld component to avoid duplication of the Vue logo.

Step Three: Firebase Integration

Now that we have our front-end app ready, let’s implement Firbase so we can use it’s authentication system !

3.1 Create a new project on Firebase

To use Firebase, you first need to create a new project on the firebase console. If you don’t have any account created, create one, then go to console.firebase.google.com.

Click on Add project . Them you should have a popup to create a new project. Choose the name you want. I choose to call it vue-firebase-tutorial

Then, you should arrive on your project home page.

Congrats ! Your Firebase project is created. Now, to integrate it in our app, click on Add Firebase to your web app.

A popup with a code snippet should appear. Copy the code inside the second script balise. It should look like:

// Initialize Firebase

let config = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SEND_ID"
};

firebase.initializeApp(config);

Now, let’s back to our vue project. We need to add the Firebase module to our project. To do so:

$ npm install ——save firebase

Once the installation is done, let’s import Firebase module to our app. Open the main.js file, and initialize Firebase with the configuration code we copied earlier.

For the simplicity of the tutorial, we put the Firebase configuration in main.js file, but on real production system, avoid to do that and put it in a specific configuration file. Also, you may see appear in the console some Firebase warnings about only importing the part of the SDK we actually use. In production, you should definitely do that! But again, to keep the simplicity of this tutorial, I skip this part.

We have everything ready now to create new users on Firebase !

3.2 Create User on Firebase with the SignUp component

Let’s go back to our SignUp component and implement what we need to create users on Firebase.

To create a new user, we will need to get back the email and the password typed in our form inside our component controller. To do so, we are going to use the v-model directive of Vue 2.

You can use the v-model directive to create two-way data bindings on form input and textarea elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases.

from Vue 2 documentation: https://vuejs.org/v2/guide/forms.html

Once we retrieved the email and the password of the new user we want to create, we are going to use the Firebase function called createUserWithEmailAndPassword.

This Firebase function does exactly what the name says, it create a new user with an email and a password. You can know more about this function in the official Firebase documentation here: https://firebase.google.com/docs/reference/js/firebase.auth.Auth#createUserWithEmailAndPassword

Let’s add all that in our SignUp component:

The createUserWithEmailAndPassword function return a Firebase promise, with an onResolve and onReject callback. You can know more about the different type of Firebase promises here: (https://firebase.google.com/docs/reference/js/firebase.Promise).

For the moment, we just display an alert to see the result of the function.

Let’s try to create a new user in the interface.

It’s not working ! Why ?

The error message says:

The given sign-in provider is disabled for this Firebase project. Enable it in the Firebase console, under the sign-in method tab of the Auth section.

To have the possibility to create new user, we should enable the sign-in provider of Firebase. Let’s go back to the Firebase console, on the project we created in step 3.1.

On the Authentication part, we have a tab named SIGN-IN METHOD

You just need to enable the Email/Password provider.

Then, let’s try again to create a new user in our Vue app.

It’s working now ! Congrats, you just created an new user in your Firebase project !

To be sure that everything was correct, we can take a look in the firebase console, under Authentication part and see the list of users. You should have the user you just created in the list !

3.3 Login with the new user

Now that we have a new user created, let’s try to login with this user ! (When you successfully create a new user on Firebase, it automatically sign in the user in to the application, but for this example, we are going to sign in again from the Login view)

Let’s go back to our Login component. We need to get back the email and the password of the user who try to login, and sign in this user into Firebase. This component will look like the SignUp component, but the change will be the function we will call. To sign in a user in Firebase, we are going to use the signInWithEmailAndPassword function provided by Firebase. It takes the email and password as parameters and return a Firebase promise.

Now, let’s try to login with the user we just created

It’s working ! Your user is now authenticated in Firebase !

Step Four: Access the app only with authentication

4.1: Add meta fields to routes

We are now authenticated! But nothing happen’s, right? Well, we need to redirect the user to the part of the application that can be accessed only if the user is authenticated. We already defined in our (beautiful) schema that the authenticated view of our app will be the Home view.

To implement that in our Vue application, we can use meta field of vue-router. A meta field is an additional information you can set to your route.

To know more about meta, you can check the vue-router documentation here: https://router.vuejs.org/en/advanced/meta.html

Let’s add a meta field to the Home view that we will use for this example. This meta will be called requiresAuth and will inform us that this view need authentication.

Also, now that we will have all our routes, we should define a default route for the app, since we changed the hello component that was before the default landing page.

With path: ‘*’, we redirect every paths that does not exist to the Login view. If the user is authenticated, since the login page won’t be accessible when user is logged in, it will automatically redirect the view to the Hello view.

You can now try to enter a bad url, and you’ll see that it will redirect to the Login view.

4.2: Redirect the routes if user is authenticated

Now that we have everything ready, we need to know if the user is authenticated in Firebase. To do so, Firebase provides a function to get back the current user: firebase.auth().currentUser

This function send back the currently signed-in user by using the currentUser property. If a user isn't signed in, currentUser is null.

In the previous part, we set meta fields to our routes, so that we could know which view need authentication to be accessible.

Now, we need to check before accessing each views if the user is authenticated and if the view we want to access need authentication or not.

To do so, we are going to use navigation guards of vue-router.

Navigation Guards

As the name suggests, the navigation guards provided by vue-router are primarily used to guard navigations either by redirecting it or canceling it. There are a number of ways to hook into the route navigation process: globally, per-route, or in-component.

from vue-router documentation: https://router.vuejs.org/en/advanced/navigation-guards.html

In our example, we are going to use the global navigation guard beforeEach.

Let’s implement it in our src/router/index.js file.

The beforeEach function take three parameters, to, from, and next and will be called whenever a navigation is triggered.

• to parameter is the target Route Object being navigated to.
• from parameter is the current route being navigated away from.
• next parameter is a function that must be called to resolve the hook, and can take argument to redirect or abort the navigation (see more on the documentation)

In the beforeEach function, we get back the currentUser of Firebase, and we check if the route we want to navigate to need authentication by checking if the route object has the requiresAuth meta.

To understand the way we get back the requiresAuth meta, we need first to know that each route object in the routes configuration is called a route record. In our tutorial, we don’t have nested routes, but a route records may be nested. Therefore when a route is matched, it can potentially match more than one route record.

All route records matched by a route are exposed on the $route object (and also route objects in navigation guards) as the $route.matched Array. Therefore, we need to iterate over $route.matched to check for meta fields in route records.

So, in our navigation guard global function, inside the to route object, we search if the matched Array has some records (in our case a single one) with requiresAuth meta.

Then, we defined our rules for navigation !

If the route we navigate to requires authentication and there is no current user logged in, we redirect to the Login view.

If the route we navigate to does not require authentication and there is a user logged in, we redirect to the Home view.

Else, we proceed navigation.

We should now be able to access the app only when the user is authenticated !

Since we already logged-in in the previous step, if you reload the page, based on our navigation guard implementation, you should be redirect to the Hello view.

Let’s try to reload the page.

Nothing is happening ! We still are in the Login view.

Why ?

Well, it’s simply because in the lifecycle of our app, the execution of our navigation guard beforeEach take place before Firebase initialization end. So, when we first load the app, since Firebase module has not finish his initialization, firebase.auth().currentUser return null!

After the first load, if you try to go to the sign-up view, you’ll see that the redirection take place and you ends up in the Hello view.

How can we avoid this scenario and make sure that the redirection take place directly on the first load of the app?

Well, Firebase let’s us the possibility to set an observer on the Auth object, so we can ensure that the Auth object isn’t in an intermediate state — such as initialization — when you get the current user.

This observer is called onAuthStateChanged. (you can see more about the observer in the Firebase documentation: https://firebase.google.com/docs/auth/web/manage-users#get_a_users_profile)

So, by setting a callback on the onAuthStateChanged observer, we can initialize the Vue app only when we are sure Firebase is initialized.

Let’s change our src/main.js file like that:

We now initialize the app only when we are sure Firebase Auth object is ready to use.

Now if you refresh the page, or try to access the Login or SignUp view from url, you’ll see the redirection in action !

4.3: Redirection after Login/SignUp and logout from the app

Now that we have our authentication system, we still need to redirect the user after the Login or when a new user is created. Also, we want to be able to logout from Firebase.

To logout, let’s just add a button in our Home component and attached an event to logout from Firebase.

Like signInWithEmailAndPassword and createUserWithEmailAndPassword, Firebase provide a function to logout called signOut that return a promise. Once the SignOut function is done, we will redirect the app to the Login view.

Now, when we click on the button, we logout from Firebase and go back on the Login view.

To be sure that you are now logout from Firebase, you can refresh the page or try to access the Home view.

Now, let’s sign in again, but before that, let’s change the code so that we can be redirect to the authenticate part of the app after login.

Now, try to login, and you should be redirect to the Home view.

Let’s implement the same thing for the SignUp component.

Now, after a new account creation, the user will also be redirect to the Home view !

You may noticed that i turned the callback functions in signInWithEmailAndPassword, createUserWithEmailAndPassword, and signOut in ES6 arrow functions. Why ?

Simply because method definition (function name() {}), have their own this context. If we were using method definition, we wouldn’t be able to access this.$router inside our callbacks. We should have encapsulate the this object of the parent method inside a variable to access it.

With ES6 arrow function, this is lexical, meaning that it does not create its own this context. Instead, this has the original meaning from the enclosing context.

By using ES6 arrow function, we can access this.$router and let the redirection take place.

The End

We now have a small Vue app using Firebase authentication system!

All the sources are available on Github: github.com/CaptainYouz/vue-firebase-tutorial.

And, if you want to know how to implement the Social Sign In feature of Firebase, you can check out the part II of this tutorial! ;)

Update — September 2018 — — — —

Hi everyone!

A little bit more than one year ago, I released this tutorial, and I really didn’t expect it to be so much read and used. I wrote it as a side project, without any real plan for it.

But today, I would like to continue this project and make it the first one of a series of tutorials for Vue.js and Firebase. So, if you have any thoughts or ideas, I would love to hear them from you!

Anas.