One-click Vue Facebook login example

The process of Facebook login integration is pretty straightforward. Basically, all we will need is an npm package, which can be get easily from the npm repository. So in this tutorial, we will see how we can get working one-click Facebook login with Vue.js.

Do I need the one-click Facebook to sign in for my Vue application?

As there are many Facebook users, there is a chance that the person who visits your site is a registered Facebook user. And we all know that no one likes managing a bunch of different accounts that accumulated over the years. Email, social networks, government websites, entertainment websites, and so on – we all have plenty of passwords to remember.

That’s why it is a smart idea to use one password everywhere, isn‘t it? Of course, it’s not. However, using one account such as Facebook, Google, Twitter or Microsoft is a better decision. If we are talking about safety, using a third-party account for a registration is a wiser and more secure than reusing the same password everywhere.

So, having Vue.js Facebook login implemented you are taking care of the users’ security. However, as much I would like to talk about security, there is another, more practical reason why you should implement a social login – it saves time for users and is more convenient than a traditional registration. And we know how impatient the users are.

So, my advice is this – if you are developing a website without a public registration (example, you are building a system for business with only one registered user, the admin), social login might not be needed. However, if you are developing an app that will face the internet with open registration, you should implement a Vue Facebook login. You might want to add some alternatives to this, so there is a tutorial on how you can make Google sign in. But don’t use this as a substitute to traditional registration, use it only as an alternative. Not every user might be happy with the only authentication option being social login.

Here is how you can integrate Vue Facebook login

In order to implement a Facebook login function in our Vue.js app, we need to download an npm package. Here is the link to the component in the npm repository. Make sure you are located in the directory of your project and execute this:

npm install –save vue-facebook-login-component

You will be amazed at how easy is to implement a Facebook login. Let’s say you have a newly created app. Open the App.vue file and import the component.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
	<v-facebook-login app-id="YOUR-APP-ID"></v-facebook-login>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import VFacebookLogin from 'vue-facebook-login-component'

export default {
  name: 'App',
  components: {
    HelloWorld,
    VFacebookLogin
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

You can import the component by adding import VFacebookLogin from ‘vue-facebook-login-component’ and don’t forget to add VFacebookLogin to the components export. Now run the application and you should see that there is a Facebook button.

However, If you clicked on it, you will get an error:

The reason for this is that your connection is not secure – you are not using an SSL certificate. Unfortunately, the solution to fixing it is not quick, however, the good news is that the certificate for the localhost will be permanent. It can be used for any application that will be running on localhost. Here is a tutorial that teaches you how to add SSL to the localhost.

Ok, so now we’ve fixed the certificate problem, however, there is still one thing we missed. And that’s a Facebook app ID. Without it, the Vue Facebook login will not work. In order to get the ID, you will need to visit Facebook for developers page.

You might be asked to verify your account. There are two ways you will be able to verify the account, by using your phone number or by adding a credit card. If you have phone number or credit card already added to your Facebook account, you probably won’t be asked to verify yourself.

If you account is verified and valid, you should get to this page. There is no big difference which one of the options you will choose.

After following along the registration and giving the display name for your App ID, you should get an app ID. Put it inside the component. It should look like this: <v-facebook-login app-id=”595094627065333″></v-facebook-login>

There are some tools that might be useful when checking if the login works properly, however we will not go in to the details as currently the app are being used locally. By clicking on Set Up button on the Facebook Login tab, you can get your website checked if the login works correctly.

That’s it!

Here it is, now you should have the Vue Facebook login function.