Vue.js 2 Tutorial: Facebook Login Example

In this Vue.js tutorial, we will build an authentication system for Vue.js 2 app using the Facebook login app. As usual, we begin this Facebook integration with the Facebook app set up and configuration in their app dashboard. For the client-side, we will use the facebook-login-vuejs module.

Table of Contents:

• Setup a Facebook App
• Install Vue-CLI 3 and Create Vue.js App
• Install and Configure the facebook-login-vuejs Module
• Display Sign In With Facebook Button and Basic User Profile
• Run and Test the Vue.js 2 Facebook Login Application

The following tools, framework, libraries, and modules are required for this tutorial:

1. Node.js
2. Vue.js 2
3. facebook-login-vuejs
4. Terminal or Node.js Command Line
5. IDE or Text Editor

Before moving to the steps, make sure you have installed the latest Node.js. To check it, type this command in the terminal or Node.js command line.

node -v
v10.15.1
npm -v
6.10.2

Setup a Facebook App

To setup, a Facebook App and get an App ID/Secret, go to Facebook Developers Dashboard. Login with your Facebook developer's account or credentials.

Click the `+ Add a New App` button. Enter the display name (we use `VuejsAuth` name) then click the `Create App ID` button. Make sure to use the valid name allowed by Facebook Developers.

After checking the captcha dialog and click submit button, now, you can see App ID and Secret, write it to your notepad.

Click the Settings menu on the left menu then click Basic. Scroll down then click `+ Add Platform` button then choose the website. Fill site URL with the callback URL for OAuth authentication callback URL, we are using this callback URL `http://127.0.0.1:1337/auth/facebook/callback`.

Click the `Save Changes` button and don't forget to write down the App ID and App Secret to your notepad.

Install Vue-CLI 4 and Create Vue.js App

Vue-CLI is standard tooling Vue.js development. It has the features out-of-the-box support for Babel, TypeScript, ESLint, PostCSS, PWA, Unit Testing & End-to-end testing, fully configurable without the need for ejecting, allows the community to build and share reusable solutions to common needs, create, develop and manage your projects through an accompanying graphical user interface, and instantly prototype new ideas with a single Vue file. To install Vue-CLI 3 type this command from the Terminal or Node command line.

sudo npm install -g @vue/cli

or

yarn global add @vue/cli

Next, check the version to make sure that you have the 3.x version of Vue-CLI.

vue --version
@vue/cli 4.0.5

Next, create a new Vue.js project with the name "vue-firebase-chat" by type this command.

vue create vue-facebook-login

For now, use the default for every question that shows up in the Terminal. Next, go to the newly created folder.

cd ./vue-facebook-login

To make sure that created Vue.js project working, type this command to run the Vue.js application.

npm run serve

or

yarn serve

You will see this page when open `http://localhost:8080/` in the browser.

Install and Configure the facebook-login-vuejs Module

We will use an existing Vue.js Facebook login module/library found on the NPMJS with the name facebook-login-vuejs. To install it, type this command.

npm i facebook-login-vuejs

or

yarn add facebook-login-vuejs

Because now the Facebook Login force to use HTTPS only, we need to modify this Vue.js 2 app to run with HTTPS. Create a new file in the root of the Vue 2 project folder called `vue.config.js` then add these lines of server configuration.

module.exports = {
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8085, // CHANGE YOUR PORT HERE!
        https: true,
        hotOnly: false,
    },
}

Display Sign In With Facebook Button and Basic User Profile

Now, we will implement the Facebook Login in the Vue.js 2 application. Open and edit `src/App.vue` then replace the Vue <template> content with these.

<template>
  <div id="app">
    <facebook-login class="button"
      appId="420905468863679"
      @login="onLogin"
      @logout="onLogout"
      @get-initial-status="getUserData"
      @sdk-loaded="sdkLoaded">
    </facebook-login>
    <div v-if="isConnected" class="information">
      <h1>My Facebook Information</h1>
      <div class="well">
        <div class="list-item">
          <img :src="picture">
        </div>
        <div class="list-item">
          <i>{{name}}</i>
        </div>
        <div class="list-item">
          <i>{{email}}</i>
        </div>
        <div class="list-item">
          <i>{{personalID}}</i>
        </div>
      </div>
    </div>
  </div>
</template>

Inside the <script>, add an import of facebook-login-vuejs module.

import facebookLogin from 'facebook-login-vuejs'

Add these variables for login status and FB graph API fields after the app name.

data() {
  return {
    isConnected: false,
    name: '',
    email: '',
    personalID: '',
    picture: '',
    FB: undefined
  }
},

Declare the facebookLogin in the Vue.js components.

components: {
  facebookLogin
},

Add these methods or functions of user data, sdkLoaded, login, and logout.

methods: {
  getUserData() {
    this.FB.api('/me', 'GET', { fields: 'id,name,email,picture' },
      user => {
        this.personalID = user.id;
        this.email = user.email;
        this.name = user.name;
        this.picture = user.picture.data.url;
      }
    )
  },
  sdkLoaded(payload) {
    this.isConnected = payload.isConnected
    this.FB = payload.FB
    if (this.isConnected) this.getUserData()
  },
  onLogin() {
    this.isConnected = true
    this.getUserData()
  },
  onLogout() {
    this.isConnected = false;
  }
}

Finally, add or replace these CSS code to the <style> tag.

#app {
  display: flex;
  flex-direction: column;
  align-items: flex-start
}
.information {
  margin-top: 100px;
  margin: auto;
  display: flex;
  flex-direction: column;
}
.well {
  background-color: rgb(191, 238, 229);
  margin: auto;
  padding: 50px 50px;
  ;
  border-radius: 20px;
  /* display:inline-block; */
}
.login {
  width: 200px;
  margin: auto;
}
.list-item:first-child {
  margin: 0;
}
.list-item {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.button {
  margin: auto;
}

Run and Test the Vue.js 2 Facebook Login Application

It's a time to run and test the Vue.js 2 Facebook Login Application. Type this command in the terminal to run it.

yarn serve

Open the browser then go to `https://localhost:8085/`. Force the browser to use uncertified HTTPS, and here it is.

That it's, the Vue.js 2 Facebook Login Application. You can find the full working source codes in our GitHub.

That just the basic. If you need more deep learning about MEVN Stack, Vue.js or related you can take the following cheap course:

• Isomorphic JavaScript with MEVN Stack
• Fun Projects with Vue 2
• Learning Path: Vue. js: Rapid Web Development with Vue 2
• Getting Started with Vue JS 2
• Vue. js 2 Recipes

Thanks!