In this tutorial we’ll cover how to implement Facebook Login in Vue 3 with an example app that allows you to login with Facebook and view/update/delete accounts registered in the Vue app.
The first time you login with Facebook an account is registered in the Vue app with your Facebook id so it can identify you when you login again with Facebook. The account is created with the name from your Facebook account and an extraInfo field with some default text, both the name and extra info can be updated in the Vue app, and updating account details only changes them in the app it doesn’t affect anything on Facebook.
The example project is available on GitHub at https://github.com/cornflourblue/vue-3-facebook-login-example.
Vue 3 Facebook Login App Details
The example app contains the following three routes (pages) to demonstrate logging in with Facebook, viewing accounts and updating account details:
- Login (
/login) - contains a Facebook login button that triggers authentication with Facebook and registration/authentication with the Vue.js app. - Home (
/) - displays a list of all accounts in the Vue app with buttons to edit or delete any of them. - Edit Account (
/edit/:id) - contains a form to update the specified account details.
Facebook App is required for Facebook Login
To integrate Facebook Login into a website or application you need to create a Facebook App at https://developers.facebook.com/apps/ and set up the Facebook Login product under the App. Creating a Facebook App will provide you with a Facebook App ID which is required when initializing the Facebook JavaScript SDK (FB.init(...)). For more info see the Facebook Login docs at https://developers.facebook.com/docs/facebook-login/web.
The example Vue 3 app uses a Facebook App named JasonWatmore.com Login Example that I created for this tutorial (App ID: 314930319788683). The Facebook App ID is located in the dotenv file (/.env) in the example, environment variables set in the dotenv file that are prefixed with VUE_APP_ are accessible in the Vue app via process.env.<variable name> (e.g. process.env.VUE_APP_FACEBOOK_APP_ID). For more info on using environment variables in Vue see https://cli.vuejs.org/guide/mode-and-env.html#environment-variables.
Fake backend API
The example Vue 3 app runs with a fake backend api by default to enable it to run completely in the browser without a real api (backend-less), the fake api contains routes for authentication and account CRUD operations and it uses browser local storage to save data. To disable the fake backend you just have to remove a couple of lines of code from the main.js file, you can refer to the fake-backend to see what’s required to build a real api for the example.
Updates only affect data in the Vue 3 app
Updating or deleting account information in the Vue 3 app will only change the data saved in the app, it won’t (and can’t) change anything in the associated Facebook account.
Authentication flow with Facebook access tokens and JWT tokens
Authentication is implemented with Facebook access tokens and JWT tokens. On successful login to Facebook an access token is returned to the Vue 3 app, which is then used to authenticate with the api (or fake backend) which returns a short lived JWT token that expires after 15 minutes. The JWT is used for accessing secure routes on the api, and the Facebook access token is used to re-authenticate with the api to get a new JWT token when (or just before) it expires. The Vue app starts a timer to re-authenticate for a new JWT token 1 minute before it expires to keep the account logged in, this is done in the apiAuthenticate() method of the account service.
#vue #facebook #javascript #security #web-development
