App ID gets stuck for 2 buttons with different App IDs

[avbelyaev]

I need to use 2 Facebook login buttons, so the user can login via Facebook and via Instagram. So I have 2 separate facebook apps, with different IDs - 1797... and 3495... They are given to me and I can't change that.

So both of them are present on the page, but they don't share anything. Pretty much everything is defined for 2 separate flows

<template>
  <div class="facebook-button">
    <div class="fb-button1">
      <fb-login
        :key="'fb1'"
        v-model="facebook1"
        :app-id="'1797...'"
        :login-options="{
          scope: 'pages_messaging',
        }"
        @login="onLogin1"
        @logout="onLogout1"
        @sdk-init="handleSdkInit1"
      />
    </div>
    <div class="fb-button2">
      <fb-login
        :key="'fb2'"
        v-model="facebook2"
        :app-id="'3495...'"
        :login-options="{
          scope: 'instagram_basic',
        }"
        @login="onLogin2"
        @logout="onLogout2"
        @sdk-init="handleSdkInit2"
      />
    </div>
  </div>
</template>

<script>
  import { VFBLogin as FbLogin } from 'vue-facebook-login-component';
  export default {
  // ...
    methods: {
      handleSdkInit1({ scope }) {
        this.scope1 = scope;
      },
      handleSdkInit2({ scope }) {
        this.scope2 = scope;
      },
    },
  };
</script>

When it's rendered I have 2 buttons on the page. But when I click on either of those buttons, in the popup window it shows app ID of the first app: app_id=1797...

If e.g. in the code above i move 3495 so it's the first that gets rendered, both buttons will open the popup with app_id=3495...

---

Another thing I noticed, is that even if these 2 buttons are present on completely separate views:

• page-1 with button-1 with app id 1797...
• page-2 with button-2 with app id 3495...

then if I navigate to page-1 and click on button-1 first, in the popup I will get app_id=1797... which is what I expect

But when I move to page-2 (assuming page-1 and button-1 are already unmounted/destroyed by that time) and click on button-2, I will still get app_id=1797.... Looks like it gets stored somewhere and not completely abandoned.

But if I refresh page-2, then I will get app_id=3495... (which is what I expect). But now button-1 is "stuck" and opens popups with app_id=3495...

Maybe that's due to Sdk.unsubscribe() not working properly (it's not exported though, so I can't access it). Or somehow related to #88 - but here I have app IDs known at compile time, so I'm not sure

---

So, is there a solution for having 2 separate buttons with 2 separate app IDs?
Thanks!

[adi518]

Hi. Saw this with a bit of delay. It will quicken things if you can provide a repro.

[avbelyaev]

Hey, so i made a small project to reproduce the issue: https://github.com/avbelyaev/random/tree/master/vue-facebook-buttons

I added the simplest use case (similar to what is posted above) when both buttons are present on the same page. And it seems that they share some state, since the app ID gets stuck between them

However there is another case that I mentioned both here and there - when buttons are present on separate pages, they still share something (which gets flushed on browser refresh). But I hope the single-page example will help to get this sorted. Thanks

[adi518]

Great, I'll have a look asap.

[avbelyaev]

Hey, in the meantime I reproduced the other case I mentioned - when these buttons are on separate pages - here it is https://github.com/avbelyaev/random/tree/master/vue-microfrontends/producer

If you run that app, and click "Login with Instagram" on the home page, you'll get app=3495 ✅

Now if you navigate with "go login" to FB login page, you'll still get app=3495 🟥

Now if you refresh this page in browser, you'll get app=9662 ✅

But now if you'll get back to the home page (via "go home" or browser's back button), you'll get app=9662 🟥

---

If there is no simple fix in the lib, maybe you can suggest smth I can do on my app's side (which has a similar setup with 1 button per view)?

[avbelyaev]

Hi Is there anything you can suggest maybe on our side to separate these buttons between separate pages?