Getting OVERRIDING ACCESS_TOKEN warning on facebook logout button. This started a week ago

Question

I'm using login with facebook using FB javascript SDK 3.3. When i hit logout I'm getting a warning in my console.

You are overriding current access token, that means some other app is expecting different access token and you will probably break things. Please consider passing access_token directly to API parameters instead of overriding the global settings.

Here is a dummy react component where i'm testing FB login.

import React, { Component } from 'react'
import config from "../util/config";

export default class LoginTest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loggedin: undefined,
      username: "",
    }
  }

  componentDidMount() {
    let that = this;
    window.fbAsyncInit = function () {
      window.FB.init({
        appId: config.FB_APP_ID,
        cookie: true,
        xfbml: true,
        version: 'v3.3'
      });
      window.FB.getLoginStatus(function (response) {
        if (response.status === 'connected') {
          that.setState({ loggedin: true, username: response.authResponse.userID })
        }
        else that.setState({ loggedin: false });
      });
    };

    (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'));
  }

  login = () => {
    let that = this;
    this.setState({ loggedin: undefined });
    window.FB.login(function (response) {
      if (response.status === 'connected') {
        console.log("success", response);
        that.setState({ loggedin: true, username: response.authResponse.userID })
      } else {
        console.log("fail", response);
        that.setState({ loggedin: false, username: "" })
      }
    });
  }

  logout = () => {
    this.setState({ loggedin: undefined });
    let that = this;
    window.FB.logout(function (response) {
      if (response.status !== 'connected') {
        that.setState({ loggedin: false, username: ""});
      } else {
        that.setState({ loggedin: true, username: "" });
      }
    });
  }

  render() {
    return (
      <div style={{ margin: "auto", textAlign: "center", marginTop: 200 }}>
        {this.state.loggedin === undefined ?
          <h1>Loading</h1> : null
        }
        {this.state.loggedin === true ?
          <div>
            <h4>{this.state.username}</h4>
            <button onClick={this.logout}>logout</button>
          </div>
          : null
        }
        {this.state.loggedin === false ?
          <div>
            <button onClick={this.login}>Login</button>
          </div> : null
        }
      </div>
    )
  }
}

Answer 1

It's because you called FB.getLoginStatus and then by FB.login.

The error just means that you received an access token the first time when you called .getLoginStatus and then it was overwritten when you called .login.

You can fix this by either removing .getLoginStatus (it is probably unnecessary if you are about to call .login) or instead re-using the access token from .getLoginStatus and then passing it to the .login function.