A Facebook Login button Single File Component done in VueJS

FacebookLogin.vue

<template>
  <div>
    <button class="button" @click="logInWithFacebook"> Login with Facebook</button>
  </div>
</template>
<script>
export default {
  name:"facebookLogin",
  methods: {

    async logInWithFacebook() {
      await this.loadFacebookSDK(document, "script", "facebook-jssdk");
      await this.initFacebook();
      window.FB.login(function(response) {
        if (response.authResponse) {
          alert("You are logged in &amp; cookie set!");
          // Now you can redirect the user or do an AJAX request to
          // a PHP script that grabs the signed request from the cookie.
        } else {
          alert("User cancelled login or did not fully authorize.");
        }
      });
      return false;
    },

    async initFacebook() {
      window.fbAsyncInit = function() {
        window.FB.init({
          appId: "8220179XXXXXXXXX", //You will need to change this
          cookie: true, // This is important, it's not enabled by default
          version: "v13.0"
        });
      };
    },

    async loadFacebookSDK(d, s, id) {
      var js,
        fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {
        return;
      }
      js = d.createElement(s);
      js.id = id;
      js.src = "https://connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }
  }
};
</script>
<style>
.button{
  color:white;
  min-width: 150px;
  background-color: #000000a1;
  height: 2.5rem;
  border-radius: 2rem;
  font-weight: 400;
  font-size: 0.8rem;
}

</style>

suggest moving
... await this.loadFacebookSDK(document, "script", "facebook-jssdk"); await this.initFacebook(); ...
to
... methods: { async mounted() { await this.loadFacebookSDK(document, "script", "facebook-jssdk"); await this.initFacebook(); }, async logInWithFacebook() { ...

according to the original button provided by Facebook
<fb:login-button scope="public_profile,email">

is it possible to add some attribute in the button like
<button scope="public_profile,email"> ?

I tried to add the "scope" attribute to the button but it doesn't work
but now it works by adding it as a parameter in this function :
async logInWithFacebook() { var _this = this window.FB.login(function(response) { if (response.authResponse) { console.log(response) _this.loggedInSocialite(response.authResponse.accessToken, 'facebook') } else { _this.$toast.show({ message: 'User membatalkan login atau user tidak valid', type: 'error', duration: 3000, position: 'top' }) } }, {scope: 'public_profile,email'} ); return false; }

btw thanks for sharing your project

@derekjj the idea is to only load the sdk if the user clicks "Login with Facebook", hence the example is not using the mounted event.

im gettting error when click button

Cannot read properties of undefined (reading 'login')
TypeError: Cannot read properties of undefined (reading 'login')
at Proxy.logInWithFacebook (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/FacebookLogin.vue?vue&type=script&lang=js:8:17)

im having the same issue like @asadmmn . cannot read properties of undefined... etc

edited:
okay, found the issue
you will need to return the promises

async loadFacebookSDK(d, s, id) {
      return new Promise((resolve, reject) => {
        let js,
          fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {
          return;
        }
        js = d.createElement(s);
        js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
        js.onload = resolve;
        js.onerror = reject;
      });
    },
async initFacebook() {
      return new Promise((resolve) => {
        window.fbAsyncInit = function () {
          window.FB.init({
            appId: "your-app-id",
            cookie: true, // enable cookies to allow the server to access
            xfbml: true, // parse social plugins on this page
            version: "v16.0",
          });
          resolve();
        };
      });
    },

@harithzainudin have you solved it ?? any one please tell me how to solve

yes, you can refer back to my edited answer above @asadmmn :)

im having the same issue like @asadmmn . cannot read properties of undefined... etc

edited: okay, found the issue you will need to return the promises

async loadFacebookSDK(d, s, id) {
      return new Promise((resolve, reject) => {
        let js,
          fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {
          return;
        }
        js = d.createElement(s);
        js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
        js.onload = resolve;
        js.onerror = reject;
      });
    },
async initFacebook() {
      return new Promise((resolve) => {
        window.fbAsyncInit = function () {
          window.FB.init({
            appId: "your-app-id",
            cookie: true, // enable cookies to allow the server to access
            xfbml: true, // parse social plugins on this page
            version: "v16.0",
          });
          resolve();
        };
      });
    },