Facebook Login Component using Vue.js and Amplify

Here is the source for a self contained Facebook login component in Vue. I'm trying to use this with AWS Amplify. I successfully get the Facebook login screen to appear and I am able to get an identity id in AWS cognito. However, things aren't quite working.

<template>
  <div>
    <Button
      class="FacebookButton"
      v-text="buttonText"
      @click="handleClick"
      :disabled="isLoading"
    />
  </div>
</template>

<script>
import Auth from "@aws-amplify/auth";
import { AmplifyEventBus } from "aws-amplify-vue";

export default {
  name: "FacebookButton",
  components: {
  },
  data() {
    return {
      buttonText: "Login to Facebook",
      isLoading: true
    };
  },
  computed: {},
  async mounted() {
    this.loadFacebookSDK();
    await this.waitForInit();
    this.isLoading = false;
  },
  beforeCreate() {},
  methods: {
    waitForInit() {
      return new Promise(res => {
        const hasFbLoaded = () => {
          if (window.FB) {
            res();
          } else {
            setTimeout(hasFbLoaded, 300);
          }
        };
        hasFbLoaded();
      });
    },
    statusChangeCallback(response) {
      if (response.status === "connected") {
        this.handleResponse(response.authResponse);
      } else {
        this.handleError(response);
      }
    },
    checkLoginState() {
      window.FB.getLoginStatus(this.statusChangeCallback);
    },
    handleClick() {
      window.FB.login(this.checkLoginState, { scope: "public_profile,email" });
    },
    handleError(error) {
      alert(error);
    },
    async handleResponse(data) {
      const { email, accessToken: token, expiresIn } = data;
      const expires_at = expiresIn * 1000 + new Date().getTime();
      const user = { email };

      this.isLoading = true;

      try {
        //const response = await Auth.federatedSignIn(
        await Auth.federatedSignIn("facebook", { token, expires_at }, user);
        this.isLoading = false;
        AmplifyEventBus.$emit("authState", "signedIn");

        //this.props.onLogin(response);
      } catch (e) {
        this.isLoading = false;
        this.handleError(e);
      }
    },
    loadFacebookSDK() {
      window.fbAsyncInit = function() {
        window.FB.init({
          appId: "yourappidhere",
          xfbml: true,
          version: "v3.2"
        });
        window.FB.AppEvents.logPageView();
      };

      (function(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);
      })(document, "script", "facebook-jssdk");
    }
  }
};
</script>

<style scoped>
</style>

This code is a port from a React example here: https://serverless-stack.com/chapters/facebook-login-with-cognito-using-aws-amplify.html

I'm trying to make this Facebook login work with the existing Amplify authenticator state management system by emitting the change to authState as follows:

AmplifyEventBus.$emit("authState", "signedIn");

This causes the Authenticator widget to 'disappear', but it doesn't let me get into my app. I'm not quite sure where to go next.

Facebook Login Component using Vue.js and Amplify

0 Answers