FacebookAuth.vue

<template>
  <button @click="signIn">login</button>
  <button @click="signOut">log out</button>
  <div>{{ user }}</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from '@vue/runtime-core';
import { initFacebook, login, logout } from './FacebookAuth';

export default defineComponent({
  name: 'SignIn',
  setup(props, { emit }) {
    const user = ref({});

    async function signIn() {
      const result = await login();
      if (result) user.value = result;
    }

    async function signOut() {
      logout();
    }

    onMounted(async () => {
      initFacebook(process.env.FACEBOOK_APP_ID);
    });
    return { user, signIn, signOut };
  }
});
</script>