The Facebook API's JavaScript SDK displays the status as 'connected' even after logging out

As I navigate my AngularJS website, I am utilizing the Facebook SDK for JavaScript to facilitate registration forms. After successfully logging in and retrieving the necessary data from my first attempt, I proceeded to register and eventually logged out of both the system and Facebook.

When I returned to create a second registration using a different Facebook account, I encountered an unexpected issue. Rather than prompting me to input new login credentials as intended, the SDK automatically used my previous information. Upon investigating, I found that my Facebook status remained 'connected' despite completing a logout process.

This led me to question my assumption about being disconnected after performing a Facebook logout. How can I properly disconnect the initial user to allow for the use of a different Facebook account during subsequent registrations?

For logging in, my code snippet looks like this:

var deferred = $q.defer();
FB.getLoginStatus(function(response) {
    if (response.status === 'connected') {
        console.log('already logged in.');
        deferred.resolve(response);
    }
    else {                    
        FB.login( function(response) {
            if (response.authResponse) {
                console.log('response: ' + JSON.stringify(response));
                var access_token = response.authResponse.accessToken;
                console.log('access token: ' + access_token);    
                console.log('Welcome!  Fetching your information.... ');
                deferred.resolve(response);                            
            } else {
                console.log('User cancelled login or did not authorize.');
                deferred.reject('Error occurred');
            }
        }, {
            scope: 'public_profile, email, user_birthday',
            return_scopes: true
        });
    }                        
});    
return deferred.promise;

And my logout function is implemented as follows:

var deferred = $q.defer(); 
FB.logout(function(response) {  

    // I've tried with and without this line of code: 
    FB.Auth.setAuthResponse(null, 'unknown');           

    console.log('FB service logged out');
    deferred.resolve(response);
});
return deferred.promise; 

Despite attempting to follow guidance from sources like this reference, specifically by incorporating

FB.Auth.setAuthResponse(null, 'unknown');
post-logout, I have yet to resolve this ongoing issue.

Answer №1

I encountered a similar problem and resolved it by implementing a Facebook disconnect feature in the user profile that triggers the following API call:

DELETE /{user-id}/permissions/

https://developers.facebook.com/docs/graph-api/reference/user/permissions/

For example, with the use of the Javascript SDK:

// By deleting permission, the app prompts the user to authenticate again
// or allows another user to login by clicking on top right corner of the login popup

FB.api('/me/permissions', 'delete', {
  access_token: user.accessToken            // utilizing existing token from database
  }, (res) => {
   if(res.success) user.accessToken = null;   // removes token from database
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtaining your CSGO inventory via Steam API using jsonp: A step-by-step guide

Hey there! I'm currently facing an issue while trying to access a player's CSGO inventory using Valve's API. Unfortunately, I keep running into the error message stating that no 'access-control-allow-origin' header is present on th ...

What is the method for invoking a function with arguments within an HTML `<p>` element?

I am looking to display like and dislike percentages on cards. <v-card v-if="software[2] == searched || searched == ''" class="software-card" > <h3>{{ software[2] }}</h3> ...

Ways to make a jQuery function more concise

I need help with optimizing this jQuery function. It's repetitive and I want to find a way to shorten it while achieving the same result. Can someone assist me in streamlining this code? $(".c1").delay(5000).fadeOut("slow", function() { $("#phone ...

Leveraging Facebook Graph API in combination with the Express framework

After reading this particular answer, I am struggling to comprehend how to implement it in express. Let's say at the route /fbtest, I want to display information about a Facebook user. The solution proposes making a request to https://graph.facebook.c ...

Is it not possible to generate HTML tags using jQuery and JavaScript in JSF?

I'm currently working with jsf 2.0 and richfaces 4.0 to develop my application. Occasionally, I incorporate jQuery and JavaScript functions for displaying and hiding elements. However, I've encountered an issue when trying to generate tags within ...

Passing an array from JavaScript to PHP and then storing it as a .json file

Query I am trying to pass an array to PHP and save it in a data.json file. However, the data.json file is being created but showing Null as output. I have spent about 2 hours on this code, checked numerous solutions on SO, but nothing seems to work. As I ...

Set the height of a div based on the height of another div

My challenge involves a textarea that dynamically expands as content is added to it. The structure of the textarea within a div element is illustrated below: <div id='sendMes' class='container-fluid'> <form action='#&apos ...

Leveraging environmental variables in a Vue.js web application

The article I recently came across discussed how to effectively utilize environment variables in vuejs. Following the instructions, I set up my local .env.local file and also installed dotenv. VUE_APP_AUTH_AUTHORITY = 'http://localhost/auth' I ...

Obtain the count of unique key-value pairs represented in an object

I received this response from the server: https://i.stack.imgur.com/TvpTP.png My goal is to obtain the unique key along with its occurrence count in the following format: 0:{"name":"physics 1","count":2} 1:{"name":"chem 1","count":6} I have already rev ...

Passing a value from a prop to a click event that is dynamically created within an SVG Vue.js

Currently, I am in the process of developing a map component using a JSON array and implementing a click event handler for each item. The objective is to toggle the CSS style to color the item when clicked, which is functioning as expected. However, my goa ...

What is the best way to group all matched objects from an array based on multiple keys?

const data = [ { amount:10, gameId:7 , consoleId:3, id: 1 }, { amount:5, gameId:18 ,consoleId:3, id: 2 }, { amount:5, gameId:18 ,consoleId:3, id: 3 }, { amount:10, gameId:7 ,consoleId:3, id: 4 ...

What steps should be taken in order to ensure the effectiveness of this keyword search

Currently, I am attempting to implement a keyword search feature for my meteor web app. Although the functionality is there, it's running quite slow. The way it works now is that when a user creates an article, they assign keywords to it. The keyS fun ...

Combining and mapping arrays in Javascript to form a single object

I am using the following firebase function this.sensorService.getTest() .snapshotChanges() .pipe( map(actions => actions.map(a => ({ [a.payload.key]: a.payload.val() }))) ).subscribe(sensors => { ...

Guide to aligning the center of a div with the mouse cursor using JavaScript during mouse movement

I've been trying to center a div element with the mouse cursor, following its movement. However, the current code I have offsets the positioned div from the cursor instead of aligning it perfectly. PROCESS The concept behind my code is to display an ...

Once the if condition is implemented, the functionality of the toggle button ceases to operate

Take a look at this demo link: http://jsbin.com/labuxuziraya/1/edit I encountered an issue where the button stops working after adding an if condition. I suspect there are some minor bugs in the code, but my level of experience is not enough to pinpoint t ...

What is the best way to specify a submission destination for a custom form component in Vue?

I am looking to streamline the use of a form component across my website, however, I need the submit button to perform different actions depending on which page calls the form-component. Experimenting with Vue components and data passing is new to me as I ...

Cordova does not support the transform property

In the process of creating an Apache Cordova app using the Ionic framework and working with Phonegap Build, I encountered a challenge. The main page of my app features rows of icons that appear like this: https://i.sstatic.net/7LE7r.png However, there is ...

The file extension validation function is not functioning correctly on Windows, however it is successfully working as expected

async upload( @UploadedFile() file: Express.Multer.File, @Body() body: FileUploadDto, ) { const forbiddenExt = [ '.exe', '.bat', ]; const fileName = file.filename || f ...

There is no assigned value in scope for the shorthand property. You must either declare one or provide an initializer

I'm just starting out with TypeScript. Encountering the error 'No value exists in scope for the shorthand property 'firstName'. Either declare one or provide an initializer.' while using Prisma with Next.js to create a new user in ...

Navigating between functions in JavaScriptBy switching from one function to another

I'm facing an issue with two functions where I am trying to return a value from the second function. Unfortunately, I keep getting an alert with undefined. Any ideas on what might be the problem with my code? function funcA(){ var test = funcB("h ...