Gist for http://frenchreact.fr/connexion-facebook-avec-react article

app-withlogin-check.js

//...
firstTokenFacebook(token) {
  const url = `https://graph.facebook.com/me?access_token=${token}`;
  fetch(url).then(response => {
    if (response.status === 200) {
      this.setState({
        token
      });
    }
  });
}
//...

app-withlogin.js

//...
class App extends Component {
  constructor(){
    //...
    this.firstTokenFacebook = this.firstTokenFacebook.bind(this);
  }
  //...
  // On met à jour le token fb 
  firstTokenFacebook(token) {
    this.setState({
      token
    });
  }

  render() {
    const loginOrLogout = this.state.token
      ? <Route exact path="/logout" component={Logout} />
      : <Route
          exact
          path="/login"
          render={props =>
            <Login {...props} firstTokenFacebook={this.firstTokenFacebook} />}
        />;
    return (
      //...
    );
  }
}

export default App;

app-withLogout.js

//...
constructor() {
  //...
  this.logout = this.logout.bind(this);
}

logout() {
  this.setState({
    token: null
  });
}
//...
 render() {
    const loginOrLogout = this.state.token
      ? <Route
          exact
          path="/logout"
          render={props => <Logout {...props} logout={this.logout} />}
        />
      : <Route
          exact
          path="/login"
          render={props =>
            <Login {...props} firstTokenFacebook={this.firstTokenFacebook} />}
        />;
    //...
 }
//...

app-withserver.js

//...
firstTokenFacebook(token) {
  const url = `http://localhost:3001/login/${token}`;
  fetch(url).then(response => response.json()).then(response => {
    if (response.access_token) {
      this.setState({
        token: response.access_token
      });
    }
  });
}
//...

App.js

//...
import Logout from './logout';
//...
class App extends Component {
  constructor() {
    super();
    this.state = {
      token: null
    };
  }
  render() {
    const loginOrLogout = this.state.token
      ? <Route exact path="/logout" component={Logout} />
      : <Route
          exact
          path="/login"
          render={props =>
             //... nous en aurons besoin plus tard de passers des props customs
            <Login {...props} />}
        />;
    return (
      <div className="App">
        <Header token={this.state.token} />
        <div className="main">
          <Switch>
            {loginOrLogout}
            <Route path="/" component={Home} />
          </Switch>
        </div>
      </div>
    );
  }
}

export default App;

header.js

import PropTypes from 'prop-types';
//...
const propTypes = {
  token: PropTypes.string
};

const Header = props => {
  const loginOrLogout = props.token
    ? <NavLink to="/logout" exact>
        Déconnexion
      </NavLink>
    : <NavLink to="/login" exact>
        Connexion
      </NavLink>;

  return (
    <nav className="header">
      <li>
        <NavLink to="/" exact>
          Home
        </NavLink>
      </li>
      <li>
        {loginOrLogout}
      </li>
    </nav>
  );
};

Header.propTypes = propTypes;
//...

login-withloginfb.js

//...
const propTypes = {
  history: PropTypes.object.isRequired,
  location: PropTypes.object.isRequired,
  firstTokenFacebook: PropTypes.func.isRequired
};

class LoginComponent extends Component {
  componentDidMount() {
    // Si le # est présent dans l'url
    if (this.props.location.hash) {
      // On récupère les éléments qui nous intéressent
      const parsedResponse = this.props.location.hash.split('&');
      const parsedResponseToken = parsedResponse[0].split('=');
      if (
        parsedResponseToken.length === 2 &&
        parsedResponseToken[0] === '#access_token'
      ) {
        // On récupère le token
        const token = parsedResponseToken[1];
        // On met à jour le token
        this.props.firstTokenFacebook(token);
        this.props.history.replace('/');
      }
    }
  }

  openDialogLogin() {
    // ID de votre app Facebook
    const APP_ID = '1531267713602324';
    // URL de redirection (préalablement indiqué dans les parametres de l'app fb)
    const REDIRECT_URI = 'http://localhost:3000/login';

    // Url permettant d'appeler la boite de dialogue fb login
    // On y indique l'id de notre app
    // Le type de réponse ce l'on veux
    // et l'url de redirection
    const url = `https://www.facebook.com/v2.10/dialog/oauth?client_id=${APP_ID}&response_type=token&redirect_uri=${encodeURIComponent(
      REDIRECT_URI
    )}`;

    // On ouvre dans la fenetre courante
    window.open(url, '_self');
  }

  render() {
    return (
      <div className="login">
        <button
          onClick={this.openDialogLogin}
          className="login-button-facebook"
        >
          Connexion à Facebook
        </button>
      </div>
    );
  }
}
//...

logout.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';

const propTypes = {
  history: PropTypes.object.isRequired,
  logout: PropTypes.func.isRequired
};

class LogoutComponent extends Component {
  componentDidMount() {
    this.props.logout();
    this.props.history.replace('/');
  }

  render() {
    return <div>Déconnexion..</div>;
  }
}

LogoutComponent.propTypes = propTypes;

export default LogoutComponent;

server.js

var express = require('express');
var fetch = require('node-fetch');
var cors = require('cors');

var app = express();

app.use(cors());

const APP_ID = '1531267713602324';
const APP_SECRET = 'VOTE_CLE_SECRETE';

app.get('/login/:token', function(req, res) {
  const token = req.params.token;

  const urlLongToken = `https://graph.facebook.com/v2.10/oauth/access_token?grant_type=fb_exchange_token&client_id=${APP_ID}&client_secret=${APP_SECRET}&fb_exchange_token=${token}`;

  // On échange le token contre un token de longue durée
  fetch(urlLongToken)
    .then(response => response.json())
    .then(response => {
      if (response.access_token) {
        res
          .status(200)
          .send({
            access_token: response.access_token
          })
          .end();
      } else {
        res.status(500).send({error: 'Il y a eu une erreur'}).end();
      }
    })
    .catch(() => {
      res.status(500).send({error: 'Il y a eu une erreur'}).end();
    });
});

app.listen(3001, function() {
  console.log('Example app listening on port 3001!');
});