Build an Authentication System for Vue.js 2 using Facebook Login App

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

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

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

#vuejs #vue #javascript #security #facebook