FB api with firebase

Question

I am having difficulty figuring out how to link a facebook account with an existing firebase email/password account. I can link it but then have no clue how to make calls to the FB api. Or i can not have it linked and used the FB api itself to make the login. I really want to be able to link the account to an existing email/password account.

var facebook = document.getElementById('facebook');
//var twitter = document.getElementById('twitter');
//var google = document.getElementById('google');
var fbunlink = document.getElementById('fbunlink');
//var twitunlink = document.getElementById('twitunlink');
//var googleunlink = document.getElementById('googleunlink');
var fbList = document.getElementById('fbList');
var provider = "";
var fbToken = "";
var fbId = [];
var fbName = [];
var fbLength = 0;
var fbAccessToken ="";
var fbUID = "";
var auth = firebase.auth();
var user = firebase.auth().currentUser;


  window.fbAsyncInit = function() {
    FB.init({
        appId      : '1899992333573742',
        xfbml      : true,
        version    : 'v2.10'
        });
        FB.AppEvents.logPageView();
      
        FB.getLoginStatus(function(response) {
            if (response.status === 'connected') {
                
            var uid = response.authResponse.userID;
            var accessToken = response.authResponse.accessToken;
            
          } else if (response.status === 'not_authorized') {
          } else {
      }
    });
  };
      
    (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 = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
        
        
    facebook.addEventListener('click', e => {
        provider = new firebase.auth.FacebookAuthProvider();
        provider.addScope('email');
        provider.addScope('user_photos');
        provider.addScope('publish_pages');
        provider.addScope('business_management');
        provider.addScope('read_insights');
        provider.addScope('manage_pages');
        provider.addScope('public_profile');
        
        auth.currentUser.linkWithRedirect(provider);
        
        firebase.auth().getRedirectResult().then(function(result) {
          if (result.credential) {
            // This gives you a Facebook Access Token. You can use it to access the Facebook API.
            var token = result.credential.accessToken;
            var credential = result.credential;
            var user = result.user;
            // ...
          }
            
            document.getElementById('fbunlink').style.visibility = 'visible';
            document.getElementById('fbList').style.visibility = 'visible';
            document.getElementById('facebook').style.visibility = 'hidden';
            document.getElementById('status').innerHTML = 'You are logged in.';
            
            getInfo();
        }).catch(function(error) {
          // Handle Errors here.
            var errorCode = error.code;
            var errorMessage = error.message;
          // The email of the user's account used.
            var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
            var credential = error.credential;
          // ...
        });
    });
     /*   
    FB.login(function(response) {
        if (response.status === 'connected') {
        document.getElementById('fbunlink').style.visibility = 'visible';
        document.getElementById('fbList').style.visibility = 'visible';
        document.getElementById('facebook').style.visibility = 'hidden';
        document.getElementById('status').innerHTML = 'You are logged in.';
        var uid = response.authResponse.userID;
        var accessToken =  response.authResponse.accessToken;
        fbAccessToken = uid;
        fbUID = accessToken;
        getInfo();
        linkInfo();
      } else if (response.status === 'not_authorized') {
        document.getElementById('fbunlink').style.visibility = 'hidden';
        document.getElementById('facebook').style.visibility = 'visible';
        document.getElementById('fbList').style.visibility = 'hidden';
        document.getElementById('status').innerHTML = 'You have logged out of Facebook.';
      } else {
        document.getElementById('status').innerHTML = 'You are not logged in.';
        document.getElementById('facebook').style.visibility = 'visible';
        document.getElementById('fbunlink').style.visibility = 'hidden';
        document.getElementById('fbList').style.visibility = 'hidden';
            }
        }, {scope: 'email, user_photos, publish_pages, business_management, read_insights, manage_pages, public_profile'});
    });*/

    fbunlink.addEventListener('click', e => {
        var user = firebase.auth().currentUser;
        user.unlink("facebook.com");
        document.getElementById('picture').innerHTML = "";
        document.getElementById('status').innerHTML = 'You are not logged in.';
        document.getElementById('facebook').style.visibility = 'visible';
        document.getElementById('fbunlink').style.visibility = 'hidden';
        document.getElementById('fbList').style.visibility = 'hidden';
    });
      
    function getInfo(){
      FB.api('/me/accounts?limit=200', 'GET', {fields: 'business, name, data, id, picture', access_token : fbToken}, function(response){
          document.getElementById('status').innerHTML = "";
          console.log(response.data); 
          fbLength = response.data.length;
          for(var i = 0; i < fbLength; i++){  
            fbId.push(response.data[i].id);
            fbName.push(response.data[i].name);
            document.getElementById('status').innerHTML += "<img src='https://graph.facebook.com/" + fbId[i] + "/picture?type=square'>" + "  " + "<input type=" + "'checkbox'" + " id=" + "'" + fbId[i] + "'" + " value=" + "'" + fbId[i] + "'" + ">" + fbName[i] +  "<br>";
          }
      });
    }

    /*function linkInfo(){
        var credential = firebase.auth.FacebookAuthProvider.credential(fbUID, fbAccessToken);
        auth.currentUser.link(credential).then(function(user) {
          console.log("Account linking success", user);
        }, function(error) {
          console.log("Account linking error", error);
        });
    }*/

    fbList.addEventListener('click', e => {
          document.getElementById('picture').innerHTML = "";
          for(var i = 0; i < fbLength; i++){ 
            var temp = document.getElementById(fbId[i]);
            if(temp.checked){
            document.getElementById('picture').innerHTML += "<img src='https://graph.facebook.com/" + fbId[i] + "/picture?type=square'>" + "  " + fbName[i]  +  "<br>";
              }
          }
      });

Answer 1

So it seems you need to make calls to the Facebook API, so continue using Facebook API as Firebase Auth doesn't manage OAuth tokens and you need the FB API to do that for you. In order to link the Facebook account to an email/password account, you need to use the Facebook API to get the FB user's OAuth access token. You then link that to the currentUser: firebase.auth().currentUser.linkWithCredential(firebase.auth.FacebookAuthProvider.credential(fbAccessToken)) This links that Facebook user to the email/password currentUser.